@charset "utf-8";

@import url('reset.css');  /* 초기화 */

/*jquer mobile custom*/
input, textarea, select {font-size: 18px; padding: 0 10px;}
input::placeholder, textarea::placeholder, select::placeholder,
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {font-size: 18px; letter-spacing: -0.06em;}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {background: none; border: none; color: #555; text-shadow: none;}
.ui-body-a, .ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a {border: none; text-shadow: none; box-shadow: none; padding: 0; border-radius: 0; margin-top: 0;}
.ui-page-theme-a .ui-btn:hover, html .ui-bar-a .ui-btn:hover, html .ui-body-a .ui-btn:hover, html body .ui-group-theme-a .ui-btn:hover, html head+body .ui-btn.ui-btn-a:hover {background-color: #FFF; border: none; text-shadow: none; box-shadow: none;}
.ui-page-theme-a .ui-input-text {position: relative; margin: 0;}
.ui-input-text input:focus::placeholder, .ui-input-search input:focus::placeholder, .ui-input-search input:focus::placeholder, textarea.ui-input-text:focus::placeholder,
.ui-input-text input:focus::-webkit-input-placeholder, .ui-input-search input:focus::-webkit-input-placeholder, .ui-input-search input:focus::-webkit-input-placeholder, textarea.ui-input-text:focus::-webkit-input-placeholder {color: transparent;}
.ui-input-text input, .ui-input-search input, textarea.ui-input-text {padding: 7px 60px 10px 0;}
textarea.ui-input-text {resize: none;}
.ui-page-theme-a .ui-btn {display: inline-block; width: inherit; padding: 0; margin: 0; background-color: #FFF; border: none; text-shadow: none; box-shadow: none; font-weight: 400; font-size: 16px; border-radius: 0;}
.ui-checkbox .ui-btn, .ui-radio .ui-btn {padding: 0; margin: 0;}
.ui-icon-check:after, html .ui-btn.ui-checkbox-on.ui-checkbox-on:after,
.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after, .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after {background: none; background-color: inherit;}
.ui-checkbox-off:after, .ui-btn.ui-radio-off:after {filter: Alpha(Opacity=100); opacity: 1;}
.ui-dialog-contain {padding: 0; margin: 0; top: 0; left: 0; width: 100%; box-shadow: none; border: none; border-radius: 0;}
.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {background: none; border: none; text-shadow: none; font-weight: 400;}
.ui-btn-corner-all, .ui-btn.ui-corner-all, .ui-slider-track.ui-corner-all, .ui-flipswitch.ui-corner-all, .ui-li-count {border-radius: 0;}
.ui-shadow-inset {box-shadow: none;}
.ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html .ui-body-a .ui-btn:focus, html body .ui-group-theme-a .ui-btn:focus, html head+body .ui-btn.ui-btn-a:focus, .ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head+body .ui-btn-a.ui-focus, html head+body .ui-body-a.ui-focus {box-shadow: none;}
/*.ui-mobile .ui-page-active {overflow: hidden;}*/
.ui-page-theme-a a, .ui-page-theme-a a:visited, .ui-page-theme-a a:focus, .ui-page-theme-a a:hover {color: #555; font-weight: 400;}
.ui-disabled, .ui-state-disabled, button[disabled], .ui-select .ui-btn.ui-state-disabled {opacity: 1;}
.ui-loader-default {width: 100px; height: 100px; margin: -50px 0 0 -50px; opacity: 1; overflow: hidden; border-radius: 100%;}
.ui-loader .ui-icon-loading {background-color: transparent;}
.ui-icon-loading {background: url(../../static/images/loading-img.gif); background-size: 200px auto;}

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

/*IOS 스타일 셀렉트 데이터*/
.mobileSelect {position: relative; z-index: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s, z-index 0.3s; transition: opacity 0.3s, z-index 0.3s;}
.mobileSelect * {margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
.mobileSelect .grayLayer {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #eee; background: rgba(0, 0, 0, 0.7); z-index: 888; display: block;}
.mobileSelect .content {width: 100%; display: block; position: fixed; z-index: 889; color: black; -webkit-transition: all 0.4s; transition: all 0.4s; transition-delay: 0.2s; bottom: -350px; left: 0; background: white;}
.mobileSelect .content .fixWidth {margin: 0 auto; position: relative;}
.mobileSelect .content .fixWidth:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.mobileSelect .content .btnBar {border-bottom: 1px solid #DCDCDC; font-size: 15px; height: 45px; position: relative; text-align: center; line-height: 45px;}
.mobileSelect .content .btnBar .cancel,
.mobileSelect .content .btnBar .ensure {height: 45px; width: 55px; cursor: pointer; position: absolute; top: 0;}
.mobileSelect .content .btnBar .cancel {left: 0; color: #666;}
.mobileSelect .content .btnBar .ensure {right: 0; color: #007bff;}
.mobileSelect .content .btnBar .title {font-size: 15px; padding: 0 15%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mobileSelect .content .panel:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.mobileSelect .content .panel .wheels {width: 100%; height: 200px; overflow: hidden;}
.mobileSelect .content .panel .wheel {position: relative; z-index: 0; float: left; width: 50%; height: 200px; overflow: hidden; -webkit-transition: width 0.3s ease; transition: width 0.3s ease;}
.mobileSelect .content .panel .wheel .selectContainer {display: block; text-align: center; -webkit-transition: -webkit-transform 0.18s ease-out; transition: -webkit-transform 0.18s ease-out; transition: transform 0.18s ease-out; transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;}
.mobileSelect .content .panel .wheel .selectContainer li {font-size: 15px; display: block; height: 40px; line-height: 40px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mobileSelect .content .panel .selectLine {height: 40px; width: 100%; position: absolute; top: 80px; pointer-events: none; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC;}
.mobileSelect .content .panel .shadowMask {position: absolute; top: 0; width: 100%; height: 200px; background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 80%); background: linear-gradient(top,  rgba(255,255,255,1) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 80%); pointer-events: none;}
.mobileSelect-show {opacity: 1; z-index: 10000; visibility: visible;}
.mobileSelect-show .content {bottom: 0;}

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

/*부트스트랩 데이터 피커 커스터마이징 */
.datepicker {border-radius: 4px; direction: ltr;}
.datepicker-inline {width: 220px;}
.datepicker-rtl {direction: rtl;}
.datepicker-rtl.dropdown-menu {left: auto;}
.datepicker-rtl table tr td span {	float: right;}
.datepicker-dropdown {top: 0; left: 0; padding: 4px;}
.datepicker-dropdown:before {content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(0, 0, 0, 0.15); border-top: 0; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute;}
.datepicker-dropdown:after {content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-top: 0; position: absolute;}
.datepicker-dropdown.datepicker-orient-left:before {left: 6px;}
.datepicker-dropdown.datepicker-orient-left:after {	left: 7px;}
.datepicker-dropdown.datepicker-orient-right:before {right: 6px;}
.datepicker-dropdown.datepicker-orient-right:after {right: 7px;}
.datepicker-dropdown.datepicker-orient-bottom:before {top: -7px;}
.datepicker-dropdown.datepicker-orient-bottom:after {top: -6px;}
.datepicker-dropdown.datepicker-orient-top:before {bottom: -7px; border-bottom: 0; border-top: 7px solid rgba(0, 0, 0, 0.15);}
.datepicker-dropdown.datepicker-orient-top:after {bottom: -6px; border-bottom: 0; border-top: 6px solid #fff;}
.datepicker table {margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.datepicker table tr td,
.datepicker table tr th {text-align: center; width: 14.285%; height: 30px; border: none;}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {background-color: transparent;}
.datepicker table tr td.old,
.datepicker table tr td.new {color: #777777;}
.datepicker .prev.disabled,
.datepicker .next.disabled {visibility: hidden;}
.datepicker .cw {font-size: 10px; width: 12px; padding: 0 2px 0 5px; vertical-align: middle;}
.input-group.date .input-group-addon {cursor: pointer;}
.input-daterange {width: 100%;}
.input-daterange input {text-align: center;}
.input-daterange input:first-child {border-radius: 3px 0 0 3px;}
.input-daterange input:last-child {border-radius: 0 3px 3px 0;}
.input-daterange .input-group-addon {width: auto; min-width: 16px; padding: 4px 5px; line-height: 1.42857143; border-width: 1px 0; margin-left: -5px; margin-right: -5px;}
.datepicker.dropdown-menu {position: fixed; top: 0 !important; left: 0 !important; z-index: 100000 !important; display: none; width: 100%; height: 100%; padding: 0; margin: 0; list-style: none;}
.datepicker.dropdown-menu .date-dimmed {position: fixed; top: 0; left: 0; bottom: 0; right: 0; padding: 0; margin: 0; border: 0; background: #eee; background: rgba(0, 0, 0, 0.7); z-index: 0;}
.datepicker.dropdown-menu .datepicker-days {position: absolute; left: 50%; top: 50%; width: 260px; height: 300px; padding: 15px; margin: -150px 0 0 -130px; background-color: #FFF; border-radius: 10px; z-index: 1;}
.datepicker.dropdown-menu .datepicker-days:before {content: ''; position: absolute; top: 15px; left: 45px; display: block; width: 170px; height: 35px; font: 0/0 a; z-index: 2;}
.datepicker.dropdown-menu .datepicker-days .datepicker-switch {height: 35px; padding: 0; font-size: 20px; font-weight: 700; color: #050505;}
.datepicker.dropdown-menu .datepicker-days .prev,
.datepicker.dropdown-menu .datepicker-days .next {height: 33px; padding: 0; text-indent: -99999px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px auto;}
.datepicker.dropdown-menu .datepicker-days .prev {background-image: url(../../static/images/icon_datepicker_prev.png);}
.datepicker.dropdown-menu .datepicker-days .next {background-image: url(../../static/images/icon_datepicker_next.png);}
.datepicker.dropdown-menu .datepicker-days .dow {height: 30px; font-size: 12px; font-weight: 400; color: #050505;}
.datepicker.dropdown-menu .datepicker-days .dow:first-child {color: #f41100;}
.datepicker.dropdown-menu .datepicker-days td {padding: 0; margin: 0; height: 34px;}
.datepicker.dropdown-menu .datepicker-days td p {position: relative; height: 34px; line-height: 34px; margin: 0; padding: 0; text-align: center; font-size: 14px; font-weight: 500; color: #050505; font-family: 'roboto';}
.datepicker.dropdown-menu .datepicker-days td p span {position: relative; display: inline-block; z-index: 1;}
.datepicker.dropdown-menu .datepicker-days td p:after {content: ''; position: absolute; top: 2px; left: 50%; display: none; width: 28px; height: 28px; margin-left: -14px; font:0/0 a; background-color: #e2e2e2; border-radius: 100%; z-index: 0;}
.datepicker.dropdown-menu .datepicker-days td:first-child p {color: #f41100;}
.datepicker.dropdown-menu .datepicker-days td.old p,
.datepicker.dropdown-menu .datepicker-days td.new p {color: #b2b2b2;}
.datepicker.dropdown-menu .datepicker-days td.old:first-child p,
.datepicker.dropdown-menu .datepicker-days td.new:first-child p {color: #fd9e97;}
.datepicker.dropdown-menu .datepicker-days td.disabled p {color: #b2b2b2;}
.datepicker.dropdown-menu .datepicker-days td.disabled p:after {display: block;}
.datepicker.dropdown-menu .datepicker-days td.disabled:first-child p {color: #fd9e97;}
.datepicker.dropdown-menu .datepicker-days td.today p {color: #FFF;}
.datepicker.dropdown-menu .datepicker-days td.today p:after {display: block; background-color: #3c3c4a}
.datepicker.dropdown-menu .datepicker-days td.active p {color: #FFF;}
.datepicker.dropdown-menu .datepicker-days td.active p:after {display: block; background-color: #02cbd3;}
.datepicker.dropdown-menu .datepicker-days td.old.active p {color: #FFF;}

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

/*index 가이드 레이아웃, 나중에 삭제*/
.guide-page .head-title {padding: 30px 0;}
.guide-page .head-title h1 {font-size: 20px; font-weight: 400; text-align: center;}
.guide-page .table-list {table-layout: fixed; width: 95%; min-width: inherit; max-width: 700px; margin: 0 auto 30px; border-collapse: collapse; border-top: 1px solid #CCC; border-left: 1px solid #CCC;}
.guide-page .table-list th, .table-list td {padding: 5px; text-align: center; font-size: 14px; font-weight: 400; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC;}
.guide-page .table-list th {background-color: #EEE;}
.guide-page .table-list .left {text-align: left;}
.guide-page .table-list .sb-id {font-size: 13px;}
.guide-page .table-list .page-view {color: #FFF; padding: 1px 6px; background-color: rgba(85,85,85,1) !important; font-weight: 400; border-radius: 3px;}

.ui-mobile .ui-page-active.container {min-height: 100%;}

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

/*header*/
.header {position: relative; padding: 13px 24px; margin-bottom: 13px; background-color: #FFF; z-index: 100;}
.header h1 {text-align: center; font-size: 24px; font-weight: 700; color: #050505;}
.header .step-line-wrap {padding: 50px 0 30px; text-align: center; font-size: 0;}
.header .step-line-wrap {padding: 50px 0 30px; text-align: center; font-size: 0;}
.header .step-line-wrap span {position: relative; display: inline-block; vertical-align: top; width: 50px; height: 2px; margin-left: -10px; background-color: #eaebf0; z-index: 0;}
.header .step-line-wrap span:first-child {width: 10px; margin-left: 0px;}
.header .step-line-wrap span:after {content: ''; position: absolute; top: -4px; display: block; width: 10px; height: 10px; border-radius: 10px; background-color: #eaebf0;}
.header .step-line-wrap span:after {right: 0;}
.header .step-line-wrap span.on {background-color: #02cbd3; z-index: 1;}
.header .step-line-wrap span.on:after {background-color: #02cbd3;}
.header .btn-back {position: absolute; top: 9px; left: 10px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat 3px 0px; background-size: 200px auto;}
.header .btn-back:active {background-size: 180px auto; background-position: 5px 1px;}
.header.head-up {position: fixed; top: 0; left: 0; width: 100%;}
.header.head-up h1 {font-size: 16px; font-weight: 400;}
.header.head-up .step-line-wrap {display: none;}
.header-hidden {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0);}

.header-fix {position: fixed; top: 0; left: 0; width: 100%; padding: 13px 24px; margin-bottom: 13px; background-color: #FFF; z-index: 100;}
.header-fix h1 {font-size: 16px; font-weight: 400; color: #050505; text-align: center;}
.header-fix .btn-back {position: absolute; top: 9px; left: 10px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat 3px 0px; background-size: 200px auto;}
.header-fix .btn-back:active {background-size: 180px auto; background-position: 5px 1px;}
.header-fix .btn-close {left: auto; right: 17px; background-position: -131px -63px;}
.header-fix .btn-close.left {left: 17px; right: auto;}
.header-fix .btn-close:active {background-size: 180px auto; background-position: -116px -56px;}

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

/*footer*/
.footer {position: fixed; left: 0; bottom: 0; width: 100%; z-index: 100;}
.footer .footer-gnb {padding: 0 5px; overflow: hidden; background-color: #FFF; box-shadow: 0px 3px 5px 3px rgba(0,0,0,0.1);}
.footer .footer-gnb li {float: left; width: 20%; height: 50px; text-align: center;}
.footer .footer-gnb li a {display: inline-block; margin-top: 10px; text-align: center; font-size: 0px;}
.footer .footer-gnb li a:before {content: ''; display: block; width: 30px; height: 30px; margin: 0 auto; font: 0/0 a; background-repeat: no-repeat; background-size: 200px auto; background-image: url(../../static/images/icons.png); overflow: hidden;}
.footer .footer-gnb li.on a {margin-top: 3px; text-align: center; font-size: 10px; font-weight: 500; color: #02cbd3; line-height: 1;}
.footer .footer-gnb li.on a:before {animation-name: footIconRotate; animation-duration: 1s; animation-fill-mode: both;}
.footer .footer-gnb .menu1 a:before {background-position: -2px -424px;}
.footer .footer-gnb .menu2 a:before {background-position: -45px -424px;}
.footer .footer-gnb .menu3 a:before {background-position: -87px -424px;}
.footer .footer-gnb .menu4 a:before {background-position: -127px -424px;}
.footer .footer-gnb .menu5 a:before {background-position: -166px -424px;}
.footer .footer-gnb .menu1.on a:before {background-position: -2px -464px;}
.footer .footer-gnb .menu2.on a:before {background-position: -45px -464px;}
.footer .footer-gnb .menu3.on a:before {background-position: -87px -464px;}
.footer .footer-gnb .menu4.on a:before {background-position: -127px -464px;}
.footer .footer-gnb .menu5.on a:before {background-position: -166px -464px;}

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

/*main*/
.main {background-color: #d1ede7;}
.main .header-fix {height: 70px; padding: 0; margin: 0; background-color: #f5f5f5; overflow: hidden;}
.main .header-fix .date-select {position: relative; width: 225px; height: 55px; margin-top: 10px;}
.main .header-fix .date-select .ui-input-text {width: 205px; padding-left: 24px; background: none;}
.main .header-fix .date-select .ui-input-text input {position: relative; min-height: 50px; padding: 0 30px 0 0; font-size: 24px; font-weight: 700; font-family: 'roboto'; color: #050505; z-index: 1;}
.main .header-fix .date-select .ui-input-text:after {content: ''; position: absolute; top: 20px; right: 0px; display: block; width: 18px; height: 12px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -135px -119px; background-size: 200px auto; z-index: 0;}
.main .header-fix .date-select .weekday {position: absolute; top: 12px; right: 43px; font-size: 20px; font-weight: 700; color: #050505;}
.main .header-fix a {position: absolute; top: 24px; display: block; width: 25px; height: 25px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat; background-size: 200px auto;}
.main .header-fix .qr-code {right: 62px; background-position: -128px -389px;}
.main .header-fix .qr-code:active {background-position: -113px -349px; background-size: 180px auto;}
.main .header-fix .note {right: 24px; background-position: -167px -389px;}
.main .header-fix .note:active {background-position: -150px -349px; background-size: 180px auto;}
.main .header-fix .note .on {position: absolute; top: 0px; right: 3px; display: block; width: 8px; height: 8px; font: 0/0 a; background-color: #f41100; border-radius: 100%;}
.main .header-fix .note .off {display: none;}
.main .header-fix .work-check-btn {position: absolute; top: 24px; right: 100px; display: block; width: 50px; height: 24px; border-radius: 12px; border: 2px solid #555; font-size: 12px; font-weight: 700; letter-spacing: -1px; text-align: center; line-height: 1.6; background-color:transparent; cursor: pointer; transition:all 0.2s ease;}
.main .header-fix .work-check-btn.active {border-color:#02cbd3;color:#fff;background-color:#02cbd3;}

.main .content {padding: 70px 0px 50px;}
.main .no-schedule-text {height: 210px; padding: 40px 24px 40px; font-weight: 500; color: #b2b2b2; text-align: center; background-color: #f5f5f5;}
.main .no-schedule-text .motion {position: relative; width: 80%; height: 110px; margin: 0 auto;}
.main .no-schedule-text .motion span {position: absolute; display: block; background-repeat: no-repeat; background-position: 50% 50%;}
.main .no-schedule-text .motion .line span {width: 43px; height: 40px; background-size: 41px auto; opacity: 0; animation-duration: 0.5s; animation-fill-mode: both;}
.main .no-schedule-text .motion .line .line1 {animation-name: mainSliderLine1; animation-delay: 0.1s; top: -10px; left: -10px; background-image: url(../../static/images/main-line01.png);}
.main .no-schedule-text .motion .line .line2 {animation-name: mainSliderLine2; animation-delay: 0.3s; top: -10px; right: -10px; background-image: url(../../static/images/main-line02.png);}
.main .no-schedule-text .motion .line .line3 {animation-name: mainSliderLine3; animation-delay: 0.5s; bottom: -10px; left: -10px; background-image: url(../../static/images/main-line03.png);}
.main .no-schedule-text .motion .line .line4 {animation-name: mainSliderLine4; animation-delay: 0.7s; bottom: -10px; right: -10px; background-image: url(../../static/images/main-line04.png);}
.main .no-schedule-text .motion .text {position: relative; top: 35px; width: 240px; margin: 0 auto;}
.main .no-schedule-text .motion .text span {width: 28px; height: 28px; background-size: 150px auto; background-image: url(../../static/images/main-text01.png); opacity: 0; animation-duration: 0.5s; animation-fill-mode: both;}
.main .no-schedule-text .motion .text .text1 {animation-name: fadeDown; animation-delay: 0.9s; top: 0px; left: 45px; background-position: 5px 0px;}
.main .no-schedule-text .motion .text .text2 {animation-name: fadeDown; animation-delay: 1.0s; top: 0px; left: 58px; background-position: -20px 0px;}
.main .no-schedule-text .motion .text .text3 {animation-name: fadeDown; animation-delay: 1.1s; top: 0px; left: 70px; background-position: -42px 0px;}
.main .no-schedule-text .motion .text .text4 {animation-name: fadeDown; animation-delay: 1.2s; top: 0px; left: 93px; background-position: -69px 0px;}
.main .no-schedule-text .motion .text .text5 {animation-name: fadeDown; animation-delay: 1.3s; top: 0px; left: 109px; background-position: -96px 0px;}
.main .no-schedule-text .motion .text .text6 {animation-name: fadeDown; animation-delay: 1.4s; top: 0px; left: 130px; background-position: -122px 0px;}
.main .no-schedule-text .motion .img {position: relative; top: 33px; width: 240px; margin: 0 auto;}
.main .no-schedule-text .motion .img .img1 {position: absolute; right: 45px; width: 35px; height: 30px; background: url(../../static/images/main-img01.png) no-repeat 50% 50%; background-size: 33px auto; opacity: 0; animation-duration: 0.5s; animation-fill-mode: both; animation-name: mainRestImg; animation-delay: 2.0s;}
.main .main-group {position: relative;}
.main .main-group.slider-wrap {background-color: #f5f5f5;}
.main .main-group.slider-wrap .main-visual {position: relative; padding: 25px 0px 40px;}
.main .main-group.slider-wrap .main-slider .slick-list {position: relative; display: block; margin: 0; padding: 0;}
.main .main-group.slider-wrap .main-slider .slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}
.main .main-group.slider-wrap .main-slider .item {position: relative; height: auto; display: inline-block; float: none; vertical-align: middle; padding: 0px 10px; outline: 0 none;}
.main .main-group.slider-wrap .main-slider .item .item-frame {position: relative; width: 100%; height: 0; padding-bottom: 100%;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 100%; background-color: #9ca0ac; box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.1); text-align: center; color: #FFF; outline: 0 none;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle:before {content: ''; display: inline-block; vertical-align: middle; width: 0px; height: 100%; font: 0/0 a;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .text-wrap {display: inline-block; vertical-align: middle; width: 90%;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .text-wrap span {position: relative; display: block; font-weight: 700; text-shadow: 3px 3px 7px rgba(0,0,0,0.1); animation-name: fadeUp; animation-duration: 0.5s; animation-fill-mode: both; top: 0px;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .text-wrap .date {font-size: 18px; margin-bottom: 5px; animation-delay: 1s;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .text-wrap .tit {font-size: 46px; margin-bottom: 15px; animation-delay: 1.3s;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .text-wrap .time1 {font-size: 13px; font-weight: 400; margin-bottom: 5px; animation-delay: 1.6s;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .text-wrap .time2 {font-size: 18px; animation-delay: 1.6s;}
/*.main .main-group.slider-wrap .main-slider .item .item-frame .circle .line {}*/
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .line span {position: absolute; display: block; width: 43px; height: 40px; background-size: 41px auto; background-repeat: no-repeat; background-position: 50% 50%; opacity: 0;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .line .line1 {animation-name: mainSliderLine1; top: -10px; left: -10px; background-image: url(../../static/images/main-line01.png);}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .line .line2 {animation-name: mainSliderLine2; top: -10px; right: -10px; background-image: url(../../static/images/main-line02.png);}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .line .line3 {animation-name: mainSliderLine3; bottom: -10px; left: -10px; background-image: url(../../static/images/main-line03.png);}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle .line .line4 {animation-name: mainSliderLine4; bottom: -10px; right: -10px; background-image: url(../../static/images/main-line04.png);}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle.on {background: rgb(118,238,155); background: -moz-linear-gradient(45deg,  rgba(118,238,155,1) 15%, rgba(77,217,239,1) 65%); background: -webkit-linear-gradient(45deg,  rgba(118,238,155,1) 15%,rgba(77,217,239,1) 65%); background: linear-gradient(45deg,  rgba(118,238,155,1) 15%,rgba(77,217,239,1) 65%);}
.main .main-group.slider-wrap .main-slider .item.slick-center .item-frame .circle.on .line span {animation-delay: 0.5s; animation-duration: 0.5s; animation-fill-mode: both;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle:active .text-wrap .date {font-size: 17px;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle:active .text-wrap .tit {font-size: 45px;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle:active .text-wrap .time1 {font-size: 12px;}
.main .main-group.slider-wrap .main-slider .item .item-frame .circle:active .text-wrap .time2 {font-size: 17px;}

.main .main-group.slider-wrap .office-work-check {text-align: center; margin-bottom: 20px;}
.main .main-group.slider-wrap .office-work-check > div {display: inline-block; vertical-align: middle; height: 35px; line-height: 35px; margin: 0 5px; background-color: #FFF; border-radius: 35px;}
.main .main-group.slider-wrap .office-work-check .icon {padding: 0 18px; font-size: 14px; font-weight: 500; color: #050505;}
.main .main-group.slider-wrap .office-work-check .icon:before {content: ''; display: inline-block; vertical-align: middle; width: 25px; height: 22px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat; background-size: 220px auto;}
.main .main-group.slider-wrap .office-work-check .icon.normal:before {background-position: -4px -356px;}
.main .main-group.slider-wrap .office-work-check .icon.late:before {background-position: -38px -356px;}
.main .main-group.slider-wrap .office-work-check .icon.absent:before {background-position: -72px -356px;}
.main .main-group.slider-wrap .office-work-check .time-select {padding: 0 18px;}
.main .main-group.slider-wrap .office-work-check .time-select label {display: inline-block; vertical-align: middle; height: 35px; margin: 0 10px 0 0; font-size: 14px; font-weight: 500;}
.main .main-group.slider-wrap .office-work-check .time-select .ui-input-text {display: inline-block; vertical-align: middle; width: 90px; height: 35px;}
.main .main-group.slider-wrap .office-work-check .time-select .ui-input-text input {position: relative; min-height: 35px; padding: 0px; font-size: 14px; font-weight: 700; color: #050505; z-index: 1;}
.main .main-group.slider-wrap .office-work-check .time-select .ui-input-text:after {content: ''; position: absolute; top: 12px; right: 0px; display: block; width: 18px; height: 12px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -135px -119px; background-size: 200px auto; z-index: 0;}

.main .main-group.slider-wrap .office-work-time {position: relative; margin: 0px 16px; padding: 15px 20px; background-color: #FFF; border-radius: 10px; z-index: 1;}
.main .main-group.slider-wrap .office-work-time ul {overflow: hidden;}
.main .main-group.slider-wrap .office-work-time ul li {float: left; position: relative;}
.main .main-group.slider-wrap .office-work-time .st1 {padding-bottom: 15px; border-bottom: 1px solid #d8d8d8;}
.main .main-group.slider-wrap .office-work-time .st1 li {width: 50%; min-height: 45px; padding-left: 55px;}
.main .main-group.slider-wrap .office-work-time .st1 li:before {content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 45px; height: 45px; font: 0/0 a; background-repeat: no-repeat; background-size: 250px auto; background-image: url(../../static/images/icons.png); border-radius: 10px;}
.main .main-group.slider-wrap .office-work-time .st1 .step1:before {background-color: #79d0f7; background-position: 6px -358px;}
.main .main-group.slider-wrap .office-work-time .st1 .step2:before {background-color: #6ae2b7; background-position: -33px -358px;}
.main .main-group.slider-wrap .office-work-time .st1 li span {display: block;}
.main .main-group.slider-wrap .office-work-time .st1 li .title {font-size: 13px; font-weight: 500; margin-bottom: 2px;}
.main .main-group.slider-wrap .office-work-time .st1 li .time {font-size: 18px; font-weight: 700; color: #050505;}
.main .main-group.slider-wrap .office-work-time .st2 {padding-top: 15px;}
.main .main-group.slider-wrap .office-work-time .st2 li {width: 33.3333%; font-size: 13px; font-weight: 500; text-align: center;}
.main .main-group.slider-wrap .office-work-time .st2 li .time {margin-left: 5px; color: #050505;}
.main .main-group.slider-wrap .office-work-time .st2 .step1 {text-align: left;}
.main .main-group.slider-wrap .office-work-time .st2 .step3 {text-align: right;}

.main .main-group.slider-wrap .office-work-btn {position: relative; padding: 85px 0px 15px; margin-top: -70px; background-color: #02cbd3; text-align: center; z-index: 0;}
.main .main-group.slider-wrap .office-work-btn a {position: relative; display: inline-block; vertical-align: middle; margin: 0 20px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 700; color: #FFF;}
.main .main-group.slider-wrap .office-work-btn a:active {color: #EEE;}
.main .main-group.slider-wrap .office-work-btn a:before {content: ''; position: absolute; top: 9px; left: -22px; display: block; width: 1px; height: 13px; font: 0/0 a; background-color: #81e5e9;}
.main .main-group.slider-wrap .office-work-btn a:first-child:before {display: none;}

.main .main-group.work-contract-wrap {padding-top: 30px;}
.main .main-group.work-contract-wrap .contract-btn-wrap {margin: 0 10px; font-size: 0px; text-align: center;}
.main .main-group.work-contract-wrap .contract-btn-wrap li {display: inline-block; width: 33.33333%;}
.main .main-group.work-contract-wrap .contract-btn-wrap li a {position: relative; display: block; width: 92%; margin: 0 auto; padding: 20px 0; background-color: #FFF; border-radius: 10px; box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05); -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.main .main-group.work-contract-wrap .contract-btn-wrap li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f9f9f9; border-radius: 10px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.main .main-group.work-contract-wrap .contract-btn-wrap li a:active:before,
.main .main-group.work-contract-wrap .contract-btn-wrap li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.main .main-group.work-contract-wrap .contract-btn-wrap li a span {position: relative; display: block; margin-left: 18px; font-size: 15px; font-weight: 500; text-align: left;}
.main .main-group.work-contract-wrap .contract-btn-wrap li a .icon {margin-bottom: 10px; font-size: 13px; font-weight: 700; font-family: 'roboto';}
.main .main-group.work-contract-wrap .contract-btn-wrap li a .icon:after {content: ''; display: block; width: 40px; height: 40px; margin-top: 2px; font: 0/0 a; background-image: url(../../static/images/icons.png); background-repeat: no-repeat; background-size: 200px auto; border-radius: 100%;}
.main .main-group.work-contract-wrap .contract-btn-wrap .step1 a .icon {color: #e3b5f6;}
.main .main-group.work-contract-wrap .contract-btn-wrap .step2 a .icon {color: #79d0f7;}
.main .main-group.work-contract-wrap .contract-btn-wrap .step3 a .icon {color: #6ae2b7;}
.main .main-group.work-contract-wrap .contract-btn-wrap .step1 a .icon:after {background-color: #e3b5f6; background-position: 6px -382px;}
.main .main-group.work-contract-wrap .contract-btn-wrap .step2 a .icon:after {background-color: #79d0f7; background-position: -35px -382px;}
.main .main-group.work-contract-wrap .contract-btn-wrap .step3 a .icon:after {background-color: #6ae2b7; background-position: -75px -382px;}

.main .main-group.work-plan-wrap {position: relative; margin: 30px 16px 0px; padding: 20px; background-color: #FFF; border-radius: 10px; box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);}
.main .main-group.work-plan-wrap h2 {margin-bottom: 20px; font-size: 18px; font-weight: 700; color: #050505;}
.main .main-group.work-plan-wrap .time-wrap {overflow: hidden;}
.main .main-group.work-plan-wrap .time-wrap li {float: left; width: 50%; text-align: center;}
.main .main-group.work-plan-wrap .time-wrap li span {display: inline-block; vertical-align: middle; margin: 0 3px; line-height: 40px; font-size: 15px; font-weight: 500;}
.main .main-group.work-plan-wrap .time-wrap li .text {width: 40px; height: 40px; font-size: 14px; font-weight: 700; color: #FFF; border-radius: 100%;}
.main .main-group.work-plan-wrap .time-wrap .step1 .text {background-color: #d8a5ed;}
.main .main-group.work-plan-wrap .time-wrap .step2 .text {background-color: #02cbd3;}

.main .main-group.note-wrap {position: relative; margin: 40px 24px 25px;}
.main .main-group.note-wrap h2 {margin-bottom: 20px; font-size: 18px; font-weight: 700; color: #050505;}
.main .main-group.note-wrap .note-slider {min-height: 115px;}
.main .main-group.note-wrap .note-slider .slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.main .main-group.note-wrap .note-slider .slick-list .slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}
.main .main-group.note-wrap .note-slider .slick-list .slick-track .slick-slide {float: left; height: 100%; min-height: 1px;}
.main .main-group.note-wrap .note-slider .note-list li {margin-bottom: 15px;}
.main .main-group.note-wrap .note-slider .note-list li a {font-size: 15px; outline: 0;}
.main .main-group.note-wrap .note-slider .slick-prev {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0);}
.main .main-group.note-wrap .note-slider .slick-next {position: absolute; top: 0px; right: 0px; width: 63px; height: 25px; outline: 0; text-indent: -99999px;}

.main .main-group.note-wrap .refresh {position: absolute; top: 0px; right: 0px; display: block; padding: 3px 10px; background-color: #3d4954; border-radius: 5px; font-size: 13px; color: #a5a5a5;}
.main .main-group.note-wrap .refresh .icon {display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 5px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -111px -356px; background-size: 200px auto;}
.main .main-group.note-wrap .refresh strong {color: #FFF;}
.main .main-group.note-wrap .note-no-text {position: relative; height: 110px; padding-top: 10px; text-align: center; font-size: 15px;}
.main .main-group.note-wrap .note-no-text::before {content: ''; display: block; width: 34px; height: 42px; margin: 0 auto 10px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -39px -550px; background-size: 200px auto;}


.main .main-group.notice-wrap {background-color: #a4bbbb;}
.main .main-group.notice-wrap .notice-slider {height: 60px; overflow: hidden;}
.main .main-group.notice-wrap .notice-slider .item {outline: 0 none;}
.main .main-group.notice-wrap .notice-slider .item a {position: relative; display: block; height: 60px; line-height: 60px;  margin: 0 24px; text-align: center; font-size: 15px; color: #050505;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; outline: 0 none;}
.main .main-group.notice-wrap .notice-slider .item a span {display: inline-block; vertical-align: 2px; width: 20px; height: 20px; line-height: 20px; margin-left: 5px; font-size: 12px; font-weight: 700; color: #FFF; text-align: center; border-radius: 100%; background-color: #f41100;}

.main .main-group.graph-wrap {padding: 40px 24px; background-color: #363d44; color: #FFF;}
.main .main-group.graph-wrap h2 {margin-bottom: 30px; font-size: 18px; font-weight: 700; color: #FFF;}
.main .main-group.graph-wrap .graph-cont {position: relative; padding-top: 20px; opacity: 0;}
.main .main-group.graph-wrap .graph-cont.active {animation-name: ContentFadeUp; animation-duration: 0.5s; animation-fill-mode: both;}
.main .main-group.graph-wrap .graph-cont .graph-list1 {width: 180px; margin-bottom: 50px; overflow: hidden;}
.main .main-group.graph-wrap .graph-cont .graph-list1 li {position: relative; float: left; width: 80px;}
.main .main-group.graph-wrap .graph-cont .graph-list1 li .title {position: absolute; left: 0px; bottom: 0px; width: 100%; height: 20px; font-size: 13px; text-align: center; z-index: 1;}
.main .main-group.graph-wrap .graph-cont .graph-list1 li .bar-wrap {position: relative; width: 40px; height: 120px; margin: 30px auto; z-index: 0;}
.main .main-group.graph-wrap .graph-cont .graph-list1 li .bar-wrap .bar {position: absolute; left: 0px; bottom: 0px; width: 100%; text-indent: -99999px; border-radius: 20px 20px 2px 2px;}
.main .main-group.graph-wrap .graph-cont .graph-list1 li .bar-wrap .bar.ani {animation-name: graphBarVertical; animation-duration: 0.5s; animation-fill-mode: both;}
.main .main-group.graph-wrap .graph-cont .graph-list1 li .bar-wrap .bar span {position: absolute; left: -20px; top: -30px; width: 80px; text-indent: initial; text-align: center; font-size: 15px; font-weight: 700;}
.main .main-group.graph-wrap .graph-cont .graph-list1 .item1 .bar-wrap .bar {background: rgb(57,191,251); background: -moz-linear-gradient(top,  rgba(57,191,251,1) 0%, rgba(121,208,247,1) 100%); background: -webkit-linear-gradient(top,  rgba(57,191,251,1) 0%,rgba(121,208,247,1) 100%); background: linear-gradient(to bottom,  rgba(57,191,251,1) 0%,rgba(121,208,247,1) 100%); animation-delay: 0.1s;}
.main .main-group.graph-wrap .graph-cont .graph-list1 .item2 .bar-wrap .bar {background: rgb(45,217,156); background: -moz-linear-gradient(top,  rgba(45,217,156,1) 0%, rgba(105,227,183,1) 100%); background: -webkit-linear-gradient(top,  rgba(45,217,156,1) 0%,rgba(105,227,183,1) 100%); background: linear-gradient(to bottom,  rgba(45,217,156,1) 0%,rgba(105,227,183,1) 100%); animation-delay: 0.3s;}
.main .main-group.graph-wrap .graph-cont .graph-list1 .item1 .bar-wrap .bar span {color: #65ccfa;}
.main .main-group.graph-wrap .graph-cont .graph-list1 .item2 .bar-wrap .bar span {color: #4ee9b1;}
.main .main-group.graph-wrap .graph-cont .text-wrap {position: absolute; right: 7%; bottom: 27px; z-index: 0; animation-delay: 0.5s;}
.main .main-group.graph-wrap .graph-cont .text-wrap.ani {animation-name: fade; animation-duration: 0.5s; animation-fill-mode: both;}
.main .main-group.graph-wrap .graph-cont .text-wrap p {margin-top: 10px; font-size: 13px; color: #a5a5a5;}
.main .main-group.graph-wrap .graph-cont .text-wrap p span {margin-left: 15px; font-size: 15px; font-weight: 700; color: #FFF;}

.main .main-group.graph-wrap .graph-cont .work-time-btn {position: absolute; top: -3px; right: 0px; display: block; width: 30px; height: 30px; text-indent: -99999px; border-radius: 100%; background: #3b4651 url(../../static/images/icons.png) no-repeat -148px -33px; background-size: 200px auto;}
.main .main-group.graph-wrap .graph-cont .work-time-btn:active {background-position: -132px -28px; background-size: 180px auto;}
.main .main-group.graph-wrap .graph-cont .graph-list2 {margin-bottom: 30px;}
.main .main-group.graph-wrap .graph-cont .graph-list2 li {position: relative; height: 30px;}
.main .main-group.graph-wrap .graph-cont .graph-list2 li .title {position: absolute; top: 0px; left: 0px; width: 70px; height: 30px; line-height: 30px; padding-right: 10px; font-size: 13px; text-align: right;}
.main .main-group.graph-wrap .graph-cont .graph-list2 li .bar-wrap {position: relative; margin: 0px 50px 0px 70px;}
.main .main-group.graph-wrap .graph-cont .graph-list2 li .bar-wrap .bar {position: absolute; top: 12px; left: 0px; height: 6px; background-color: #50907e; border-radius: 6px;}
.main .main-group.graph-wrap .graph-cont .graph-list2 li .bar-wrap .bar.ani {animation-name: graphBar; animation-duration: 0.5s; animation-fill-mode: both;}
.main .main-group.graph-wrap .graph-cont .graph-list2 li .bar-wrap .bar span {position: absolute; top: -12px; right: -53px; display: block; width: 45px; height: 30px; line-height: 30px; font-size: 13px; font-weight: 500; text-align: left; color: #2effb4;}
.main .main-group.graph-wrap .graph-cont .graph-list2 .item1 .title {font-size: 15px; font-weight: 700;}
.main .main-group.graph-wrap .graph-cont .graph-list2 .item1 .bar-wrap .bar {background-color: #02cbd3;}
.main .main-group.graph-wrap .graph-cont .graph-list2 .item1 .bar-wrap .bar span {font-size: 15px; color: #02cbd3;}
.main .main-group.graph-wrap .graph-cont .graph-list2 .item1 .bar-wrap .bar {animation-delay: 0.1s;}
.main .main-group.graph-wrap .graph-cont .graph-list2 .item2 .bar-wrap .bar {animation-delay: 0.3s;}
.main .main-group.graph-wrap .graph-cont .graph-list2 .item3 .bar-wrap .bar {animation-delay: 0.5s;}
.main .main-group.graph-wrap .graph-cont .graph-list2 .item4 .bar-wrap .bar {animation-delay: 0.7s;}

.main .main-group.graph-wrap .graph-cont .percent-wrap {overflow: hidden; z-index: 0; animation-delay: 0.9s;}
.main .main-group.graph-wrap .graph-cont .percent-wrap.ani {animation-name: fade; animation-duration: 0.5s; animation-fill-mode: both;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li {float: left; width: 50%;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div {position: relative; padding: 20px 15px; background-color: #3b4651; border-radius: 10px;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .title {position: absolute; top: 26px; left: 15px; margin-left: 0px; font-size: 15px; font-weight: 700;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .title span {display: block; font-size: 12px; font-weight: 400;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .percent {margin-bottom: 25px; text-align: right; font-size: 22px; font-weight: 700; color: #02cbd3;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .text {position: relative; padding-left: 20px; font-size: 13px; text-align: right;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .text:before {content: ''; display: inline-block; vertical-align: 2px; width: 0px; height: 0px; margin-right: 8px;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .text.up {color: #ff796f;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .text.up:before {border-top: 5px solid none; border-bottom: 6px solid #ff796f; border-right: 5px solid transparent; border-left: 5px solid  transparent;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .text.down {color: #83b8ff;}
.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .text.down:before {border-top: 6px solid #83b8ff; border-bottom: 5px solid none; border-right: 5px solid transparent; border-left: 5px solid  transparent;}
.main .main-group.graph-wrap .graph-cont .percent-wrap .item1 > div {margin-right: 5px;}
.main .main-group.graph-wrap .graph-cont .percent-wrap .item2 > div {margin-left: 5px;}

.main .main-group.work-time-etc {padding: 50px 24px; background-color: #FFF;}
.main .main-group.work-time-etc h2 {margin-bottom: 20px; font-size: 18px; font-weight: 700; color: #050505;}
.main .main-group.work-time-etc .etc-list li {position: relative; min-height: 50px;}
.main .main-group.work-time-etc .etc-list li .myinfo {position: relative;}
.main .main-group.work-time-etc .etc-list li .myinfo span {display: inline-block; vertical-align: middle;}
.main .main-group.work-time-etc .etc-list li .myinfo .photo {width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.main .main-group.work-time-etc .etc-list li .myinfo .name {height: 40px; line-height: 40px; margin-left: 14px; font-size: 15px; font-weight: 500;}
.main .main-group.work-time-etc .etc-list li .text {position: absolute; top: 0px; right: 0px; height: 35px; line-height: 35px; padding: 0px 20px; font-size: 15px; color: #f41100; border: 1px solid #f41100; border-radius: 35px;}
.main .main-group.work-time-etc .etc-no-text {padding: 10px 0; font-size: 15px; font-weight: 500; color: #b2b2b2; text-align: center;}

/* main 관리자 */
.main .main-group.admin-wrap {padding: 20px 0;background-color: #f5f5f5;}
.main .main-group.admin-wrap .store-info {position: relative; margin: 0 16px; padding: 18px 24px 14px; background-color: #FFF; border-radius: 8px; box-shadow: 2px 2px 10px 0px rgba(61,73,84,0.10);}
.main .main-group.admin-wrap .store-info .st1 {padding-bottom: 14px; border-bottom: 1px solid rgba(178,178,178,0.5);} /* 211007 삭제 */
.main .main-group.admin-wrap .store-info .st1 .store-name {position: relative; display: block; height: 40px; padding-left: 50px; font-size: 18px; font-weight: 700; color: #050505; line-height: 40px;}
.main .main-group.admin-wrap .store-info .st1 .store-name:before {content:''; display: inline-block; width: 40px; height: 40px; border-radius: 10px; background: #02cbd3 url(../../static/images/icons3.png) no-repeat 0 0; background-size: 200px auto; position: absolute;left: 0;top: 0;}
.main .main-group.admin-wrap .store-info .st2 {position: relative; padding-top: 10px;}
.main .main-group.admin-wrap .store-info .st2 .store-salary-period {display: inline-block; font-size: 13px; font-weight: 500;}
.main .main-group.admin-wrap .store-info .st2 .store-salary-period span {display: inline-block;}
.main .main-group.admin-wrap .store-info .st2 .store-salary-period .title {color: #555;}
.main .main-group.admin-wrap .store-info .st2 .store-salary-period .time {color: #050505; padding-left: 9px;}
.main .main-group.admin-wrap .store-info .st2 .store-change-btn {position: absolute; top: 14px; right: 20px; font-size: 13px; color: #b2b2b2; font-weight: 500;}
.main .main-group.admin-wrap .store-info .st2 .store-change-btn:after {content: ''; display: inline-block; width: 14px; height: 14px; background: url(../../static/images/icons3.png) no-repeat -8px -48px; background-size: 200px auto; position: absolute; right: -20px; top: 2px;}
.main .main-group.admin-wrap .graph-list-admin {position: relative; margin: 0 24px; padding-bottom: 20px;}
.main .main-group.admin-wrap .graph-list-admin li {margin-top: 30px;}
.main .main-group.admin-wrap .graph-list-admin li .title {position: relative;}
.main .main-group.admin-wrap .graph-list-admin li .title h3 {font-size: 13px; font-weight: 700; color: #555;}
.main .main-group.admin-wrap .graph-list-admin li .title .total {position: absolute; right: 0; top: 0; font-size: 13px; font-weight: 500; color: #050505;}
.main .main-group.admin-wrap .graph-list-admin li .title .total em {font-size: 18px; line-height: 1;}
.main .main-group.admin-wrap .graph-list-admin li.item1 .title .total em {margin-right: 3px;}

.main .main-group.admin-wrap .graph-list-admin li .bar-wrap {position: relative; height: 25px; }
.main .main-group.admin-wrap .graph-list-admin li .bar-wrap p {position: absolute; left: 0; top: 14px; height: 8px; border-radius: 4px;}
.main .main-group.admin-wrap .graph-list-admin li .bar-wrap .base {width: 100%; background-color: #dadada;}
.main .main-group.admin-wrap .graph-list-admin li .bar-wrap .bar-work {z-index: 2;animation-name: graphBar; animation-duration: 0.5s; animation-fill-mode: both;}
.main .main-group.admin-wrap .graph-list-admin li .bar-wrap .bar-un {z-index: 1;animation-name: graphBar; animation-duration: 0.5s; animation-fill-mode: both;}
.main .main-group.admin-wrap .graph-list-admin li.item1 .bar-work {animation-delay: 1.0s;}
.main .main-group.admin-wrap .graph-list-admin li.item1 .bar-un {animation-delay: 0.7s;}
.main .main-group.admin-wrap .graph-list-admin li.item2 .bar-work {animation-delay: 1.9s;}
.main .main-group.admin-wrap .graph-list-admin li.item2 .bar-un {animation-delay: 1.6s;}

.main .main-group.admin-wrap .graph-list-admin li.item1 .bar-work, .main .main-group.admin-wrap .graph-list-admin li.item1 .legend .work:before {background-color: #cf76f9;}
.main .main-group.admin-wrap .graph-list-admin li.item1 .bar-un, .main .main-group.admin-wrap .graph-list-admin li.item1 .legend .un:before {background-color: #e5b9ff;}
.main .main-group.admin-wrap .graph-list-admin li.item2 .bar-work, .main .main-group.admin-wrap .graph-list-admin li.item2 .legend .work:before {background-color: #02cbd3;}
.main .main-group.admin-wrap .graph-list-admin li.item2 .bar-un, .main .main-group.admin-wrap .graph-list-admin li.item2 .legend .un:before {background-color: #9ae3e6;}
.main .main-group.admin-wrap .graph-list-admin li .legend {text-align:right;}
.main .main-group.admin-wrap .graph-list-admin li .legend span {position: relative; margin-left:16px; font-size: 13px; color: #555;}
.main .main-group.admin-wrap .graph-list-admin li .legend span:before {content: ''; display: inline-block; margin: 0 6px 1px 0; width: 8px; height: 8px; border-radius: 50%;}
.main .main-group.admin-wrap .graph-list-admin li .legend span em {margin-left: 5px;font-weight: 500;color: #050505;}

.main .main-group.admin-wrap.close {display: none;}
.main .main-group.slider-wrap {display: none;}
.main .main-group.slider-wrap.open {display: block;height:auto;}

/* 메인 투썸 추가 */
.main .main-group.admin-wrap.tt-main {padding: 20px 0 40px;}
.main .main-group.admin-wrap.tt-main .store-info .st1 {position:relative;}
.main .main-group.admin-wrap.tt-main .store-info .st1 .store-change-btn {position: absolute; top: 12px; right: 20px; font-size: 13px; color: #b2b2b2; font-weight: 500;}
.main .main-group.admin-wrap.tt-main .store-info .st1 .store-change-btn:after {content: ''; display: inline-block; width: 14px; height: 14px; background: url(../../static/images/icons3.png) no-repeat -8px -48px; background-size: 200px auto; position: absolute; right: -20px; top: 2px;}
.main .main-group.admin-wrap.tt-main .store-info .st2 .graph-list-admin {margin:0;padding:0;}
.main .main-group.admin-wrap.tt-main .store-info .st2 .graph-list-admin li {margin-top:3px}
.main .main-group.work-time-etc .etc-list li .myinfo .name .position {display:inline-block;min-width:34px;height:16px;padding:0 3px;margin:0 0 0 6px;border-radius:3px;background-color:#02cbd3;font-size:10px;font-weight:700;color:#fff;line-height:16px;text-align:center;vertical-align:middle;box-sizing:border-box;}
.main .main-group.graph-wrap.tt-graph .graph-cont .text-wrap {bottom:0;right:8px;}
.main .main-group.graph-wrap.tt-graph .graph-cont .text-wrap p {height:22px;line-height:22px;margin-top:0;}
.main .main-group.graph-wrap.tt-graph .graph-cont .text-wrap p span {float:right;font-size:13px;}
.main .main-group.graph-wrap.tt-graph .graph-cont .text-wrap p:after {content:'';display:block;clear:both;}
.main .main-group.graph-wrap.tt-graph .graph-cont .graph-list2 .item1 .bar-wrap .bar {background-color:#72cff8;opacity:0.5;}
.main .main-group.graph-wrap.tt-graph .graph-cont .graph-list2 .item2 .bar-wrap .bar {background-color:#02cbd3;}
.main .main-group.graph-wrap.tt-graph .graph-cont .graph-list2 .item3 .bar-wrap .bar {background-color:#e1c034;}
.main .main-group.graph-wrap.tt-graph .graph-cont .graph-list2 .item4 .bar-wrap .bar {background-color:#ff796f;}
.main .main-group.graph-wrap.tt-graph .graph-cont .graph-list2 .item5 .bar-wrap .bar {background-color:#828282;}

.main .main-group.slider-wrap.tt-main .office-work-check .dot {width:100px;padding: 0 18px; font-size: 14px; font-weight: 500; color: #050505;}
.main .main-group.slider-wrap.tt-main .office-work-check .dot:before {content: ''; display: inline-block; vertical-align: middle; width: 9px; height: 9px; margin:-3px 6px 0 0; border-radius: 50%; font: 0/0 a;}
.main .main-group.slider-wrap.tt-main .office-work-check .dot.pre:before {background-color:#54869e;}
.main .main-group.slider-wrap.tt-main .office-work-check .dot.normal:before {background-color:#02cbd3;}
.main .main-group.slider-wrap.tt-main .office-work-check .dot.late:before {background-color:#ffce00;}
.main .main-group.slider-wrap.tt-main .office-work-check .dot.absent:before {background-color:#ff796f;}
.main .main-group.slider-wrap.tt-main .office-work-check .time-select {width:175px;}
.main .main-group.slider-wrap.tt-main .office-work-check .time-select .ui-input-text {width:70px;}
.main .main-group.slider-wrap.tt-main .office-work-check .time-select .ui-input-text:after {left:0;top:27px;width:64px;height:1px;background-color:#050505;background-image:none;}
.main .main-group.slider-wrap.tt-main .office-work-check .time-select span {display:inline-block;font-size:14px;font-weight:500;color:#555;position:relative;}
.main .main-group.slider-wrap.tt-main .office-work-check .time-select .input-time {margin-left:12px;font-weight:700;color:#050505;}
.main .main-group.slider-wrap.tt-main .office-work-check .time-select .input-time:after {content:'';position:absolute;left:0;top:27px;width:100%;height:1px;background-color:#050505;}
.main .main-group.slider-wrap.tt-main .office-work-time .st2 {padding:15px 10px 0;display:flex;justify-content:space-between;}
.main .main-group.slider-wrap.tt-main .office-work-time .st2 li {width:25%;}
.main .main-group.slider-wrap.tt-main .office-work-time .st2 li .title {position:relative;display:block;padding:0 0 0 22px;margin:0;font-size:13px;font-weight:500;color:#555;text-align:left;letter-spacing:-1px;}
.main .main-group.slider-wrap.tt-main .office-work-time .st2 li .time {display:block;padding:0;margin:7px 0 0 0;font-size:13px;font-weight:700;color:#050505;text-align:left;}
.main .main-group.slider-wrap.tt-main .office-work-time .st2 li .title:before {content:'';position:absolute;left:0;top:0;width:16px;height:16px;background-image:url(../../static/images/icons3.png);background-repeat:no-repeat;background-size:200px auto;}
.main .main-group.slider-wrap.tt-main .office-work-time .st2 li.step1 .title:before {background-position:-2px -82px;}
.main .main-group.slider-wrap.tt-main .office-work-time .st2 li.step2 .title:before {background-position:-22px -82px;}
.main .main-group.slider-wrap.tt-main .office-work-time .st2 li.step3 .title:before {background-position:-42px -82px;}
.main .main-group.slider-wrap.tt-main .office-work-time .st2 li.step4 .title:before {background-position:-62px -82px;}

#main-break-time .layer-content {height: 467px; border-radius: 15px 15px 0px 0px;}
#main-break-time .layer-content .work-group-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
#main-break-time.layer-popup-wrap .layer-content .layer-close-btn {position: absolute; top: 14px; left: 12px; display: block; width: 30px; height: 30px; text-indent: -99999px; overflow: hidden; background: url(../../static/images/icons.png) no-repeat -131px -63px; background-size: 200px auto;}
#main-break-time .break-time-wrap {padding:28px 24px 30px;}
#main-break-time .break-time-wrap .text {padding:0 10px;font-size:15px;font-weight:500;color:#050505;}
#main-break-time .break-time-wrap .breaktime-guide {padding:0 10px;margin:18px 0;}
#main-break-time .break-time-wrap .breaktime-guide p {position:relative;padding:0 0 0 19px;margin-bottom:10px;font-size:13px;color:#f41100;line-height:1.4;}
#main-break-time .break-time-wrap .breaktime-guide p:before {content:'';width:15px;height:15px;background:url(../../static/images/icons.png) no-repeat -39px -510px;background-size:200px auto;position:absolute;left:0;top:2px;}
#main-break-time .break-time-wrap .time-box {position:relative;height:40px;line-height:38px;padding:0 16px;border:1px solid #e2e2e2;border-radius:4px;background-color:#fff;}
#main-break-time .break-time-wrap .time-box .title {display:inline-block;font-size:15px;}
#main-break-time .break-time-wrap .time-box .time {position:absolute;right:16px;top:0;text-align:right;}
#main-break-time .break-time-wrap .time-box .time > div {display:inline-block;}
#main-break-time .break-time-wrap .time-box .time .select {vertical-align:top;margin-top:8px;}
#main-break-time .break-time-wrap .time-box .time .select .ui-input-text {position:relative;width:62px;}
#main-break-time .break-time-wrap .time-box .time .select .ui-input-text input {position:relative;min-height:22px;padding:0;border-bottom:1px solid #555;font-size:13px;}
#main-break-time .break-time-wrap .time-box .time .select .ui-input-text:after {content: ':'; position: absolute; top: 0px; right: 15px; display: block; z-index: 0; line-height: normal; font-size: 15px;}
#main-break-time .break-time-wrap .textarea-wrap {margin:17px 0 33px; padding: 10px; background-color: #f4f4f4; border: 1px solid #e2e2e2; border-radius: 5px;}
#main-break-time .break-time-wrap .textarea-wrap textarea {max-height: 70px; height: 70px !important; font-size: 15px; background-color: transparent;}
#main-break-time .break-time-wrap .textarea-wrap textarea::placeholder {font-size: 15px;}
#main-break-time .break-time-wrap .btn-wrap {position: relative;}
#main-break-time .break-time-wrap .btn-wrap a {display: block; height: 50px; line-height: 50px; font-size: 16px; font-weight: 700; color: #FFF; text-align: center; border-radius: 3px;}
/* 20220214 추가 */
#main-break-time .layer-content {height:60%;}
#main-break-time .layer-content .cont-scroll {position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;}
#main-break-time .break-time-wrap {padding-bottom:80px;}
#main-break-time .break-time-wrap .time-box {height:42px;border-radius:4px 4px 0 0;}
#main-break-time .break-time-wrap .time-box.prev {height:auto;margin-top:-2px;border-radius:0 0 4px 4px;background-color:#f4f4f4;}
#main-break-time .break-time-wrap .time-box.prev:after {content:'';display:block;clear:both;}
#main-break-time .break-time-wrap .time-box.prev .time {position:relative;right:0;float:right;padding:8px 0;}
.time-lst-prev {font-size:14px;line-height:24px;}

/* 20220310 수정 */
#main-break-time .break-time-wrap .time-box .time .time-select .input-time {position:relative;font-size:14px;}
#main-break-time .break-time-wrap .time-box .time .time-select .input-time:after {content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background-color:#555;}

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

/*content*/
.content {padding: 0px;}
.content .content-title {text-align: center; padding: 10px 24px;}
.content .guoup-wrap {padding-bottom: 40px;}
.content .guoup-wrap.last {padding-bottom: 20px;}

/*input, select 박스 리스트 영역*/
.input-wrap {padding: 0 24px;}
.input-wrap li {margin-bottom: 15px; padding-top: 20px; position: relative;}
.input-wrap .line {position: relative; height: 1px; background-color: #DDD;}
.input-wrap .line span {content: ''; position: absolute; top: 0; left: 0; display: block; width: 0; height: 1px;}
.input-wrap .line .line-focus {background-color: #00ada3; transition: width 0.5s;}
.input-wrap .line .line-focus.on {width: 100%;}
.input-wrap .line .line-fail {background-color: #f41100; width: 0%; transition: width 0.5s;}
.input-wrap .line .line-fail.on {width: 100%;}
.input-wrap .fail-text {padding-top: 8px; font-size: 11px; color: #f41100; text-align: left;}
.input-wrap label {position: absolute; top: 0px; left: 0px; font-size: 14px; margin: 0; transition: 0.5s; opacity: 0;}
.input-wrap label.on {opacity: 1;}
.input-wrap label.view {opacity: 1;}
.input-wrap label.label-on {opacity: 1;}
.input-wrap input {position: relative; z-index: 1;}
.input-wrap .select-wrap .ui-input-text:after,
.input-wrap .add-num-wrap .ui-input-text:after {content: ''; position: absolute; display: block; width: 24px; height: 24px; font: 0/0 a; background-image: url(../../static/images/icons.png); background-repeat: no-repeat; background-size: 200px auto;}
.input-wrap .select-wrap .ui-input-text:after {top: 8px; right: 3px; background-position: -31px -2px; z-index: 0;}
.input-wrap .add-num-wrap .ui-input-text:after {top: 5px; right: 0px; background-position: -169px -68px;}
.input-wrap .important {padding-top: 0; font-size: 13px; color: #f41100;}
.input-wrap .important:before {content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-right: 3px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -39px -510px; background-size: 200px auto;}
.input-icon-wrap {position: absolute; top: 25px; right: 0px; font-size: 0; z-index: 1;}
.input-icon-wrap a,
.input-icon-wrap span {display: inline-block; vertical-align: top; width: 25px; height: 25px; margin: 0 10px; font-size: 0; background-size: 200px auto; background-image: url(../../static/images/icons.png); background-repeat: no-repeat;}
.input-icon-wrap .btn-clear {background-position: -166px -5px;}
.input-icon-wrap .btn-check {background-position: -2px -36px;}
.input-icon-wrap .btn-view {background-position: -130px -3px;}
.input-icon-wrap .btn-view.on {background-position: -91px -3px;}
.input-icon-wrap .btn-address {background-position: -169px -68px;}

/*약관동의 체크하기*/
.agree-wrap {margin-top: 40px; padding: 20px 24px; border-top: 8px solid #f5f5f5;}
.agree-wrap .agree-all-select {margin-bottom: 30px;}
.agree-wrap .agree-all-select input {left: 3px; top: 17px; background-color: transparent;}
.agree-wrap .agree-all-select label {padding: 5px 30px 5px 40px; font-size: 18px; font-weight: 700; position: relative;}
.agree-wrap .agree-all-select label.ui-btn.ui-checkbox-off:after,
.agree-wrap .agree-all-select label.ui-btn.ui-checkbox-on:after {width: 25px; height: 25px; left: 0; top: 13px; border-radius: 25px; background: url(../../static/images/icons.png) no-repeat; background-size: 200px auto; z-index: 2;}
.agree-wrap .agree-all-select label.ui-btn.ui-checkbox-off:after {border: 1px solid #CCC; background-color: #FFF; background-position: -61px -33px;}
.agree-wrap .agree-all-select label.ui-btn.ui-checkbox-on:after {border: none; background-color: #02cbd3; background-position: -32px -33px;}
.agree-wrap .agree-list li {position: relative; display: block;}
.agree-wrap .agree-list li .ui-checkbox input {left: 2px; top: 16px;}
.agree-wrap .agree-list li .ui-checkbox label {padding: 5px 30px 5px 40px;}
.agree-wrap .agree-list li .ui-checkbox label.ui-checkbox-off:after,
.agree-wrap .agree-list li .ui-checkbox label.ui-checkbox-on:after {margin: 0; left: 0px; top: 3px; width: 25px; height: 25px; background: #FFF url(../../static/images/icons.png) no-repeat; background-size: 200px auto;}
.agree-wrap .agree-list li .ui-checkbox label.ui-checkbox-off:after {background-position: -88px -32px;}
.agree-wrap .agree-list li .ui-checkbox label.ui-checkbox-on:after {background-position: -117px -32px;}
.agree-wrap .agree-list li .btn-agree-cont {position: absolute; top: 2px; right: -5px; display: block; width: 30px; height: 25px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -55px -2px; background-size: 200px auto; z-index: 3;}

/*레이어 팝업 형식 페이지*/
.layer-container.layer-agree-wrap,
.layer-container.layer-agree-wrap .ui-dialog-contain {background-color: #f5f5f5;}
.layer-container .layer-header {position: fixed; top: 0; left: 0; width: 100%; padding: 13px 24px; margin-bottom: 13px; background-color: #FFF; z-index: 100;}
.layer-container .layer-header h1 {font-size: 16px; font-weight: 400; color: #050505; text-align: center;}
.layer-container .layer-header .btn-back {position: absolute; top: 9px; left: 10px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat 3px 0px; background-size: 200px auto;}
.layer-container .layer-header .btn-back:active {background-size: 180px auto; background-position: 5px 1px;}
.layer-container .layer-header .btn-close {left: auto; right: 17px; background-position: -131px -63px;}
.layer-container .layer-header .btn-close:active {background-position: -116px -56px;}
.layer-container .layer-header .btn-close.left {left: 17px; right: auto;}
.layer-container .layer-header .btn-confirm {position: absolute; top: 9px; right: 20px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -39px -252px; background-size: 200px auto;}
.layer-container .layer-header .btn-confirm:active {background-size: 180px auto; background-position: -34px -225px;}
.layer-container .layer-header .btn-confirm.disable,
.layer-container .layer-header .btn-confirm.disable:active {background-position: -110px -42px; background-size: 250px auto;}
.layer-container .layer-cont {margin-top: 50px;}
.layer-container .layer-agree {padding: 24px 24px 100px; font-size: 11px; line-height: 1.7;}
.layer-container .layer-pw-find {padding-bottom: 85px;}
.layer-container .layer-pw-find .content-title {padding: 60px 24px;}
.layer-container .layer-btn-wrap {margin-top: 20px;}
.layer-container .layer-btn-wrap .btn-close {display: block; height: 64px; line-height: 64px; font-size: 19px; font-weight: 400; text-align: center; color: #FFF; background-color: #02cbd3;}
.layer-container .layer-btn-wrap .btn-close:active {font-size: 18px;}
.layer-container .layer-agree + .layer-btn-wrap {position: absolute; left: 0; bottom: 0; width: 100%;}

/*버튼 영역*/
.btn-wrap {position: absolute; left: 0; bottom: 0; width: 100%; z-index: 100;}
.btn-wrap.fix {position: fixed;}
.btn-wrap.rel {position: relative;}
.btn-wrap a {display: block; font-size: 19px; font-weight: 400; text-align: center;}
.btn-wrap a:active {font-size: 18px;}
.btn-wrap .btn-style1 {height: 64px; line-height: 64px;}
.btn-wrap .btn-style1.on {color: #FFF; background-color: #02cbd3;}
.btn-wrap .btn-style1.gray {color: #FFF; background-color: #3d3c4a;}
.btn-wrap .btn-style1.pink {color: #FFF; background-color: #e26af0;}
.btn-wrap .btn-style1.red {color: #FFF; background-color: #f41100;}
.btn-wrap .btn-style2 {height: 60px; line-height: 60px; color: #FFF; background-color: #02cbd3; border-radius: 60px;}
.btn-wrap .btn-style2.off {color: #afafb2; background-color: #f1f2f5;}
.btn-wrap .btn-style1.on:hover, .btn-wrap .btn-style2:hover {color: #FFF;}
.btn-wrap .btn-style1.off {color: #afafb2; background-color: #f1f2f5;}
.btn-wrap .btn-style1.off:active {font-size: 19px;}

/*회원가입 인트로 영역*/
.intro-wrap {height: 100%; margin: 0; text-align: center; font-size: 0;}
.intro-wrap:before {content: ''; width: 0px; height: 100%; display: inline-block; vertical-align: middle;}
.intro-wrap .v-center-wrap {display: inline-block; vertical-align: middle; width: 100%;}
.intro-wrap .intro-header {margin: 10px 0 35px;}
.intro-wrap .intro-header h1 {font-family: 'CJ Onlyone New'; font-weight: 700; font-size: 36px; color: #282e44;}
.intro-wrap .content-title {padding: 0 24px; font-size: 28px; color: #282e44;}
.intro-wrap .content-title span {font-size: 18px; font-weight: 700;}
.intro-wrap .btn-wrap {position: relative; margin-top: 120px; padding: 0 24px;}
.intro-wrap .btn-wrap a {display: block; margin: 10px auto 0px;}
.intro-wrap .btn-wrap .btn-signup {height: 60px; line-height: 60px; color: #01bcc3; background: none;}

/*회원가입 유형 선택*/
.signup-wrap {padding-bottom: 85px;}
.signup-type-wrap {padding: 40px 24px 0px; overflow: hidden;}
.signup-type-wrap li {float: left; width: 50%;}
.signup-type-wrap li .ui-radio {width: 140px; margin: 0 auto;}
.signup-type-wrap li .ui-radio input {opacity: 0;}
.signup-type-wrap li .ui-radio .ui-btn {position: relative; display: block; background: none; text-align: center; font-size: 14px;}
.signup-type-wrap li .ui-radio .ui-btn:before {content: ''; display: block; height: 140px; margin: 0px auto 15px; border-radius: 140px; border: 4px solid #eaebf0; background-color: #f2f2f3; background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 50%;}
.signup-type-wrap li.type1 .ui-radio .ui-btn:before {background-image: url(../../static/images/signup_type1_off.png);}
.signup-type-wrap li.type2 .ui-radio .ui-btn:before {background-image: url(../../static/images/signup_type2_off.png);}
.signup-type-wrap li .ui-radio .ui-btn.ui-radio-on {font-size: 16px; font-weight: 700; color: #050505;}
.signup-type-wrap li .ui-radio .ui-btn.ui-radio-on:before {border: 4px solid #02cbd3;}
.signup-type-wrap li.type1 .ui-radio .ui-btn.ui-radio-on:before {background-image: url(../../static/images/signup_type1_on.png);}
.signup-type-wrap li.type2 .ui-radio .ui-btn.ui-radio-on:before {background-image: url(../../static/images/signup_type2_on.png);}
.signup-type-wrap li .ui-radio .ui-btn.ui-radio-on:after {width: 26px; height: 26px; top: inherit; bottom: 25px; left: 50%; margin: 0 0 0 -13px; border: none; background: #00c1c3 url(../../static/images/icons.png) no-repeat -32px -33px; background-size: 200px auto;}
.signup-type-wrap li.type2.disabled {pointer-events:none;}
.signup-type-wrap li.type2 .ui-radio.ui-state-disabled label {color:#b2b2b2;}
.signup-wrap .content-title .tx-point {color:#02cbd3;font-weight:500;}
.signup-wrap .content-title .btn-trial {display:inline-block;margin-top:16px;color:#02cbd3;text-decoration:underline;position:relative;}
.signup-wrap .content-title .btn-trial:after {content:'';display:inline-block;width:16px;height:16px;margin:3px 0 0 5px;vertical-align:top;background:url(../../static/images/icons.png) no-repeat -180px -540px;background-size:200px auto;}
#signUp2 .signup-wrap {padding-bottom: 0px;}

/*이메일 인증 및 서명 입력*/
#signUp3 .signup-wrap .input-wrap {margin-top: 50px;}
.email-code-re {text-align: right; padding: 0 24px 20px; font-size: 12px; color: #333;}
.email-code-re a {display: inline-block; text-decoration: underline;}
.sign-wrap {width: 250px; height: 250px; margin: 30px auto 0px; background-color: #f5f5f5; border-radius: 10px; border: 4px solid #eaebf0;}
.signup-wrap .init-btn-wrap {position: relative; width: 250px; margin: 0 auto;}
.signup-wrap .init-btn {position: absolute; top: -240px; right: 10px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: #b2b2b2 url(../../static/images/icons.png) no-repeat 3px -214px; background-size: 200px auto; border-radius: 100%;}

/* 주소입력 */
#signUp5 .signup-wrap .input-wrap {margin-top: 50px;}
/*주소찾기 레이어 팝업*/
#popup-find-address .layer-content {width:92%;height:94%;top:3%;left:4%;border-radius: 15px;}
#popup-find-address .layer-content .work-group-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 10;}
#popup-find-address .layer-content .work-group-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
#popup-find-address .layer-content .work-group-header .close-btn {top:13px;}
#popup-find-address .layer-content .cont-scroll {position: relative;height: 100%;overflow-y: auto;overflow-x: hidden;}
#popup-find-address .layer-content .cont-scroll .address-api-wrap {padding:76px 0 20px;}

/*회원가입 프로시저 수정*/
#signUp1 .header h1, #signUp2 .header h1, #signUp3 .header h1, #signUp4 .header h1, #signUp5 .header h1, #pwReset .header h1 {padding-top:56px;}
#signUp1 .header.head-up h1, #signUp2 .header.head-up h1, #signUp3 .header.head-up h1, #signUp4 .header.head-up h1, #signUp5 .header.head-up h1, #pwReset .header.head-up h1 {padding-top:0;}
#signUp1 .step-line-wrap, #signUp2 .step-line-wrap, #signUp3 .step-line-wrap, #signUp4 .step-line-wrap, #signUp5 .step-line-wrap {display:none;}

/* 이용약관 */
.agree-box .title:first-of-type {margin-top:0;}
.agree-box .title {margin:20px 0 10px; font-size: 13px; font-weight: 700; color: #050505;}
.agree-box .agree-para {padding:10px 0;}
.agree-box .agree-para span, .agree-box .agree-para em {display:block;position:relative;}
.agree-box .agree-para .subtit {padding-bottom:4px;}
.agree-box .agree-para .bul01 {padding-left:16px;}
.agree-box .agree-para .bul01:before {display:inline-block;width:10px;height:10px;position:absolute;left:0;}
.agree-box .agree-para .bul01:nth-of-type(1):before {content:'①';}
.agree-box .agree-para .bul01:nth-of-type(2):before {content:'②';}
.agree-box .agree-para .bul01:nth-of-type(3):before {content:'③';}
.agree-box .agree-para .bul01:nth-of-type(4):before {content:'④';}
.agree-box .agree-para .bul01:nth-of-type(5):before {content:'⑤';}
.agree-box .agree-para .bul01:nth-of-type(6):before {content:'⑥';}
.agree-box .agree-para .bul01:nth-of-type(7):before {content:'⑦';}
.agree-box .agree-para .bul01:nth-of-type(8):before {content:'⑧';}
.agree-box .agree-para .bul02 {counter-reset:section;}
.agree-box .agree-para .bul02 li {position:relative;padding-left:30px;}
.agree-box .agree-para .bul02 li:before {counter-increment:section;content:counter(section) ".";display:block;position:absolute;left:16px;}
.agree-box .agree-para .bul03 {padding-left:14px;}
.agree-box .agree-para .bul03:before {display:inline-block;width:10px;height:10px;position:absolute;left:0;}
.agree-box .agree-para .bul03:nth-of-type(1):before {content:'1. ';}
.agree-box .agree-para .bul03:nth-of-type(2):before {content:'2. ';}
.agree-box .agree-para .bul03:nth-of-type(3):before {content:'3. ';}
.agree-box .agree-para .bul03:nth-of-type(4):before {content:'4. ';}
.agree-box .agree-para .bul03:nth-of-type(5):before {content:'5. ';}
.agree-box .agree-para .bul03:nth-of-type(6):before {content:'6. ';}
.agree-box .agree-para .bul03:nth-of-type(7):before {content:'7. ';}
.agree-box .agree-para .bul03:nth-of-type(8):before {content:'8. ';}
.agree-box .agree-para .bul04 li {position:relative;padding-left:30px;}
.agree-box .agree-para .bul04 li:before {display:inline-block;width:10px;height:10px;position:absolute;left:16px;}
.agree-box .agree-para .bul04 li:nth-of-type(1):before {content:'1)';}
.agree-box .agree-para .bul04 li:nth-of-type(2):before {content:'2)';}
.agree-box .agree-para .bul04 li:nth-of-type(3):before {content:'3)';}
.agree-box .agree-para .bul04 li:nth-of-type(4):before {content:'4)';}
.agree-box .agree-para .bul04 li:nth-of-type(5):before {content:'5)';}
.agree-box .agree-para .bul04 li:nth-of-type(6):before {content:'6)';}
.agree-box .agree-para .bul04 li:nth-of-type(7):before {content:'7)';}
.agree-box .agree-para .bul04 li:nth-of-type(8):before {content:'8)';}
.agree-box .agree-para .bul05 li {position:relative;padding-left:10px;}
.agree-box .agree-para .bul05 li:before {content:'-' !important;display:inline-block;width:10px;height:10px;position:absolute;left:0;}
.agree-box .agree-para .bul06 li {position:relative;padding-left:16px;}
.agree-box .agree-para .bul06 li:before {display:inline-block;width:10px;height:10px;position:absolute;left:0;}
.agree-box .agree-para .bul06 li:nth-of-type(1):before {content:'①';}
.agree-box .agree-para .bul06 li:nth-of-type(2):before {content:'②';}
.agree-box .agree-para .bul06 li:nth-of-type(3):before {content:'③';}
.agree-box .agree-para .bul06 li:nth-of-type(4):before {content:'④';}
.agree-box .agree-para .bul06 li:nth-of-type(5):before {content:'⑤';}
.agree-box .agree-para .bul06 li:nth-of-type(6):before {content:'⑥';}
.agree-box .agree-para .bul06 li:nth-of-type(7):before {content:'⑦';}
.agree-box .agree-para .bul06 li:nth-of-type(8):before {content:'⑧';}
.agree-box .agree-para .bul-first > li:nth-of-type(1):before {content:none !important;}

.agree-table .bul05 li {position:relative;padding-left:10px;text-align:left;}
.agree-table .bul05 li:before {content:"-";display:block;position:absolute;left:0;top:-1px;}
.agree-table {margin:10px 0;}
.agree-table th, .agree-table td {padding:5px;border:1px solid #e2e2e2;font-size:11px;font-weight:400;text-align:center;}
.agree-table th {background-color:#f0f0f0;}
.agree-table td {background-color:#fff;}
.agree-table td.left {text-align:left;padding-left:10px;}
.agree-box .agree-para .contract-date {padding:20px 0;text-align:center;}

/*로그인 페이지 영역*/
.intro-wrap .intro-header h1 {width: 150px; height: 150px; margin: 0 auto; text-indent: -99999px; background: url(../../static/images/logo1.png) no-repeat 50% 50%; background-size: 150px auto;}
#login.intro-wrap .intro-header h1 {width: 120px; height: 120px; background-size: 120px auto;}
.login-select {position: relative; padding: 0 24px 10px; text-align: right;}
.login-select label, .login-select .ui-flipswitch {display: inline-block; vertical-align: middle; margin: 0;}
.login-select label {margin-right: 10px; font-size: 15px; color: #333;}
.login-wrap .btn-wrap .btn-style3 {padding: 5px; margin-bottom: 10px; font-size: 14px; color: #333; text-decoration: underline;}
.intro-wrap .content .login-wrap .btn-wrap {margin-top: 40px;}
.intro-wrap .content .login-wrap .btn-wrap .btn-style2 {margin-bottom: 20px;}

/*생체인증 기능 체크 아이콘*/
.ui-flipswitch.ui-corner-all {width: 38px; height: 26px; background-color: #e2e2e2; border-radius: 26px;}
.ui-flipswitch .ui-btn.ui-flipswitch-on {border: none; text-indent: -99999px;}
.ui-flipswitch span {width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; text-indent: -99999px;}
.ui-flipswitch.ui-flipswitch-active {padding-left: 12px; background-color: #02cbd3;}
.ui-flipswitch .ui-btn.ui-flipswitch-on {margin: 2px; width: 22px; height: 22px; background: #FFF;}
.ui-flipswitch .ui-btn.ui-flipswitch-on:visited {background: none;}
.ui-flipswitch input {margin: 0; clip: auto;}

.login-wrap .ui-flipswitch.ui-corner-all {width: 45px; height: 30px; background-color: #e2e2e2; border-radius: 30px;}
.login-wrap .ui-flipswitch .ui-btn.ui-flipswitch-on {border: none; text-indent: -99999px;}
.login-wrap .ui-flipswitch span {width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; text-indent: -99999px;}
.login-wrap .ui-flipswitch.ui-flipswitch-active {padding-left: 15px; background-color: #02cbd3;}
.login-wrap .ui-flipswitch .ui-btn.ui-flipswitch-on {margin: 2px; width: 26px; height: 26px;}
.login-wrap .ui-flipswitch input {right: 24px; width: 45px; height: 30px;}

/*사업장 선택*/
.business-container {background-color: #f5f5f5;}
.business-container .header {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0);}
.business-container .content {position: relative;}
.place-main-wrap {position: relative;}
.business-top-bg {position: absolute; top: -425px; left: 50%; display: block; width: 600px; height: 600px; margin-left: -300px; font: 0/0 a; background-color: #02cbd3; border-radius: 100%; z-index: 0;}
.place-main-wrap {position: relative; z-index: 1;}
.place-main-wrap h2 {position: relative; padding: 30px 35px 20px; font-size: 14px; font-weight: 700; color: #FFF; z-index: 1;}
.place-main-wrap h3 {padding: 0px 24px 10px; font-size: 18px; font-weight: 700; color: #333;}
.place-main-wrap .memberInfo {position: relative; padding-bottom: 35px;}
.place-main-wrap .memberInfo:before {content: ''; position: absolute; bottom: 0px; left: 0px; display: block; width: 100%; height: 90px; background-color: #f5f5f5; z-index: 1;}
.place-main-wrap .memberInfo .title {position: relative; display: block; margin: 35px 24px 30px; color: #FFF; z-index: 1;}
.place-main-wrap .memberInfo .title:after {content: ''; position: absolute; top: 20px; right: 0px; display: block; width: 30px; height: 30px; font: 0/0 a; border-radius: 100%; background: #00acbb url(../../static/images/icons.png) no-repeat -148px -33px; background-size: 200px auto; border-radius: 30px;}
.place-main-wrap .memberInfo .title .photo {position: absolute; top: 2px; left: 0px; width: 50px; height: 50px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.place-main-wrap .memberInfo .title .text {margin-left: 65px; font-size: 28px; font-weight: 700; line-height: 1.3;}
.place-main-wrap .memberInfo .title .text span {display: block; font-size: 14px;}
.place-main-wrap .memberInfo .title .btn-pay {position: absolute; top: 5px; right: 0px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: #00acbb url(../../static/images/icons.png) no-repeat -148px -33px; background-size: 200px auto; border-radius: 30px;}
.place-main-wrap .memberInfo .title .btn-pay:active {background-color: #00a1af; background-size: 180px auto; background-position: -131px -28px;}
.place-main-wrap .memberInfo .list {position: relative; z-index: 1;}
.place-main-wrap .memberInfo .list .top {position: relative; height: 20px; margin: 0px 30px; background: url(../../static/images/business-place-bg03.png); background-size: 5px auto;}
.place-main-wrap .memberInfo .list .top:before,
.place-main-wrap .memberInfo .list .top:after {content: ''; position: absolute; top: 0px; display: block; width: 30px; height: 20px; background-repeat: no-repeat; background-size: 30px auto;}
.place-main-wrap .memberInfo .list .top:before {left: -30px; background-image: url(../../static/images/business-place-bg01.png);}
.place-main-wrap .memberInfo .list .top:after {right: -30px; background-image: url(../../static/images/business-place-bg02.png);}
.place-main-wrap .memberInfo .list .middle {position: relative; margin: 0px 30px; padding-top: 20px; background-color: #FFF;}
.place-main-wrap .memberInfo .list .middle:before,
.place-main-wrap .memberInfo .list .middle:after {content: ''; position: absolute; top: 0px; display: block; width: 30px; height: 100%; background-repeat: repeat-y; background-size: 30px auto;}
.place-main-wrap .memberInfo .list .middle:before {left: -30px; background-image: url(../../static/images/business-place-bg04.png);}
.place-main-wrap .memberInfo .list .middle:after {right: -30px; background-image: url(../../static/images/business-place-bg05.png);}
.place-main-wrap .memberInfo .list .middle li {position: relative; padding: 5px 0px; padding-left: 95px; text-indent: -95px; font-size: 15px; vertical-align: top; word-break: break-all;}
.place-main-wrap .memberInfo .list .middle li span {display: inline-block; vertical-align: top; width: 95px; color: #050505; font-weight: 700; text-indent: 0;}
.place-main-wrap .memberInfo .list .middle li b {font-weight: 700; color: #02cbd3;}
.place-main-wrap .memberInfo .list .bottom {position: relative; height: 50px; margin: 0px 150px 0 30px; background: url(../../static/images/business-place-bg08.png); background-size: 5px auto;}
.place-main-wrap .memberInfo .list .bottom:before,
.place-main-wrap .memberInfo .list .bottom:after {content: ''; position: absolute; top: 0px; display: block; height: 50px; background-repeat: no-repeat;}
.place-main-wrap .memberInfo .list .bottom:before {left: -30px; width: 30px; background-image: url(../../static/images/business-place-bg06.png); background-size: 30px auto;}
.place-main-wrap .memberInfo .list .bottom:after {right: -150px; width: 150px; background-image: url(../../static/images/business-place-bg07.png); background-size: 150px auto;}
.place-main-wrap .memberInfo .list .bottom a {position: absolute; top: 9px; right: -93px; display: block; width: 56px; height: 56px; text-indent: -99999px; background: #02cbd3 url(../../static/images/icons.png) no-repeat 10px -56px; background-size: 200px auto; border-radius: 100%; box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.1); z-index: 1;}
.place-main-wrap .place-list {position: relative; border-top: 1px solid #e2e2e2;}
.place-main-wrap .place-list li {position: relative; border-bottom: 1px solid #e2e2e2;}
.place-main-wrap .place-list li:before {content: ''; position: absolute; left: 0px; top: 0px; display: block; width: 5px; height: 100%; font: 0/0 a; background-color: #02cbd3; z-index: 2;}
.place-main-wrap .place-list li a {position: relative; display: block; padding: 16px 24px; background-color: #FFF; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.place-main-wrap .place-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f5f8f8; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.place-main-wrap .place-list li a:active:before,
.place-main-wrap .place-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.place-main-wrap .place-list li a:after {content: ''; position: absolute; top: 24px; right: 24px; display: block; width: 15px; height: 15px; font-size: 0; background: url(../../static/images/icons.png) no-repeat -65px -7px; background-size: 200px auto; z-index: 2;}
.place-main-wrap .place-list li a span {position: relative; display: block; margin: 5px 0; z-index: 2;}
.place-main-wrap .place-list li a .title {color: #050505; font-weight: 500;}
.place-main-wrap .place-list li a .cont {font-size: 13px;}
.place-main-wrap .place-list li a span i {display: inline-block; vertical-align: top; margin-right: 10px;}
.place-main-wrap .place-list-no-text {position: relative; margin: 0px 0px 20px; text-align: center; font-size: 16px; font-weight: 500; color: #b2b2b2;}
.place-main-wrap .place-list-no-text:before {content: ''; display: block; width: 40px; height: 40px; margin: 0px auto 10px; background-color: #b2b2b2; background-size: 150px auto; background-repeat: no-repeat; background-image: url(../../static/images/icons.png); border-radius: 100%;}
.place-main-wrap .place-list-no-text.operator:before {background-position: 7px -43px;}
.place-main-wrap .place-list-no-text.staff {width: 270px; height: 270px; margin: 30px auto; padding-top: 50px; background-color: #FFF; border-radius: 100%;}
.place-main-wrap .place-list-no-text.staff:before {display: none;}
.place-main-wrap .place-list-no-text.staff span {display: block; position: relative; font-size: 15px; font-weight: 500; color: #b2b2b2;}
.place-main-wrap .place-list-no-text.staff .text1 {width: 130px; height: 30px; margin: 0px auto 20px; text-indent: -99999px; background: url(../../static/images/business-place-text01.png) no-repeat 0px 0px; background-size: 130px auto;}
.place-main-wrap .place-list-no-text.staff .text2 {margin-bottom: 5px;}
.place-main-wrap .place-list-no-text.staff .text2 .btn {display: inline-block; vertical-align: middle; width: 35px; height: 35px; text-indent: -99999px; background: #b2b2b2 url(../../static/images/icons.png) no-repeat 5px -82px; background-size: 150px auto; border-radius: 100%;}
.place-main-wrap .place-list-no-text.staff:after {content: ''; display: block; width: 80px; height: 70px; margin: 0 auto; font: 0/0 a; background: url(../../static/images/business-place-img01.png) no-repeat 0px 0px; background-size: 80px auto;}
.place-main-wrap .place-footer {position: fixed; left: 0px; bottom: 0px; width: 100%; height: 75px; z-index: 100;}
.place-main-wrap .place-footer:before {content: ''; position: absolute; left: 50%; top: 0px; width: 150px; height: 75px; margin-left: -75px; background: url(../../static/images/footer_bg_bar02.png) repeat-x 0px 100%; background-size: 150px auto; z-index: 1;}
.place-main-wrap .place-footer:after {content: ''; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 85px; background: linear-gradient(to bottom,  rgba(245,245,245,0) 0%,rgba(245,245,245,1) 40%); z-index: 0;}
.place-main-wrap .place-footer .footer-bg {position: absolute; left: 0px; top: 0px; width: 100%; height: 75px; overflow: hidden; z-index: 1;}
.place-main-wrap .place-footer .footer-bg span {position: relative; display: block; width: 50%; height: 75px; background: url(../../static/images/footer_bg_bar01.png) repeat-x 0px 100%; background-size: 5px auto;}
.place-main-wrap .place-footer .footer-bg span:first-child {float: left; margin-left: -75px;}
.place-main-wrap .place-footer .footer-bg span:last-child {float: right; margin-right: -75px;}
.place-main-wrap .place-footer .myInfo-wrap {position: absolute; left: 0px; bottom: 0px; width: 100%; overflow: hidden; z-index: 2;}
.place-main-wrap .place-footer .myInfo-wrap li {float: left; width: 50%; height: 44px; line-height: 44px; text-align: center;}
.place-main-wrap .place-footer .myInfo-wrap li a {display: inline-block; padding: 0 10px; font-size: 14px; color: #333;}
.place-main-wrap .place-footer .myInfo-wrap li a:active {font-size: 13px;}
.place-main-wrap .place-footer .myInfo-wrap li:first-child a {margin-right: 30px;}
.place-main-wrap .place-footer .myInfo-wrap li:last-child a {margin-left: 35px;}
.place-main-wrap .place-footer .place-register-btn {position: absolute; left: 50%; top: 2px; width: 56px; margin-left: -28px; z-index: 3;}
.place-main-wrap .place-footer .place-register-btn a {display: block; width: 56px; height: 56px; text-indent: -99999px; background: #02cbd3 url(../../static/images/icons.png) no-repeat 10px -56px; background-size: 200px auto; border-radius: 100%; box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.1);}
.place-main-wrap .place-footer .place-register-btn a:active {background-color: #00bac2;}

/*사업장 등록*/
/*.place-wrap {padding-bottom: 85px;}*/
.place-wrap .oper-title {padding: 25px 24px;}
.place-wrap .oper-title:before {content: ''; display: block; width: 35px; height: 30px; margin: 0 auto 15px; background: url(../../static/images/icons.png) no-repeat -42px -70px; background-size: 200px auto;}
.place-wrap h2 {padding: 30px 24px 20px; font-size: 18px; font-weight: 700; color: #050505;}
.place-wrap .place-info-list {padding: 0 24px 40px;}
.place-wrap .place-info-list li {margin-bottom: 8px;}
.place-wrap .place-info-list li a {position: relative; display: block; height: 96px; padding: 23px 30px; border: 1px solid #e1e1e1; border-radius: 5px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.place-wrap .place-info-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f5f8f8; border-radius: 5px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.place-wrap .place-info-list li a:active:before,
.place-wrap .place-info-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.place-wrap .place-info-list li a span {position: relative; display: block; z-index: 2;}
.place-wrap .place-info-list li a .no {font-size: 15px; font-weight: 700; color: #02cbd3; font-family: sans-serif;}
.place-wrap .place-info-list li a .title {font-size: 19px; color: #050505;}
.place-wrap .place-info-list li a .check {position: absolute; top: 50%; right: 25px; width: 44px; height: 44px; margin-top: -22px; text-indent: -99999px; background: #e2e2e2 url(../../static/images/icons.png) no-repeat -85px -58px; background-size: 200px auto; border-radius: 100%;}
.place-wrap .place-info-list li a.on {border: 1px solid #02cbd3;}
.place-wrap .place-info-list li a.on .check {background-color: #02cbd3;}
.place-wrap .input-wrap {padding-bottom: 40px;}
.place-wrap .map-api-wrap .map-api {margin: 0 24px 15px; height: 200px; background: #f5f5f5 url(../../static/images/icon_map.png) no-repeat 50% 50%; background-size: 61px auto; border: 1px solid #e5e5e5; overflow: hidden;}
.place-wrap .map-api-wrap .input-wrap {padding-bottom: 0px;}
.place-wrap .map-api-wrap .input-wrap li {margin-bottom: 0px;}
.place-wrap .authentication-wrap li {padding: 20px 24px; border-bottom: 1px solid #e5e5e5; overflow: hidden;}
.place-wrap .authentication-wrap li:first-child {border-top: 1px solid #e5e5e5;}
.place-wrap .authentication-wrap li label {display: block; float: left; margin: 0; height: 26px; line-height: 26px; font-size: 18px; color: #b2b2b2;}
.place-wrap .authentication-wrap li label.on {color: #050505;}
.place-wrap .authentication-wrap li .ui-flipswitch {float: right; margin: 0;}
.place-wrap .authentication-wrap .wifi-ip {margin-top: -1px; background-color: #FFF; height: 0; transition: 0.5s; opacity: 0;}
.place-wrap .authentication-wrap .wifi-ip.on {height: auto; padding: 18px 24px; opacity: 1;}
.place-wrap .authentication-wrap .wifi-ip .wifi-btn-wrap {text-align: center;}
.place-wrap .authentication-wrap .wifi-ip .wifi-btn-wrap a {display: inline-block; height: 40px; line-height: 40px; font-size: 14px; padding: 0 50px; border: 1px solid #e5e5e5; border-radius: 40px;}
.place-wrap .authentication-wrap .wifi-ip .ip-add {padding: 10px 0 20px; text-align: center;}
.place-wrap .authentication-wrap .wifi-ip .ip-add dt,
.place-wrap .authentication-wrap .wifi-ip .ip-add dd {display: inline-block; vertical-align: middle; margin: 0 5px; font-size: 14px;}
.place-wrap .authentication-wrap .wifi-ip .ip-add dd {font-weight: 700; color: #050505;}
.place-wrap .office-time-wrap {padding-bottom: 20px;}
.place-wrap .office-time-wrap .input-wrap {padding-bottom: 0;}
.place-wrap .office-time-wrap .text-desc {padding: 0 24px; font-size: 13px;}
.place-wrap .week-work-wrap {padding: 30px 24px 40px; overflow: hidden;}
.place-wrap .week-work-wrap label {float: left; display: block; padding: 0; margin: 0; font-size: 18px; font-weight: 700; color: #050505;}
.place-wrap .week-work-wrap .ui-flipswitch {float: right; margin: 0;}
.place-wrap .week-work-wrap .ui-flipswitch input {width: 38px; height: 26px; right: 24px;}
.place-wrap .work-desc-wrap {padding: 0 24px 40px; font-size: 14px;}
.place-wrap .work-desc-wrap dt {position: relative; padding: 0px 0px 10px 20px; color: #050505;}
.place-wrap .work-desc-wrap dt:before {content: ''; position: absolute; top: 3px; left: 0px; display: block; width: 15px; height: 15px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -94px -119px; background-size: 200px auto;}
#operator-register-2 .place-wrap {padding-bottom: 85px;}
#operator-register-4 .input-wrap .fail-text {padding-top:0;}
#operator-register-4 .place-wrap .map-api-wrap {padding-bottom:40px;}
#operator-register-4 .place-wrap .map-api-wrap .input-wrap li {margin-bottom:20px;}

.place-wrap .work-schd-wrap {padding:0 24px;margin-bottom:40px;}
.place-wrap .work-schd-wrap .item {position:relative;margin-bottom:15px;/*padding-top:20px;*/}
.place-wrap .work-schd-wrap .item .input-wrap {padding:0 0 0 50%;}
.place-wrap .work-schd-wrap .item .work-title {position: absolute;top: 6px;left: 0;width: 50%;font-size: 15px;color: #333; letter-spacing:-0.5px;}
.place-wrap .work-schd-wrap .item .view-detail {display:inline-block;width:24px;height:24px;margin:-2px 0 0 -5px;text-indent:100%;white-space:nowrap;overflow:hidden;background:url(../../static/images/icons.png) no-repeat -89px -114px;background-size: 200px auto;vertical-align:top;}
.place-wrap .work-schd-wrap .item .important {margin-top:-8px;}
.place-wrap .work-schd-wrap .item .important p {position:relative;font-size:13px;color:#f41100;}
.place-wrap .work-schd-wrap .item .important p:before {content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-right: 3px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -39px -510px; background-size: 200px auto;}
.place-wrap .work-schd-wrap .item .input-wrap li {padding-top:0;}
.place-wrap .work-schd-wrap .item .input-wrap input {padding-right:30px;font-size:15px;}
.place-wrap .work-schd-wrap .item .input-wrap input::placeholder {font-size:15px;}
.place-wrap .work-schd-wrap .item .input-wrap .break-time-set .work-title {width:100%;left:-100%;padding-right:14px;text-align:right;}
.popup-workschd .layer-content {height:auto;}
#operator-register-4 .place-wrap .map-api-wrap .input-wrap li {padding:0 0 0 50%;}
#operator-register-4 .place-wrap .map-api-wrap .input-wrap .work-title {position: absolute;top: 6px;left: 0;width: 50%;font-size: 15px;color: #333; letter-spacing:-0.5px;}
#operator-register-4 .place-wrap .map-api-wrap .input-wrap input {padding-right:30px;font-size:15px;}
#operator-register-4 .place-wrap .map-api-wrap .input-wrap input::placeholder {font-size:15px;}
#operator-register-4 .place-wrap .btn-wrap.modify a {float:left;width:50%;}

/*직원 등록*/
.place-main-wrap.staff-wrap h2 {font-size: 18px; color: #050505; font-weight: 700; background-color: #FFF;}
.place-main-wrap.staff-wrap .memberInfo .list .bottom a {background-position: 12px -107px;}
.place-wrap.staff-wrap .content-title {padding: 60px 24px;}
.place-wrap.staff-wrap .staff-title {padding: 25px 24px;}
.place-wrap.staff-wrap .staff-title:before {content: ''; display: block; width: 35px; height: 30px; margin: 0 auto 15px; background: url(../../static/images/icons.png) no-repeat -39px -119px; background-size: 200px auto;}
.place-wrap.staff-wrap .contract-wrap {position: relative; margin: 60px 10px 10px 10px;}
.place-wrap.staff-wrap .contract-wrap .contract-box {padding: 24px; margin-bottom: 10px; font-size: 11px; background-color: #FFF; box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.05);}
.place-wrap.staff-wrap .contract-wrap .contract-box .title {margin-bottom: 10px; font-size: 13px; font-weight: 700; color: #050505;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para {padding:10px 0;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para span {display:block;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para .subtit {display:block;padding-bottom:4px;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para span.bul01, .place-wrap.staff-wrap .contract-wrap .contract-box .contract-para span.bul02 {display:block;position:relative;padding-left:10px;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para span.bul01:before {content:'-';display:inline-block;width:10px;height:10px;position:absolute;left:0;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para span.bul02 {padding-left:24px;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para span.bul02:before {content:'※';display:inline-block;width:10px;height:10px;position:absolute;left:10px;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para span.bul02.no-indent {padding-left:14px;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para span.bul02.no-indent:before {left:0;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para .contract-date {padding:20px 0;text-align:center;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para .insurance {display:inline-block;margin-right:10px;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para .insurance .check {display:inline-block;width:14px;height:14px;margin-right:2px;border-radius:2px;text-indent:-99999px;vertical-align:bottom;background:#d4d4d4;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-para .insurance .check.on {background:#02cbd3 url(../../static/images/icons.png) no-repeat;background-position: -30px -21px;background-size: 70px auto;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-sign .contract-owner, .place-wrap.staff-wrap .contract-wrap .contract-box .contract-sign .contract-employee {position:relative;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-sign .contract-employee {padding-top:20px;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-sign span {display:block;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-sign .subtit {padding-bottom:4px;font-weight:500;}
.place-wrap.staff-wrap .contract-wrap .contract-box .contract-sign .sign-area {position:absolute;bottom:0;right:40px;}
.place-wrap.staff-wrap .contract-wrap .page-num {position: fixed; top: 70px; right: 20px; padding: 7px 20px; background-color: #e2e2e2; font-size: 14px; font-weight: bold; border-radius: 4px;}
#staff-register-1 {background-color: #f5f5f5;}

/*전재결재 - 근로계약서 작성*/
.work-contact-wrap {padding-bottom: 85px;}
/*#work-contact-step2 .work-contact-wrap {padding-bottom: 0px;}*/
.work-contact-wrap h2 {padding: 0px 24px 20px; font-size: 18px; font-weight: 700;}
.work-contact-week {overflow: hidden; padding: 0px 20px 20px;}
.work-contact-week li {float: left; position: relative; width: 14.28571%; box-sizing: border-box; text-align: center;}
.work-contact-week li a {display: inline-block; width: 40px; height: 40px; line-height: 40px; border: 1px solid #e2e2e2; border-radius: 100%; font-size: 14px;}
.work-contact-week li a.on {border: 1px solid #02cbd3; font-size: 15px; font-weight: bold; color: #02cbd3;}
.work-contact-time {padding: 0px 24px 5px;}
.work-contact-time .input-wrap {padding: 0 0 10px 0; font-size: 0;}
.work-contact-time .input-wrap li {display: inline-block; vertical-align: middle; padding: 0; margin: 0; font-size: 15px; color: #333;}
.work-contact-time .input-wrap .title {width: 23%; height: 40px; line-height: 40px;}
.work-contact-time .input-wrap .select-wrap {width: 34%;}
.work-contact-time .input-wrap .tilde {width: 9%; height: 40px; line-height: 40px; font-size: 22px; text-align: center;}
.work-contact-time .input-wrap .select-wrap label {display: none;}
.work-contact-time .input-wrap .select-wrap input {padding: 9px 25px 9px 0px; font-size: 15px;}
.work-contact-time .input-wrap .select-wrap input::placeholder {font-size: 15px;}
.work-contact-disc {padding: 0px 24px 5px; font-size: 13px;}

/*스케줄 관리*/
.cal_menu {position: fixed; top: 0px; left: 0; width: 100%; height: 95px; background-color: #FFF; zoom: 1; z-index: 5;}
.cal_menu:after {display: block; clear: both; content: '';}
.cal_menu li a {position: absolute; top: 25px; display: block;}
.cal_menu li .ui-input-text {position: absolute; top: 12px; left: 24px; height: 58px; line-height: 58px;}
.cal_menu li .ui-input-text:after {content: ''; position: absolute; top: 22px; right: 0px; display: block; width: 18px; height: 12px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -135px -119px; background-size: 200px auto; z-index: 0;}
.cal_menu li .btn_back_month {position: relative; width: 115px; height: 58px; padding: 0px 15px 0px 0px; line-height: 58px; font-size: 24px; font-weight: 700; color: #050505; font-family: 'Roboto'; z-index: 1;}
.cal_menu li .ico_today {right: 53px; width: 46px; height: 30px; padding: 4px 10px 0px; font-size: 14px; font-weight: 500; color: #555; border: 1px solid #AAA; border-radius: 30px;}
.cal_menu li .ico_today.off {color: #b2b2b2; border: 1px solid #d8d8d8;}
.cal_menu li .ico_today:active {font-size: 13px; background-color: #f5f8f8;}
.cal_menu li .btn_calendar_register {right: 16px; width: 30px; height: 30px; border: 1px solid #AAA; border-radius: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat 1px -254px; background-size: 200px auto;}
.cal_menu li .btn_calendar_register.off {border: 1px solid #d8d8d8; background-position: -164px -113px;}
.cal_menu li .btn_calendar_register:active {background-color: #f5f8f8; background-size: 180px auto; background-position: -146px -101px;}
.cal_menu li .schedule-modify {left: 150px; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -68px -506px; background-size: 200px auto;}
.cal_menu li .schedule-modify:active {background-position: -59px -455px; background-size: 180px auto;}
.cal_menu .week_head {position: fixed; top: 70px; left: 5px; right: 5px;}
.cal_menu .week_head ul {display: flex; align-items: center; padding: 0; background-color: #FFF;}
.cal_menu .week_head li {flex: 1; height: 25px; padding: 0; margin: 0; line-height: 25px; font-size: 12px; color: #050505; text-align: center;}
.cal_menu .week_head li.sunday {color: #f41100;}

.month_table {margin-top: 95px;}
.month_table .fullsize_cal {width: 100%; height: 300px; overflow-x: hidden; overflow-y: auto;}
.month_table .fullsize_cal .one_month {height: 100%; margin: 0 5px;}
.month_table .fullsize_cal .one_month .one_week {position: relative; height: 50px;}
.month_table .fullsize_cal .one_month .one_week ul {display: flex; align-items: flex-start; flex-wrap: wrap; height: 100%;}
.month_table .fullsize_cal .one_month .one_week ul li {position: relative; width: 14.25%; box-sizing: border-box; height: 100%; text-align: center;}
.month_table .fullsize_cal .one_month .one_week ul li:first-child .date {color:#f41100;}
.month_table .fullsize_cal .one_month .one_week ul li.other_month .date {color: #DDD;}
.month_table .fullsize_cal .one_month .one_week ul li.other_month:first-child .date {color: #fd9e97;}
.month_table .fullsize_cal .one_month .one_week ul li .date {height: 31px; line-height: 31px; font-size: 14px; color: #050505; font-family: 'Roboto'; font-weight: 500;}
.month_table .fullsize_cal .one_month .one_week ul li .date span {display: inline-block; width: 25px; height: 25px; line-height: 25px; margin: 5px 0;}
.month_table .fullsize_cal .one_month .one_week ul li.today_on span {background-color: #3c3c4a; color: #FFF; border-radius: 100%;}
.month_table .fullsize_cal .one_month .one_week ul li .date.on span {background-color: #02cbd3; color: #FFF; border-radius: 100%;}
.month_table .fullsize_cal .one_month .one_week ul li .date.pre-ck span {background-color: #e2e2e2; border-radius: 100%;}
.month_table .fullsize_cal .one_month .one_week ul li .date.pre-ck.on span {background-color: #02cbd3; color: #FFF;}
.month_table .fullsize_cal .one_month .one_week ul li .icon {position: absolute; top: 33px; left: 0; width: 100%; text-align: center; font-size: 0;}
.month_table .fullsize_cal .one_month .one_week ul li .icon span {display: inline-block; width: 4px; height: 4px; border-radius: 100%; margin: 0 1px;}
.month_table .fullsize_cal .one_month .one_week ul li .icon .ico_plan {background-color: #02cbd3;}
.month_table .fullsize_cal .one_month .one_week ul li .icon .ico_evt {background-color: #e26af0;}
.month_table .fullsize_cal .one_month .one_week ul li .icon .ico_check {background-color: #b2b2b2;}
.month_table .fullsize_cal .one_month .one_week ul li .icon .ico_request {background-color: #e54660;}

.schedule-calendar-wrap .calendar-cont-wrap {position: absolute; width: 100%; left: 0px; top: 395px; bottom: 0px; border-top: 1px solid #eaebf0; background-color: #FFF; z-index: 98; -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-overflow-scrolling: touch;}
.schedule-calendar-wrap .calendar-cont-wrap.toggle {top: 70px;}
.schedule-calendar-wrap .calendar-open-btn {position: absolute; width: 100%; left: 0px; top: 0px; text-align: center; z-index: 99;}
.schedule-calendar-wrap .calendar-open-btn a {position: relative; display: block; height: 30px; text-indent: -999999px; background-color: #fbfbfc;}
.schedule-calendar-wrap .calendar-open-btn a:after {content: ''; position: absolute; top: 6px; left: 50%; width: 32px; height: 14px; margin-left: -16px; background: url(../../static/images/icons.png) no-repeat -3px -168px; background-size: 200px auto;}
.schedule-calendar-wrap .calendar-open-btn a.toggle:after {background-position: -3px -187px;}
.schedule-calendar-wrap .calendar-cont {position: absolute; width: 100%; top: 0; left: 0px; bottom: 0px; padding: 30px 0px 60px; overflow-y: auto;}
.schedule-calendar-wrap .calendar-cont .cont-title {position: fixed; top: 12px; left: 24px; width: 195px; height: 0px; line-height: 58px; font-size: 24px; font-weight: 700; color: #050505; font-family: 'Roboto'; background-color: #FFF; -webkit-transition: all 0.4s; transition: all 0.4s; opacity: 0; overflow: hidden;}
.schedule-calendar-wrap .calendar-cont .cont-title span {position: absolute; top: 17px; right: 39px; display: block; font-size: 21px; line-height: 1; font-family: 'Noto Sans KR';}
.schedule-calendar-wrap .calendar-cont .cont-title.on {height: 58px; opacity: 1;}
.schedule-calendar-wrap .calendar-cont .cont-title .schedule-modify {position: absolute; top: 12px; right: 0px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -68px -506px; background-size: 200px auto;}
.schedule-calendar-wrap .calendar-cont .cont-title .schedule-modify:active {background-position: -59px -455px; background-size: 180px auto;}

.schedule-calendar-wrap .calendar-cont .schedule-evt {background-color: #fbfbfc; border-bottom: 1px solid #f2f3f6;}
.schedule-calendar-wrap .calendar-cont .schedule-evt li {padding: 0px 24px 20px;}
.schedule-calendar-wrap .calendar-cont .schedule-evt li a {display: block;}
.schedule-calendar-wrap .calendar-cont .schedule-evt li span {display: block; padding-left: 25px;}
.schedule-calendar-wrap .calendar-cont .schedule-evt li .title {position: relative; font-size: 15px; font-weight: 500; color: #050505;}
.schedule-calendar-wrap .calendar-cont .schedule-evt li .title:before {content: ''; position: absolute; top: 7px; left: 0px; display: block; width: 8px; height: 8px; font: 0/0 a; background-color: #e26af0; border-radius: 100%;}
.schedule-calendar-wrap .calendar-cont .schedule-evt li .time {margin-top: 3px; font-size: 13px;}

.schedule-calendar-wrap .calendar-cont .schedule-list .item {padding-top: 15px; border-top: 1px solid #f4f5f7;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item:first-child {border-top: 0 none;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .title {position: relative; height: 26px; line-height: 26px; padding: 0 24px; font-size: 13px; overflow: hidden;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .title p {display: block; overflow: hidden;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .title .tit1 {float: left; font-weight: 500;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .title .tit2 {float: right; position: relative;}
/*.schedule-calendar-wrap .calendar-cont .schedule-list .item .title .tit2:after {content: ''; position: absolute; top: 3px; right: 0px; display: block; width: 12px; height: 20px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -67px -4px; background-size: 200px auto;}*/
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member {padding: 12px 24px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li {position: relative; height: 54px; line-height: 54px; overflow: hidden;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li span {position: absolute; top: 0px; display: block; height: 54px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .photo {top: 7px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .name {left: 52px; width: 90px; font-size: 15px; color: #050505; font-weight: 500;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .name .name-overlap {position: absolute; left: -50px; bottom: 0px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time {right: 0px; font-size: 13px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time i {position: relative; display: inline-block; margin-right: 5px; padding-left: 20px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time i:before {content: ''; position: absolute; top: 50%; left: 0px; display: block; width: 18px; height: 18px; margin-top: -9px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -4px -324px; background-size: 200px auto;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time i.ico-red {padding: 0; margin: 0; text-indent: -99999px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time i.ico-red:before {position: absolute; top: 24px; left: -8px; display: block; width: 8px; height: 8px; font: 0/0 a; background: none; background-color: #e54660; border-radius: 100%; animation-name: fade; animation-duration: 0.5s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .icon {right: 0px; padding-left: 20px; font-size: 13px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .icon:before {content: ''; position: absolute; top: 50%; left: 0px; display: block; width: 18px; height: 18px; margin-top: -9px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -4px -324px; background-size: 200px auto;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-late,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-late {color: #ffc000;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-late:before,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-late:before {background-position: -35px -324px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-absent,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-absent {color: #f41100;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-absent:before,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-absent:before {background-position: -66px -324px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-overtime,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-overtime {color: #02cad2;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-overtime:before,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-overtime:before {background-position: -4px -324px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-holiday,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-holiday {color: #02cad2;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-holiday:before,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-holiday:before {background-position: -4px -324px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-vacation1,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-vacation1 {color: #8ce03b;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-vacation1:before,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-vacation1:before {background-position: -128px -324px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-vacation2,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-vacation2 {color: #8ce03b;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time .ico-vacation2:before,
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .ico-vacation2:before {background-position: -97px -324px;}

.week_table {margin-top: 95px;}
.week_table .week_cal {height: 50px; margin: 0 5px; overflow-y: hidden; overflow-x: auto;}
.week_table .week_cal .week_wrap {transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease-out; transform: translate(0, 0);}
.week_table .week_cal .one_week {float: left; height: 50px; display: flex; align-items: flex-start; flex-wrap: wrap; transform: translate(0, 0); overflow: hidden;}
.week_table .week_cal .one_week li {position: relative; width: 14.25%; box-sizing: border-box; height: 100%; text-align: center;}

.cal_menu li .schedule-date {position:relative;height:58px;margin-left:20px;}
.cal_menu li .schedule-date .ui-input-text {position:relative;display:inline-block;}
.cal_menu li .schedule-date .ui-input-text:after {content:none;}
.cal_menu li .schedule-date .back-month {display:inline-block;width:100px;height:58px;margin:0;padding:0;text-align:center;font-size: 24px; font-weight: 700; color: #050505; font-family: 'Roboto';line-height: 58px;}
.cal_menu li .schedule-date .month-btn {display:block; width: 24px; height: 24px; font: 0/0 a; background:url(../../static/images/icons.png) no-repeat; background-size: 200px auto;position:absolute;top:29px;}
.cal_menu li .schedule-date .month-btn.prev {left:0;background-position:-128px -256px;}
.cal_menu li .schedule-date .month-btn.next {left:124px;background-position:-168px -256px;}
.cal_menu li .schedule-date .month-btn:active {background-size: 180px auto;}
.cal_menu li .schedule-date .month-btn.prev:active {background-position:-116px -229px;}
.cal_menu li .schedule-date .month-btn.next:active {background-position:-148px -229px;}

.schedule-calendar-wrap .calendar-cont .schedule-header {height:50px;padding:0 16px 0 24px;position:relative;}
.schedule-calendar-wrap .calendar-cont .schedule-header:after {content:'';display:block;clear:both;}
.schedule-calendar-wrap .calendar-cont .schedule-header ul {float:right;}
.schedule-calendar-wrap .calendar-cont .schedule-header ul li {float:left;}
.schedule-calendar-wrap .calendar-cont .schedule-header h4 {position:absolute;top:24px;left:24px;display:block;height:24px;opacity:1;transition:all 0.4s ease;}
.schedule-calendar-wrap .calendar-cont .schedule-header h4 span {display:inline-block;font-size:17px;font-weight:700;vertical-align:top;}
.schedule-calendar-wrap .calendar-cont .schedule-header h4 span i {font-family: 'Roboto';font-size:18px;font-weight:700;}
.schedule-calendar-wrap .calendar-cont .schedule-header h4 .schedule-modify {display:inline-block;width: 30px; height: 30px; margin: -4px 0 0 4px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(../../static/images/icons.png) no-repeat -68px -506px; background-size: 200px auto;}
.schedule-calendar-wrap .calendar-cont .schedule-header h4 .schedule-modify:active {background-position: -59px -455px; background-size: 180px auto;}
.schedule-calendar-wrap .calendar-cont .schedule-header .schedule-group-btn {display:inline-block;width:50px;height:24px;margin:24px 10px 0 0;border:1px solid #e2e2e2;border-radius:12px;font-size:12px;color:#555;text-align:center;line-height:22px;background-color:#fff;transition:all 0.3s ease;}
.schedule-calendar-wrap .calendar-cont .schedule-header .schedule-group-btn.active {border-color:#02cbd3;color:#02cbd3;}
.schedule-calendar-wrap .calendar-cont .schedule-header .ui-input-text {display:inline-block;height: 24px;margin-top:24px;}
.schedule-calendar-wrap .calendar-cont .schedule-header .ui-input-text:after {content: ''; position: absolute; top: 0; right: 0px; display: block; width: 24px; height: 24px; font: 0/0 a; background:url(../../static/images/icons.png) no-repeat -22px 1px; background-size: 160px auto; z-index: 0;}
.schedule-calendar-wrap .calendar-cont .schedule-header .ui-input-text input {width:50px;min-height:24px;padding:0 24px 0 0;font-size:13px;color:#050505;}
.calendar-cont-wrap.toggle .calendar-cont .schedule-header h4 {left:-100px;opacity:0.0;}
.sch-group-wrap, .sch-nogroup-wrap.close {display:none;}
.sch-nogroup-wrap, .sch-group-wrap.open {display:block;}

/* 투썸 : 캘린더 추가 */
.sch-nodata-wrap {padding:20px 0;margin-top:20px;background-color:#d1ede7;text-align:center;}
.sch-nodata-wrap p {font-size:15px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li.my-schedule {background-color:#d1ede7;overflow:visible;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li.my-schedule:before {content:'';display:block;width:24px;height:54px;background-color:#d1ede7;position:absolute;left:-24px;top:0;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li.my-schedule:after {content:'';display:block;width:24px;height:54px;background-color:#d1ede7;position:absolute;right:-24px;top:0;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li.my-schedule.no-schedule {text-align:center;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li.my-schedule.no-schedule p {font-size:15px;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .name {width:auto /*100px*/;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .name .position {display:inline-block;min-width:32px;height:16px;padding:0 3px;margin:-2px 0 2px 6px;border-radius:3px;background-color:#02cbd3;font-size:10px;font-weight:700;color:#fff;line-height:16px;text-align:center;vertical-align:middle;box-sizing:border-box;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em[class^="i-"] {display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;text-indent:100%;white-space:nowrap;overflow:hidden;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em.i-work {background-color:#02cbd3;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em.i-request {background-color:#e54660;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em.i-pre-ck {background-color:#b2b2b2;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time.request {color:#e54660;text-decoration:underline;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em[class^="label-"] {display:inline-block;width:34px;height:14px;margin:-1px 6px 1px 0;border:1px solid #e2e2e2;border-radius:3px;font-size:10px;font-weight:700;color:#bbb;line-height:12px;text-align:center;vertical-align:middle;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em.label-dayoff-work {border-color:#6ae2b7;color:#6ae2b7;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em.label-other-work {border-color:#ffc054;color:#ffc054;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em.label-vacation-half {border-color:#b2b2b2;color:#555;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em.vacation {display:inline-block;width:162px;height:14px;border:1px solid #b2b2b2;border-radius:3px;background-color:#f5f5f5;font-size:10px;color:#555;line-height:12px;text-align:center;vertical-align:middle;}
.schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .time em.vacation u {font-weight:700;text-decoration:none;margin-right:4px;}

/*주요일정 등록*/
.schedule-register-wrap {padding-bottom: 85px;}
.schedule-register-wrap .schedule-register-list {padding-top: 15px;}
.schedule-register-wrap .schedule-register-list .item {position: relative; margin: 0 24px; border-bottom: 1px solid #f0f0f0;}
.schedule-register-wrap .schedule-register-list .item3 label,
.schedule-register-wrap .schedule-register-list .item4 label,
.schedule-register-wrap .schedule-register-list .item .line-focus {display: none;}
.schedule-register-wrap .schedule-register-list .item .line {display: none;}
.schedule-register-wrap .schedule-register-list .item .input-wrap {padding: 0;}
.schedule-register-wrap .schedule-register-list .item .input-wrap li {height: 61px; padding: 0px; margin: 0; text-align: right;}
.schedule-register-wrap .schedule-register-list .item .input-wrap li label {height: 60px; line-height: 60px; opacity: 1; font-size: 15px; font-weight: 500; color: #050505;}
.schedule-register-wrap .schedule-register-list .item .input-wrap li .ui-input-text {display: inline-block; height: 60px; padding: 9px 0px;}
.schedule-register-wrap .schedule-register-list .item .input-wrap li .ui-input-text input {display: inline-block; width: 100px; padding: 10px 0; font-size: 15px; color: #555; text-align: right;}
.schedule-register-wrap .schedule-register-list .item .input-wrap li.time .ui-input-text input {width: 80px;}
.schedule-register-wrap .schedule-register-list .item .time-select {-webkit-transition: all 0.4s; transition: all 0.4s;}
.schedule-register-wrap .schedule-register-list .item .time-select.off {right: -80px; -webkit-transition: all 0.4s; transition: all 0.4s;}
/* .schedule-register-wrap .schedule-register-list .item .time-select.off {right: -100px; -webkit-transition: all 0.4s; transition: all 0.4s;} */
.schedule-register-wrap .schedule-register-list .item .time.off {display: none;}

.schedule-register-wrap .schedule-register-list .item1 {margin-bottom: 15px; border-bottom: 0;}
.schedule-register-wrap .schedule-register-list .item1 .line-focus {display: block;}
.schedule-register-wrap .schedule-register-list .item1 .input-wrap li {text-align: left;}
.schedule-register-wrap .schedule-register-list .item1 .input-wrap li .ui-input-text {display: block;}
.schedule-register-wrap .schedule-register-list .item1 .input-wrap li .ui-input-text input {width: 100%; padding-right: 30px; text-align: left; font-size: 18px; color: #050505;}
.schedule-register-wrap .schedule-register-list .item1 .input-wrap li label {top: -10px; height: auto; line-height: inherit; font-size: 14px; font-weight: 400; opacity: 0; z-index: 1;}
.schedule-register-wrap .schedule-register-list .item1 .input-wrap li label.on,
.schedule-register-wrap .schedule-register-list .item1 .input-wrap li label.view {opacity: 1;}
.schedule-register-wrap .schedule-register-list .item1 .line {display: block;}
.schedule-register-wrap .schedule-register-list .item1 .input-icon-wrap {top: 18px; right: -5px;}

.schedule-register-wrap .schedule-register-list .item2 {border-bottom: 0;}
.schedule-register-wrap .schedule-register-list .item2 .ui-flipswitch.ui-flipswitch-active {background-color: #e26af0;}
.schedule-register-wrap .schedule-register-list .item2 .ui-flipswitch {float: right; margin: 17px 0; position: relative;}
.schedule-register-wrap .schedule-register-list .item2 .ui-flipswitch input {right: 0px; width: 38px; height: 26px;}

.schedule-register-wrap .schedule-register-list .item3,
.schedule-register-wrap .schedule-register-list .item4 {height: 42px; overflow: hidden;}
.schedule-register-wrap .schedule-register-list .item3 .title,
.schedule-register-wrap .schedule-register-list .item4 .title {position: absolute; left: 0px; top: 0px; height: 42px; line-height: 42px; font-size: 15px; font-weight: 500; color: #050505;}
.schedule-register-wrap .schedule-register-list .item3 .input-wrap,
.schedule-register-wrap .schedule-register-list .item4 .input-wrap {position: absolute; right: 0; top: 0; width: 180px; overflow: hidden;}
.schedule-register-wrap .schedule-register-list .item3 .input-wrap li,
.schedule-register-wrap .schedule-register-list .item4 .input-wrap li {float: left; height: 40px;}
.schedule-register-wrap .schedule-register-list .item3 .input-wrap li .ui-input-text,
.schedule-register-wrap .schedule-register-list .item4 .input-wrap li .ui-input-text {height: 40px; padding: 0;}
.schedule-register-wrap .schedule-register-list .item3 .input-wrap li .ui-input-text input,
.schedule-register-wrap .schedule-register-list .item4 .input-wrap li .ui-input-text input {position: relative; z-index: 1;}
.schedule-register-wrap .schedule-register-list .item3 .input-wrap .time .ui-input-text:after,
.schedule-register-wrap .schedule-register-list .item4 .input-wrap .time .ui-input-text:after {content: ':'; position: absolute; top: 8px; right: 17px; display: block; z-index: 0;}
.schedule-register-wrap .schedule-register-list .item3 {border-bottom: 0;}
.schedule-register-wrap .schedule-register-list .item4 {height: 50px;}
.schedule-register-wrap .btn-wrap.modify {font-size: 0;}
.schedule-register-wrap .btn-wrap.modify a {display: inline-block; width: 50%;}

/* 수정 : 20210820 */
.schedule-register-wrap .schedule-register-list .item3 .input-wrap,
.schedule-register-wrap .schedule-register-list .item4 .input-wrap {width: 180px;}
.schedule-register-wrap .schedule-register-list .item .input-wrap li.time .ui-input-text input {width: 80px;}
.schedule-register-wrap .schedule-register-list .item .time-select.off {right: -80px;}

/*근무 스케줄 등록*/
.work-register-wrap {padding-top: 30px;}
.work-register-wrap .work-group {position: relative; margin: 0 24px 30px;}
.work-register-wrap .work-group h2 {margin-bottom: 10px; font-size: 18px; font-weight: 700; color: #050505;}
.work-register-wrap .work-group.group1 .schedule-work-select .ui-input-text:after {content: ''; position: absolute; top: 15px; right: 0px; display: block; width: 20px; height: 15px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -35px -10px; background-size: 200px auto; z-index: 0;}
.work-register-wrap .work-group.group1 .schedule-work-select.disable .ui-input-text:after {display: none;}
.work-register-wrap .work-group.group1 .schedule-work-select input {position: relative; padding-right: 30px; z-index: 1; font-size: 18px; color: #050505;}
.work-register-wrap .work-group.group1 .schedule-work-select input:disabled {color: #050505;}
.work-register-wrap .work-group.group1 .schedule-work-select .line {height: 1px; background-color: #e2e2e2;}
.work-register-wrap .work-group.group1 .schedule-work-select.disable .line {display: none;}
.work-register-wrap .work-group.group1 .schedule-work-copy {margin-top: 10px;}
.work-register-wrap .work-group.group1 .schedule-work-copy.off {display: none;}
.work-register-wrap .work-group.group1 .schedule-work-copy input {left: 4px; top: 15px; background-color: transparent;}
.work-register-wrap .work-group.group1 .schedule-work-copy label {padding: 5px 30px 5px 37px; font-size: 15px;position: relative;}
.work-register-wrap .work-group.group1 .schedule-work-copy label.ui-btn.ui-checkbox-off:after,
.work-register-wrap .work-group.group1 .schedule-work-copy label.ui-btn.ui-checkbox-on:after {width: 25px; height: 25px; left: 0; top: 11px; border-radius: 25px; background: url(../../static/images/icons.png) no-repeat; background-size: 200px auto; z-index: 2;}
.work-register-wrap .work-group.group1 .schedule-work-copy label.ui-btn.ui-checkbox-off:after {border: 1px solid #CCC; background-color: #FFF; background-position: -61px -33px;}
.work-register-wrap .work-group.group1 .schedule-work-copy label.ui-btn.ui-checkbox-on:after {border: none; background-color: #02cbd3; background-position: -32px -33px;}
.work-register-wrap .work-group.group2 .week-wrap {overflow: hidden; margin: 0px 0px 10px 1px;}
.work-register-wrap .work-group.group2 .week-wrap li {float: left; width: 14.28571%;}
.work-register-wrap .work-group.group2 .week-wrap li a {position: relative; display: block; height: 50px; line-height: 50px; margin-left: -1px; font-size: 15px; text-align: center; border: 1px solid #e2e2e2;}
.work-register-wrap .work-group.group2 .week-wrap li:first-child a {margin-left: 0px; border-radius: 4px 0px 0px 4px;}
.work-register-wrap .work-group.group2 .week-wrap li:last-child a {border-radius: 0px 4px 4px 0px;}
.work-register-wrap .work-group.group2 .week-wrap li.disabled a {color: #b2b2b2; background-color: #f4f4f4;}
.work-register-wrap .work-group.group2 .week-wrap li.on a:after {content: ''; position: absolute; left: 50%; bottom: 7px; display: block; width: 4px; height: 4px; margin-left: -2px; font: 0/0 a; background-color: #02cbd3; border-radius: 100%;}
.work-register-wrap .work-group.group2 .week-wrap li.active a {color: #FFF; font-weight: 700; background-color: #02cbd3; border: 0 none;}
.work-register-wrap .work-group.group2 .week-wrap li.active.on a:after {content:'';background-color:#fff;}
.work-register-wrap .work-group.group2 .tab-wrap .tab-menu {overflow: hidden; margin-bottom: 10px;}
.work-register-wrap .work-group.group2 .tab-wrap .tab-menu li {float: left; width: 50%; text-align: center;}
.work-register-wrap .work-group.group2 .tab-wrap .tab-menu li a {display: inline-block; padding: 10px 20px; font-size: 15px;}
.work-register-wrap .work-group.group2 .tab-wrap .tab-menu li a:before {content: ''; display: inline-block; vertical-align: top; width: 22px; height: 22px; margin-right: 7px; font: 0/0 a; border-radius: 100%; background: #eaebf0 url(../../static/images/icons.png) no-repeat -33px -34px; background-size: 200px auto;}
.work-register-wrap .work-group.group2 .tab-wrap .tab-menu li a.on {color: #050505; font-weight: 700;}
.work-register-wrap .work-group.group2 .tab-wrap .tab-menu li a.on:before {background-color: #02cbd3;}
.work-register-wrap .work-group.group2 .tab-wrap .tab-cont .content {display: none;}
.work-register-wrap .work-group.group2 .tab-wrap .tab-cont .content.on {display: block;}
.work-register-wrap .work-group.group2 .tab-wrap .tab-cont .content .rest-text {margin-top: 20px; text-align: center; font-size: 15px;}
.work-register-wrap .work-group.group2 .work-group-select-btn {display: block; height: 45px; line-height: 42px; margin-top: 20px; font-size: 14px; font-weight: 700; color: #02cbd3; text-align: center; border: 2px solid #02cbd3; border-radius: 45px;}
.work-register-wrap .work-group.group2 .work-group-select-btn span {font-size: 22px; vertical-align: -3px; margin-right: 5px;}
.work-register-wrap .work-group.group2 .member-work-wrap {margin-top: 40px;}
.work-register-wrap .work-group.group2 .member-work-wrap .item  {margin-top: 40px;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head {overflow: hidden; margin-bottom: 15px;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head p {position: relative; height: 30px; line-height: 30px; font-size: 15px; font-weight: 700; color: #050505;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head p a {position: absolute; top: 50%; display: block; width: 18px; height: 18px; margin-top: -9px; border-radius: 100%;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head .title {float: left; padding-left: 27px;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head .title a {left: 0px; background-color: #555; text-indent: -99999px;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head .title a:before {content: ''; position: absolute; top: 8px; left: 4px; display: block; width: 10px; height: 2px; font: 0/0 a; background-color: #FFF;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head .mem {float: right; text-align: right; padding-right: 30px;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head .mem a {right: 0px; text-indent: 99999px; border: 2px solid #555;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head .mem a:before,
.work-register-wrap .work-group.group2 .member-work-wrap .item .head .mem a:after {content: ''; position: absolute; display: block; font: 0/0 a; background-color: #555;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head .mem a:before {top: 6px; left: 2px; width: 10px; height: 2px;}
.work-register-wrap .work-group.group2 .member-work-wrap .item .head .mem a:after {top: 2px; left: 6px; width: 2px; height: 10px;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li {position: relative; height: 54px; line-height: 54px; overflow: hidden;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li > div {position: absolute; top: 0px; height: 54px;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .photo {top: 7px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .name {left: 50px; font-size: 15px; color: #050505; font-weight: 500;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .name .name-overlap {position: absolute; left: -50px; bottom: 0px;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time {right: 0; text-align: right;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time > div {display: inline-block;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time .select .ui-input-text {width: 70px;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time .select .ui-input-text:after {content: ':'; position: absolute; top: 0px; right: 17px; display: block; z-index: 0; line-height: normal; font-size: 15px;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time .select input {position: relative; min-height: 24px; padding: 0; font-size: 15px; text-align: center; border-bottom: 1px solid #555; z-index: 1;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .delete {position: absolute; top: 5px; left: 24px; width: 17px; height: 17px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -134px -219px; background-size: 200px auto;}

.work-register-wrap .work-group.group2 .member-work-wrap .item .head .title span:only-child {display:inline-block;margin-left:-27px;}
#schedule-work-register-1 .schedule-register-wrap .btn-wrap {position:fixed;}

/* 투썸 : 근무 스케줄 추가 */
.work-register-wrap .work-group.group2 .member-work-wrap .member li {margin-bottom:1px;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li.nomodify {background-color:#f5f5f5;overflow:visible;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li.nomodify:before {content:'';display:block;width:24px;height:54px;background-color:#f5f5f5;position:absolute;left:-24px;top:0;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li.nomodify:after {content:'';display:block;width:24px;height:54px;background-color:#f5f5f5;position:absolute;right:-24px;top:0;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .name .position {display:inline-block;min-width:32px;height:16px;padding:0 3px;margin:-2px 0 2px 6px;border-radius:3px;background-color:#02cbd3;font-size:10px;font-weight:700;color:#fff;line-height:16px;text-align:center;vertical-align:middle;box-sizing:border-box;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em[class^="i-"] {display:inline-block;width:8px;height:8px;margin:-2px 3px 2px 0;border-radius:50%;text-indent:100%;white-space:nowrap;overflow:hidden;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em.i-work {background-color:#02cbd3;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em.i-request {background-color:#e54660;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time.request {color:#e54660;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em[class^="label-"] {display:inline-block;width:38px;height:14px;margin:-2px 2px 2px 0;border:1px solid #e2e2e2;border-radius:3px;font-size:10px;font-weight:700;color:#bbb;line-height:12px;letter-spacing:-1px;text-align:center;vertical-align:middle;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em.label-dayoff-work {border-color:#6ae2b7;color:#6ae2b7;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em.label-other-work {border-color:#ffc054;color:#ffc054;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em.label-vacation-half {border-color:#b2b2b2;color:#555;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em.label-subst-work {border-color:#79d0f7;color:#5cb9e2;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em.vacation {display:inline-block;width:183px;height:14px;margin:-2px 0 2px;border:1px solid #b2b2b2;border-radius:3px;background-color:#f5f5f5;font-size:10px;color:#555;line-height:12px;text-align:center;vertical-align:middle;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time em.vacation u {font-weight:700;text-decoration:none;margin-right:4px;}
.work-register-wrap .work-group.group2 .member-work-wrap .member li .time .view-detail  {display:inline-block;width:24px;height:24px;margin-right:-3px;text-indent:100%;white-space:nowrap;overflow:hidden;background:url(../../static/images/icons.png) no-repeat -35px -506px;background-size: 200px auto;vertical-align:middle;}
.work-register-wrap .work-group.group2 .member-work-wrap.tt-member .member li .time > div {font-size:14px;}
.work-register-wrap .work-group.group2 .member-work-wrap.tt-member .member li .time .select .ui-input-text {width:63px;}
.work-register-wrap .work-group.group2 .member-work-wrap.tt-member .member li .time .select .ui-input-text input {font-size:14px;letter-spacing:-0.8px;}
.work-register-wrap .work-group.group2 .member-work-wrap.tt-member .member li .time .select .ui-input-text:after {right:15px;}

#work-schedule-error .layer-content .work-member-list .member-list li div .name,
#work-register-member .layer-content .work-member-list .member-list li a .name,
#work-register-member2 .layer-content .work-member-list .member-list li a .name {max-width:120px !important;}
#work-schedule-error .layer-content .work-member-list .member-list li div .name .position,
#work-register-member .layer-content .work-member-list .member-list li a .name .position,
#work-register-member2 .layer-content .work-member-list .member-list li a .name .position {display:inline-block;min-width:32px;height:16px;padding:0 3px;margin-left:7px;border-radius:3px;background-color:#02cbd3;font-size:10px;font-weight:700;color:#fff;line-height:16px;text-align:center;box-sizing:border-box;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .name .position {display:inline-block;min-width:32px;height:16px;padding:0 3px;margin-left:7px;border-radius:3px;background-color:#02cbd3;font-size:10px;font-weight:700;color:#fff;line-height:16px;text-align:center;box-sizing:border-box;}
#work-register-group1 .group-time-list {position:relative;margin-bottom:40px;}
#work-register-group1 .group-time-list h3 {display:inline-block;height:54px;line-height:54px;margin:0 !important;}
#work-register-group1 .group-time-list p {margin-top:8px;}
#work-register-group1 .group-time-list .time {position:absolute;right:0;top:0px;height:54px;line-height:54px;text-align:right;}
#work-register-group1 .group-time-list .time > div {display:inline-block;}
#work-register-group1 .group-time-list .time .select .ui-input-text,
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member.tt-member .member li .time .select .ui-input-text {width: 68px;}
#work-register-group1 .group-time-list .time .select .ui-input-text:after,
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member.tt-member .member li .time .select .ui-input-text:after {content: ':'; position: absolute; top: 0px; right: 17px; display: block; z-index: 0; line-height: normal; font-size: 15px;}
#work-register-group1 .group-time-list .time .select input,
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member.tt-member .member li .time .select .ui-input-text input {position: relative; min-height: 24px; padding: 0; font-size: 14px; text-align: center; border-bottom: 1px solid #555; z-index: 1;}

/*출퇴근 관리*/
.office-time-wrap  {padding-bottom: 85px;}
.office-time-wrap .office-time-header {position: fixed; width: 100%; background-color: #FFF; z-index: 10;}
.office-time-wrap .office-time-header .input-wrap {height: 80px; padding: 11px 24px;}
.office-time-wrap .office-time-header .input-wrap li {display: inline-block; padding: 0; margin: 0;}
.office-time-wrap .office-time-header .input-wrap li.head-name {height: 58px; line-height: 58px; padding-right: 10px; font-size: 20px; font-weight: 700; color: #050505;}
.office-time-wrap .office-time-header .input-wrap li.head-name .position {display:inline-block;min-width:40px;height:18px;padding:0 3px;margin:0px 0 0px 4px;border-radius:3px;background-color:#02cbd3;font-size:11px;font-weight:700;color:#fff;line-height:18px;text-align:center;vertical-align:middle;box-sizing:border-box;}
.office-time-wrap .office-time-header .input-wrap li .ui-input-text:after {content: ''; position: absolute; top: 24px; right: 0px; display: block; width: 18px; height: 12px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -135px -119px; background-size: 200px auto; z-index: 0;}
.office-time-wrap .office-time-header .input-wrap li .ui-input-text input {position: relative; width: 125px; height: 58px; line-height: 58px; padding: 0px; font-size: 20px; color: #050505; font-family: 'Roboto'; font-weight: 700; z-index: 1;}
.office-time-wrap .office-time-header .btn-close {position: absolute; top: 23px; right: 16px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -131px -63px; background-size: 200px auto;}
.office-time-wrap .office-time-header .btn-close:active {background-size: 180px auto; background-position: -116px -56px;}

.office-time-wrap .office-time-content {position: relative; padding-top: 80px;}
.office-time-wrap .office-time-content .tab-menu {position: relative; overflow: hidden; background-color: #FFF; z-index: 1;}
.office-time-wrap .office-time-content .tab-menu li {float: left; width: 50%; text-align: center; border-bottom: 1px solid #eaebf0;}
.office-time-wrap .office-time-content .tab-menu li  a {position: relative; display: inline-block; height: 40px; padding: 0px 5px; line-height: 35px; font-size: 15px; color: #b2b2b2;}
.office-time-wrap .office-time-content .tab-menu li  a:active {font-size: 14px;}
.office-time-wrap .office-time-content .tab-menu li  a.on {font-weight: 700; color: #050505;}
.office-time-wrap .office-time-content .tab-menu li  a.on:after {content: ''; position: absolute; left: 0; bottom: 0; display: block; height: 3px; font: 0/0 a; background-color: #02cbd3; border-radius: 3px; animation-name: widthSlide; animation-delay: 0.1s; animation-duration: 0.5s; animation-fill-mode: both;}
.office-time-wrap .office-time-content .tab-cont .content {display: none;}
.office-time-wrap .office-time-content .tab-cont .content.on {display: block;}

.office-time-wrap .office-time-content .calendar-week-wrap {padding-top: 15px; border-bottom: 1px solid #eaebf0;}
.office-time-wrap .office-time-content .calendar-week-wrap .cal_menu {position: relative; height: auto;}
.office-time-wrap .office-time-content .calendar-week-wrap .cal_menu .week_head {position: relative; top: inherit; left: inherit; right: inherit; margin: 0 5px;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table {height: 50px; margin: 0; overflow: hidden;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .week_cal {height: 60px;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .one_week li .date {height: 31px; line-height: 31px; font-size: 14px; color: #050505; font-family: 'Roboto'; font-weight: 500;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .one_week li .date span {display: inline-block; width: 25px; height: 25px; line-height: 25px; margin: 5px 0;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .one_week .today_on .date span {background-color: #3c3c4a; color: #FFF; border-radius: 100%;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .one_week li .date.on span {background-color: #02cbd3; color: #FFF; border-radius: 100%;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .one_week li .icon {position: absolute; top: 33px; left: 0; width: 100%; text-align: center; font-size: 0;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .one_week li .icon span {display: inline-block; width: 4px; height: 4px; border-radius: 100%; margin: 0 1px;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .one_week li .icon .ico_plan {background-color: #3a3a8e;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .one_week li .icon .ico_plan2 {background-color: #79d0f7;}
.office-time-wrap .office-time-content .calendar-week-wrap .week_table .one_week li .icon .ico_evt {background-color: #e26af0;}

.time-night-rest .layer-content {height: 90%; border-radius: 15px 15px 0px 0px;}
.time-night-rest .layer-content .work-group-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 1;}
.time-night-rest .layer-content .work-group-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
.time-night-rest .layer-content .work-group-header a {position: absolute; top: 14px; display: block;}
.time-night-rest .layer-content .cont-scroll {position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;}
.time-night-rest .layer-content .work-group-header .btn-confirm {left: auto; right: 10px; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -39px -252px; background-size: 200px auto;}
.time-night-rest .layer-content .work-group-header .btn-confirm:active {background-size: 180px auto; background-position: -34px -225px;}
.time-night-rest .layer-content .work-group-header .cancel-btn {left: 6px; width: auto; height: auto; padding: 5px 10px; font-size: 14px; font-weight: 500; color: #333; text-indent: inherit; background: none;}
.time-night-rest .layer-content .work-group-header .cancel-btn:active {font-size: 13px;}
.time-night-rest .layer-content .work-member-list {margin: 70px 24px 60px;}
.time-night-rest .member-list > li {position:relative;height:90px;}
.time-night-rest .member-list > li > div {position: absolute; top: 10px; display: block;}
.time-night-rest .member-list .photo {left: 0px; width: 40px; height: 40px; border-radius: 100%; border: 1px solid #eaebf0; background-color: #f2f2f3; overflow: hidden;}
.time-night-rest .member-list .name {left: 50px; width: 70px; height: 40px; line-height: 40px; font-size: 15px; font-weight: 500; color: #050505;}
.time-night-rest .member-list .name .name-overlap {position: absolute; left: -50px; bottom: -5px;}
.time-night-rest .member-list .time {right: 0; top: 20px; font-size: 15px; color: #333; text-align: right;}
.time-night-rest .member-list .time > div {display: inline-block;}
.time-night-rest .member-list .input-wrap {position:absolute;right:0;top:42px;padding-left:50%;width:100%;}
.time-night-rest .member-list .input-wrap li {padding: 0; margin: 0;}
.time-night-rest .member-list .input-wrap .resttime {width: 100%; text-align: right;}
.time-night-rest .member-list .input-wrap .resttime label {display: inline-block; position: relative; opacity: 1; font-size: 15px; color: #333;}
.time-night-rest .member-list .input-wrap .resttime input {width: 75px; padding: 0; font-size: 15px; color: #333; text-align: right;}
.time-night-rest .member-list .input-wrap .resttime .ui-input-text {display: inline-block; width: 75px;}
.time-night-rest .member-list .input-wrap .resttime .ui-input-text:before {display: none;}
.time-night-rest .member-list .input-wrap .resttime .line {position: absolute; right: 0px; bottom: 0px; width: 70px;}

.office-time-content .time-info-all {padding: 20px 16px 0px; border-bottom: 1px solid #eaebf0; background-color: #f5f5f5; overflow: hidden;}
.office-time-content .time-info-all .office-work-day {margin: 0px 8px 15px; overflow: hidden;}
.office-time-content .time-info-all .office-work-day li:first-child {float: left;}
.office-time-content .time-info-all .office-work-day li {float: right; font-size: 15px;}
.office-time-content .time-info-all .office-work-day li span {font-weight: 500; color: #050505;}

.office-time-content .time-info-all .office-work-time {margin: 0px 0px 5px; padding: 0px 8px; overflow: hidden; background-color: #e9e9e9; border-radius: 10px;}
.office-time-content .time-info-all .office-work-time li {float: left; width: 50%; padding: 17px 0px 15px 10%;}
.office-time-content .time-info-all .office-work-time li p {color: #FFF; font-size: 13px; font-weight: 500;}
.office-time-content .time-info-all .office-work-time li .title:before {content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-right: 5px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -3px -549px; background-size: 200px auto;}
.office-time-content .time-info-all .office-work-time li .time {font-size: 20px; font-weight: 700;}
.office-time-content .time-info-all .office-work-time.st1 {background-color: #02cbd3;}
.office-time-content .time-info-all .office-work-time.st2 {background-color: #2a2a6a; margin-bottom: 15px;}
.office-time-content .time-info-all .office-work-time.st2 li {width: 33.3333%; padding: 13px 0px 10px 5%;}
.office-time-content .time-info-all .office-work-time.st2 li .time {font-size: 15px;}
.office-time-content .time-info-all .office-work-time.st1 .step1 .title:before {background-position: -3px -294px;}
.office-time-content .time-info-all .office-work-time.st1 .step2 .title:before {background-position: -35px -294px;}
.office-time-content .time-info-all .office-work-time.st2 .step1 .title:before {background-position: -68px -294px;}
.office-time-content .time-info-all .office-work-time.st2 .step2 .title:before {background-position: -100px -294px;}

.office-time-content .time-info-all .office-time-icons {position: relative; padding-bottom: 20px; font-size: 0; text-align: center;}
.office-time-content .time-info-all .office-time-icons:after {content: ''; position: absolute; left: -20px; bottom: 0; display: block; width: 200%; height: 1px; font: 0/0 a; background-color: #eaebf0;}
.office-time-content .time-info-all .office-time-icons li {position: relative; display: inline-block; vertical-align: middle; padding-left: 12px; font-size: 13px;}
.office-time-content .time-info-all .office-time-icons li span {display: inline-block; vertical-align: -1px; font-size: 15px;}
.office-time-content .time-info-all .office-time-icons li:before {content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-right: 1px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -3px -324px; background-size: 200px auto;}
.office-time-content .time-info-all .office-time-icons .step1 {padding-left: 0px; padding-right: 12px;}
.office-time-content .time-info-all .office-time-icons .step1:after {content: ''; position: absolute; top: 5px; right: -1px; display: block; width: 1px; height: 10px; background-color: #b2b2b2; font: 0/0 a;}
.office-time-content .time-info-all .office-time-icons .step1:before {background-position: -3px -324px;}
.office-time-content .time-info-all .office-time-icons .step2:before {background-position: -35px -324px;}
.office-time-content .time-info-all .office-time-icons .step3:before {background-position: -66px -324px;}
.office-time-content .time-info-all .office-time-icons .step4:before {background-position: -96px -324px;}

.office-time-content .time-info-all .office-time-graph {position: relative; min-height: 30px; padding: 20px 0px; margin: 0 8px; overflow: hidden;}
.office-time-content .time-info-all .office-time-graph .graph-list {width: 100%;}
.office-time-content .time-info-all .office-time-graph .graph-list li {position: relative; height: 30px;}
.office-time-content .time-info-all .office-time-graph .graph-list li .date,
.office-time-content .time-info-all .office-time-graph .graph-list li .time {position: absolute; top: 0; height: 30px; line-height: 30px; font-size: 13px;}
.office-time-content .time-info-all .office-time-graph .graph-list li .date {left: 0; width: 85px;}
.office-time-content .time-info-all .office-time-graph .graph-list li .time {right: 0; width: 60px; text-align: right; color: #02cbd3;}
.office-time-content .time-info-all .office-time-graph .graph-list li .bar {position: relative; height: 30px; padding: 0px; margin: 0px 60px 0px 85px;}
.office-time-content .time-info-all .office-time-graph .graph-list li .bar span {position: absolute; top: 12px; left: 0px; display: block; width: 100%; height: 6px; font: 0/0 a; background-color: #dadada; border-radius: 6px;}
.office-time-content .time-info-all .office-time-graph .graph-list li .bar .basic {z-index: 0;}
.office-time-content .time-info-all .office-time-graph .graph-list li .bar .active {z-index: 1; animation-name: graphBar; animation-duration: 0.5s; animation-fill-mode: both; background-color: #02cbd3;}
.office-time-content .time-info-all .office-time-graph .graph-list .item1 .bar .active {animation-delay: 0.7s;}
.office-time-content .time-info-all .office-time-graph .graph-list .item2 .bar .active {animation-delay: 1.0s;}
.office-time-content .time-info-all .office-time-graph .graph-list .item3 .bar .active {animation-delay: 1.3s;}
.office-time-content .time-info-all .office-time-graph .graph-list .item4 .bar .active {animation-delay: 1.6s;}
.office-time-content .time-info-all .office-time-graph .graph-list .item5 .bar .active {animation-delay: 1.9s;}
.office-time-content .time-info-all .office-time-graph .graph-list .item6 .bar .active {animation-delay: 2.2s;}
.office-time-content .time-info-all .office-time-graph .graph-list li.overtime .time {color: #f41100;}
.office-time-content .time-info-all .office-time-graph .graph-list li.overtime .bar .active {background-color: #f41100;}

.office-time-content .time-info-all .office-staff-select {position: relative; text-align: right;}
.office-time-content .time-info-all .office-staff-select .ui-input-text {position: relative; display: inline-block; background: none;}
.office-time-content .time-info-all .office-staff-select .ui-input-text:after {content: ''; position: absolute; top: 8px; right: 0px; display: block; width: 20px; height: 15px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -20px -2px; background-size: 140px auto; z-index: 0;}
.office-time-content .time-info-all .office-staff-select .ui-input-text input {position: relative; width: 50px; background-color: transparent; height: 32px; line-height: 32px; padding: 0; font-size: 13px; z-index: 1;}

/*출퇴근 내역 -분석 탭*/
.office-time-content .office-analysis-group {position: relative; padding: 40px 24px 20px; z-index: 1;}
.office-time-content .office-analysis-group.gray {background-color: #f5f5f5;}
.office-time-content .office-analysis-group.dark {background-color: #363d44;}
.office-time-content .office-analysis-group.dark * {color: #FFF;}
.office-time-content .office-analysis-group.last {border-bottom: 0 none;}
.office-time-content .office-analysis-group h2 {margin-bottom: 15px; font-size: 18px; font-weight: 700;}
.office-time-content .office-analysis-group .result-text {font-size: 15px; margin-bottom: 40px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont {position: relative; margin-bottom: 20px; padding-top: 20px; opacity: 0;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont.ani.active {animation-name: ContentFadeUp; animation-duration: 0.5s; animation-fill-mode: both;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont.no-ani {padding-top: 0; opacity: 1;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 {width: 180px; overflow: hidden;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 li {position: relative; float: left; width: 80px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 li .title {position: absolute; left: 0px; bottom: 0px; width: 100%; height: 20px; font-size: 13px; font-weight: 500; text-align: center; z-index: 1;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 li .bar-wrap {position: relative; width: 40px; height: 110px; margin: 30px auto; z-index: 0;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 li .bar-wrap .bar {position: absolute; left: 0px; bottom: 0px; width: 100%; text-indent: -99999px; border-radius: 20px 20px 2px 2px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 li .bar-wrap .bar span {position: absolute; left: -20px; top: -30px; width: 80px; text-indent: initial; text-align: center; font-size: 15px; font-weight: 700;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 .item1 .bar-wrap .bar {background: rgb(57,191,251); background: -moz-linear-gradient(top, rgba(57,191,251,1) 0%, rgba(121,208,247,1) 100%); background: -webkit-linear-gradient(top, rgba(57,191,251,1) 0%,rgba(121,208,247,1) 100%); background: linear-gradient(to bottom, rgba(57,191,251,1) 0%,rgba(121,208,247,1) 100%); animation-delay: 0.1s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 .item2 .bar-wrap .bar {background: rgb(45,217,156); background: -moz-linear-gradient(top, rgba(45,217,156,1) 0%, rgba(105,227,183,1) 100%); background: -webkit-linear-gradient(top, rgba(45,217,156,1) 0%,rgba(105,227,183,1) 100%); background: linear-gradient(to bottom, rgba(45,217,156,1) 0%,rgba(105,227,183,1) 100%); animation-delay: 0.3s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 .item1 .bar-wrap .bar span {color: #65ccfa;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1 .item2 .bar-wrap .bar span {color: #4ee9b1;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont.no-ani .graph-list1 li .bar-wrap .bar {animation-name: graphBarVertical; animation-duration: 0.5s; animation-fill-mode: both;}

.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 {width: 100%; height: 260px; padding-top: 20px; overflow: inherit;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 li {width: 33.3333%;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .bar-wrap {margin: 0 auto 60px; height: 150px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .bar-wrap .bar span {bottom: -33px; top: inherit;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .bar-wrap .bar.ani {animation-name: graphBarVertical; animation-duration: 0.5s; animation-fill-mode: both;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .bar-wrap .bar .result {position: absolute; top: -40px; bottom: auto; left: 50%; width: 96px; padding: 5px 0px; margin-left: -48px; text-align: center; font-size: 13px; font-weight: 400; color: #FFF; background-color: #3b4651; border-radius: 30px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .bar-wrap .bar .result i {display: inline-block; vertical-align: -2px; width: 12px; height: 15px; text-indent: -99999px; background: url(../../static/images/icons2.png) no-repeat; background-size: 200px auto;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .bar-wrap .bar .result .plus {background-position: -85px -93px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .bar-wrap .bar .result .minus {background-position: -103px -93px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .item1 .bar-wrap .bar {background: rgb(45,217,156); background: -moz-linear-gradient(top, rgba(45,217,156,1) 0%, rgba(105,227,183,1) 100%); background: -webkit-linear-gradient(top, rgba(45,217,156,1) 0%,rgba(105,227,183,1) 100%); background: linear-gradient(to bottom, rgba(45,217,156,1) 0%,rgba(105,227,183,1) 100%); animation-delay: 0.3s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .item2 .bar-wrap .bar {background: rgb(45,217,156); background: -moz-linear-gradient(top, rgba(45,217,156,1) 0%, rgba(105,227,183,1) 100%); background: -webkit-linear-gradient(top, rgba(45,217,156,1) 0%,rgba(105,227,183,1) 100%); background: linear-gradient(to bottom, rgba(45,217,156,1) 0%,rgba(105,227,183,1) 100%); animation-delay: 0.6s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .item3 .bar-wrap .bar {background: rgb(213,131,251); background: -moz-linear-gradient(top,  rgba(213,131,251,1) 0%, rgba(227,169,254,1) 100%); background: -webkit-linear-gradient(top,  rgba(213,131,251,1) 0%,rgba(227,169,254,1) 100%); background: linear-gradient(to bottom,  rgba(213,131,251,1) 0%,rgba(227,169,254,1) 100%); animation-delay: 0.9s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .item1 .bar-wrap .bar span {color: #4ee9b1;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .item2 .bar-wrap .bar span {color: #4ee9b1;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list1.type2 .item3 .bar-wrap .bar span {color: #e3a8fe;}

.office-time-content .office-analysis-group.graph-wrap .graph-cont.time-graph {min-height: 30px; margin-bottom: 0;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 {width: 100%;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li {position: relative; height: 30px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li .date,
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li .time {position: absolute; top: 0; height: 30px; line-height: 30px; font-size: 13px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li .date {left: 0; width: 85px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li .time {right: 0; width: 70px; text-align: right; color: #050505;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li .bar {position: relative; height: 30px; padding: 0px; margin: 0px 70px 0px 85px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li .bar span {position: absolute; top: 12px; left: 0px; display: block; width: 100%; height: 6px; font: 0/0 a; background-color: #dadada; border-radius: 6px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li .bar .basic {z-index: 0;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li .bar .active {z-index: 1; animation-name: graphBar; animation-duration: 0.5s; animation-fill-mode: both; background-color: #02cbd3;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 .item1 .bar .active {animation-delay: 2.5s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 .item2 .bar .active {animation-delay: 2.8s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 .item3 .bar .active {animation-delay: 3.1s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 .item4 .bar .active {animation-delay: 3.4s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 .item5 .bar .active {animation-delay: 3.7s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 .item6 .bar .active {animation-delay: 4.0s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li.overtime .time {color: #f41100;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .graph-list2 li.overtime .bar .active {background-color: #f41100;}

.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap {position: absolute; top: 0px; right: 0px; width: 160px; height: 170px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap p {position: absolute; left: 0; width: 100%; text-align: center;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .title {bottom: 0px; height: 20px; font-size: 13px; font-weight: 500;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .number {top: 87px; font-size: 18px; font-weight: 700; color: #FFF; animation-name: fade; animation-duration: 0.5s; animation-fill-mode: both; animation-delay: 1.9s;}
/* 0907 수정 */
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 {top: 23px; left:50%; transform: translate(-50%,0); height: 100%; width: 150px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 span {position: absolute; top: 7px; display: block; width: 75px; height: 110px; font: 0/0 a;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 .img1 {top: 7px; left: 10px; animation-name: fadeLeft; animation-duration: 0.5s; animation-fill-mode: both; animation-delay: 1.0s; background-image: url(../../static/images/office-analysis-img3.png); background-position: 50% 100%; background-repeat: no-repeat; background-size: 50px auto;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 .img2 {top: 7px; right: 10px; animation-name: fadeRight; animation-duration: 0.5s; animation-fill-mode: both; animation-delay: 1.6s; background-image: url(../../static/images/office-analysis-img4.png); background-position: 50% 100%; background-repeat: no-repeat; background-size: 50px auto;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 .img3 {top: 10px; left: 50%; transform: translateX(-50%);width: 38px; height: 32px; animation-name: fadeDown; animation-duration: 0.5s; animation-fill-mode: both; animation-delay: 1.3s; background-image: url(../../static/images/office-analysis-img5.png); background-repeat: no-repeat; background-size: 100% auto; background-position: 50%;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 .up {background-size: 60px auto;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 .down {background-size: 50px auto;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 em {position: absolute; bottom: 60px; width: 75px; font-size: 13px; font-weight: 700; color: #fff; text-align: center;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 .prev {left: 0; animation-name: fadeLeft; animation-duration: 0.5s; animation-fill-mode: both; animation-delay: 1.8s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 .current {right: 0;; animation-name: fadeRight; animation-duration: 0.5s; animation-fill-mode: both; animation-delay: 2.0s;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .img-ani2 em.up {font-size:16px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .result {top: -5px; left: 50%; transform: translateX(-50%); animation-name: fade; animation-duration: 0.5s; animation-fill-mode: both; animation-delay: 2.2s; display: inline-block; width: auto; height: 30px; padding: 4px 11px 0 13px; margin:0 auto; font-size:13px; color: #555; white-space: nowrap; border-radius: 15px; background-color: rgba(218,218,218,0.5);}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .result em {margin-right: 7px;font-size: 15px;font-weight: 700;color: #505050;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .result i {display: inline-block; vertical-align: -2px; width: 12px; height: 15px; text-indent: -99999px; background: url(../../static/images/icons2.png) no-repeat; background-size: 200px auto;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .result .plus {background-position: -85px -93px;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .result .minus {background-position: -103px -93px;}

.office-time-content .office-analysis-group.graph-wrap .graph-cont .chart-circle {padding: 20px 0;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont #chartjs-tooltip2 {position: absolute; opacity: 1; background: rgba(0, 0, 0, .7); color: white; font-size: 11px; border-radius: 3px; -webkit-transition: all .1s ease; transition: all .1s ease; pointer-events: none; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .chartjs-tooltip-key {display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 100%;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .chart-circle.no-data {pointer-events: none;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .chart-nodata {display:none;}
.office-time-content .office-analysis-group.graph-wrap .graph-cont .chart-nodata.on {display:block;position:absolute;left:0;top:0;width:60%;height:100%;z-index:3;background:#363d44 url(../../static/images/doughnut-nodata.png) no-repeat center center;background-size:cover;pointer-events: none;}

.office-time-content .office-analysis-group .work-list {margin-top: -10px;}
.office-time-content .office-analysis-group .work-list li a {position: relative; display: block; height: 70px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.office-time-content .office-analysis-group .work-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #3e464e; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.office-time-content .office-analysis-group .work-list li a:active:before,
.office-time-content .office-analysis-group .work-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.office-time-content .office-analysis-group .work-list li a:after {content: ''; position: absolute; top: 9px; right: 0px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -57px 1px; background-size: 200px auto;}
.office-time-content .office-analysis-group .work-list li a span {position: relative; display: block;}
.office-time-content .office-analysis-group .work-list li a .work-type {padding: 13px 0 5px 40px; font-size: 16px; font-weight: 500;}
.office-time-content .office-analysis-group .work-list li a .work-type:before {content: ''; position: absolute; top: 13px; left: 0px; display: block; width: 25px; height: 25px; text-indent: -99999px; background: url(../../static/images/icons2.png) no-repeat; background-size: 200px auto;}
.office-time-content .office-analysis-group .work-list li a .type1:before {background-position: -8px -129px;}
.office-time-content .office-analysis-group .work-list li a .type2:before {background-position: -48px -129px;}
.office-time-content .office-analysis-group .work-list li a .type3:before {background-position: -88px -129px;}
.office-time-content .office-analysis-group .work-list li a .type4:before {background-position: -127px -129px;}
.office-time-content .office-analysis-group .work-list li a .time {padding-left: 40px; font-size: 13px; color: #a5a5a5;}
.office-time-content .office-analysis-group .work-list li a .time i {position: relative; display: inline-block; padding-left: 10px; margin-left: 5px; color: #a5a5a5;}
.office-time-content .office-analysis-group .work-list li a .time i:before {content: ''; position: absolute; top: 4px; left: 2px; display: block; width: 1px; height: 10px; font: 0/0 a; background-color: #a5a5a5;}

.office-time-content .office-analysis-group .percent-wrap {overflow: hidden; margin: 30px 0 50px;}
.office-time-content .office-analysis-group .percent-wrap li {float: left; width: 50%;}
.office-time-content .office-analysis-group .percent-wrap li > div {position: relative; padding: 20px 15px; background-color: #f2f2f2; border-radius: 10px;}
.office-time-content .office-analysis-group .percent-wrap li > div .title {position: absolute; top: 26px; left: 15px; margin-left: 0px; font-size: 15px; font-weight: 700; color: #333;}
.office-time-content .office-analysis-group .percent-wrap li > div .title span {display: block; font-size: 12px; font-weight: 400;}
.office-time-content .office-analysis-group .percent-wrap li > div .percent {margin-bottom: 25px; text-align: right; font-size: 22px; font-weight: 700; color: #02cbd3;}
.office-time-content .office-analysis-group .percent-wrap li > div .text {position: relative; padding-left: 20px; font-size: 13px; text-align: right;}
.office-time-content .office-analysis-group .percent-wrap li > div .text:before {content: ''; display: inline-block; vertical-align: 2px; width: 0px; height: 0px; margin-right: 8px;}
.office-time-content .office-analysis-group .percent-wrap li > div .text.up {color: #f41100;}
.office-time-content .office-analysis-group .percent-wrap li > div .text.up:before {border-top: 5px solid none; border-bottom: 6px solid #f41100; border-right: 5px solid transparent; border-left: 5px solid  transparent;}
.office-time-content .office-analysis-group .percent-wrap li > div .text.down {color: #2a2a6a;}
.office-time-content .office-analysis-group .percent-wrap li > div .text.down:before {border-top: 6px solid #2a2a6a; border-bottom: 5px solid none; border-right: 5px solid transparent; border-left: 5px solid  transparent;}
.office-time-content .office-analysis-group .percent-wrap .item1 > div {margin-right: 5px;}
.office-time-content .office-analysis-group .percent-wrap .item2 > div {margin-left: 5px;}

.office-time-content .office-analysis-group .work-wrap {margin-bottom: 50px;}
.office-time-content .office-analysis-group .work-wrap.last {margin-bottom: 0px;}
.office-time-content .office-analysis-group .work-wrap .title {margin-bottom: 20px; font-size: 18px; color: #050505;}
.office-time-content .office-analysis-group .work-wrap .no-list-text {padding: 20px 0; text-align: center; font-size: 15px;}
.office-time-content .office-analysis-group .work-wrap .list {margin-bottom: 20px;}
.office-time-content .office-analysis-group .work-wrap .list li {position: relative; height: 54px; overflow: hidden;}
.office-time-content .office-analysis-group .work-wrap .list li .photo {position: absolute; left: 0px; top: 7px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.office-time-content .office-analysis-group .work-wrap .list li .name {position: relative; display: inline-block; padding-left: 50px; height: 54px; line-height: 54px; font-size: 15px; font-weight: 500; color: #050505;}
.office-time-content .office-analysis-group .work-wrap .list li .name .name-overlap {position: absolute; bottom: 0px; left: 2px;}
.office-time-content .office-analysis-group .work-wrap .list li .name i {display: inline-block; vertical-align: 2px; height: 16px; line-height: 16px; padding: 1px 3px; margin-left: 3px; font-size: 10px; font-weight: 700; color: #FFF; background-color: #02cbd3; border-radius: 3px;}
.office-time-content .office-analysis-group .work-wrap .list li .count {float: right; height: 54px; line-height: 54px; font-size: 15px;}
.office-time-content .office-analysis-group .work-wrap .more-btn-wrap a {position: relative; display: block; height: 40px; line-height: 40px; text-align: center; font-size: 15px; border: 1px solid #d8d8d8; border-radius: 10px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.office-time-content .office-analysis-group .work-wrap .more-btn-wrap a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f5; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.office-time-content .office-analysis-group .work-wrap .more-btn-wrap a:active:before,
.office-time-content .office-analysis-group .work-wrap .more-btn-wrap a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.office-time-content .office-analysis-group .work-wrap .more-btn-wrap a:after {content: ''; display: inline-block; vertical-align: -1px; width: 20px; height: 15px; margin-left: 10px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -20px -2px; background-size: 140px auto;}
.office-time-content .office-analysis-group .work-wrap .more-btn-wrap .plus:after {background-position: -20px -2px;}
.office-time-content .office-analysis-group .work-wrap .more-btn-wrap .minus:after {transform: rotate(180deg);}

/*출퇴근 내역 - 분석 - 상세보기*/
.analysis-view-wrap .analysis-view-header {position: relative; padding: 70px 24px 20px; border-bottom: 8px solid #f5f5f5;}
.analysis-view-wrap .analysis-view-header:after {content: ''; position: absolute; left: 0px; bottom: 0px; display: block; width: 100%; height: 1px; font: 0/0 a; background-color: #e2e2e2;}
.analysis-view-wrap .analysis-view-header .title {font-size: 14px; margin-bottom: 5px;}
.analysis-view-wrap .analysis-view-header .time {position: relative; font-size: 18px; font-weight: 700; color: #050505;}
.analysis-view-wrap .analysis-view-header .time:after {content: ''; position: absolute; top: -2px; right: 0px; display: block; width: 30px; height: 30px; font: 0/0 a; background: url(../../static/images/icons2.png) no-repeat; background-size: 200px auto;}
.analysis-view-wrap .analysis-view-header.type1 .time:after {background-position: -45px -166px;}
.analysis-view-wrap .analysis-view-header.type2 .time:after {background-position: -85px -166px;}
.analysis-view-wrap .analysis-view-header.type3 .time:after {background-position: -125px -166px;}
.analysis-view-wrap .analysis-view-header.type4 .time:after {background-position: -165px -166px;}
.analysis-view-wrap .analysis-view-header.type5 .time:after {background-position: -124px -365px;}
.analysis-view-wrap .analysis-view-content {padding: 30px 0px 0px; border-top: 1px solid #e2e2e2;}
.analysis-view-wrap .analysis-view-content .date {margin: 0px 24px 20px; font-size: 15px; font-weight: 700; color: #050505;}
.analysis-view-wrap .analysis-view-content .view-list {margin-bottom: 50px;}
.analysis-view-wrap .analysis-view-content .view-list li a {position: relative; display: block; height: 54px; padding: 0px 24px; overflow: hidden; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.analysis-view-wrap .analysis-view-content .view-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f5; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.analysis-view-wrap .analysis-view-content .view-list li a:active:before,
.analysis-view-wrap .analysis-view-content .view-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.analysis-view-wrap .analysis-view-content .view-list li a .photo {position: absolute; left: 24px; top: 7px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.analysis-view-wrap .analysis-view-content .view-list li a .name {position: relative; display: inline-block; padding-left: 50px; height: 54px; line-height: 54px; font-size: 15px; font-weight: 500; color: #050505;}
.analysis-view-wrap .analysis-view-content .view-list li a .name .name-overlap {position: absolute; left: 2px; bottom: 0px;}
.analysis-view-wrap .analysis-view-content .view-list li a .name i {display: inline-block; vertical-align: 2px; height: 16px; line-height: 16px; padding: 1px 3px; margin-left: 3px; font-size: 10px; font-weight: 700; color: #FFF; background-color: #02cbd3; border-radius: 3px;}
.analysis-view-wrap .analysis-view-content .view-list li a .name .position {display:inline-block;min-width:32px;height:16px;padding:0 3px;margin:-2px 0 2px 6px;border-radius:3px;background-color:#02cbd3;font-size:10px;font-weight:700;color:#fff;line-height:16px;text-align:center;vertical-align:middle;box-sizing:border-box;}
.analysis-view-wrap .analysis-view-content .view-list li a .time {float: right; height: 54px; line-height: 54px; font-size: 15px;}

 /*출퇴근 내역 - 직원*/
.office-time-content .staff-list li {position: relative; border-bottom: 1px solid #eaebf0;}
.office-time-content .staff-list li a {position: relative; display: block; padding: 20px 10px 20px 24px; background-color: #FFF; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.office-time-content .staff-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f5f8f8; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.office-time-content .staff-list li a:active:before,
.office-time-content .staff-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.office-time-content .staff-list li .myinfo {position: absolute; top: 50%; left: 16px; display: block; width: 70px; height: 66px; padding: 0; margin: -33px 0 0 0; background-color: transparent; overflow: hidden; z-index: 2;}
.office-time-content .staff-list li .myinfo:before {border-radius: 10px;}
.office-time-content .staff-list li .myinfo:active {background-color: transparent;}
.office-time-content .staff-list li .myinfo span {display: block;}
.office-time-content .staff-list li .myinfo .photo {position: relative; width: 40px; height: 40px; margin: 0 auto; border-radius: 100%; border: 1px solid #eaebf0; background-color: #f2f2f3;  overflow: hidden;}
.office-time-content .staff-list li .myinfo .name {position: relative; padding-top: 8px; text-align: center; font-size: 13px; font-weight: 500; color: #050505;}
.office-time-content .staff-list li .myinfo .name .name-overlap {position: absolute; left: 17px; top: -10px;}
.office-time-content .staff-list li .myinfo:active .name {font-size: 12px;}
/*.office-time-content .staff-list li a .date {position: absolute; top: 38px; left: 24px; width: 70px; overflow: hidden; font-weight: 500; font-size: 14px; color: #050505;}*/
.office-time-content .staff-list li a .time {position: relative; padding: 0px 0px 10px 70px; font-size: 16px; color: #b2b2b2;}
.office-time-content .staff-list li a .time span {position: relative; display: inline-block;}
.office-time-content .staff-list li a .time span i {display: block; font-size: 12px; font-weight: normal; color: #b2b2b2;}
.office-time-content .staff-list li a .time .icon {display: inline-block; vertical-align: bottom; width: 50px; padding: 0px 0px 2px 20px; margin-left: 3px; font-size: 13px; font-weight: 700;}
.office-time-content .staff-list li a .time .icon:before {content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 18px; height: 18px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -4px -324px; background-size: 200px auto;}
.office-time-content .staff-list li a .desc {min-height: 22px; padding-left: 70px; font-size: 12px; font-weight: 500;}
.office-time-content .staff-list li a .desc span {position: relative; display: inline-block; height: 22px; line-height: 20px; padding: 0px 5px 0px 20px; margin-right: 2px; color: #2a2a6a; border: 1px solid #2a2a6a; border-radius: 22px;}
.office-time-content .staff-list li a .desc span:last-child {margin-right: 0;}
.office-time-content .staff-list li a .desc span:before {content: ''; position: absolute; top: 3px; left: 5px; display: block; width: 14px; height: 14px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat; background-size: 200px auto;}
.office-time-content .staff-list li a .desc .type-before {width: 75px; padding-left: 0px; color: #b2b2b2; border-color: #b2b2b2; text-align: center;}
.office-time-content .staff-list li a .desc .type-after {width: 75px; padding-left: 27px; color: #02cbd3; border-color: #02cbd3;}
.office-time-content .staff-list li a .desc .type-time {background-color: #02cbd3; color: #FFF; border-color: #02cbd3;}
.office-time-content .staff-list li a .desc .type-before:before {display: none;}
.office-time-content .staff-list li a .desc .type-after:before {background-position: -157px -541px;}
.office-time-content .staff-list li a .desc .type-time:before {background-position: -133px -541px;}
.office-time-content .staff-list li a .desc .type-overtime:before {background-position: -133px -575px;}
.office-time-content .staff-list li a .desc .type-night:before {background-position: -157px -575px;}
.office-time-content .staff-list li a .desc .type-holiday:before {background-position: -181px -575px;}

.office-time-content .staff-list li a .time .date {position: absolute; bottom: 12px; left: 0px; display: block; font-weight: 500; font-size: 14px; color: #050505;}
.office-time-content .staff-list li a .time .t-normal {color: #b2b2b2;}
.office-time-content .staff-list li a .time .t-black {color: #050505; font-weight: 500;}
.office-time-content .staff-list li a .time .ico-late {color: #ffc000;}
.office-time-content .staff-list li a .time .ico-late:before {background-position: -35px -324px;}
.office-time-content .staff-list li a .time .ico-absent {color: #f41100;}
.office-time-content .staff-list li a .time .ico-absent:before {background-position: -66px -324px;}
.office-time-content .staff-list li a .time .ico-overtime {color: #02cad2;}
.office-time-content .staff-list li a .time .ico-overtime:before {background-position: -4px -324px;}
.office-time-content .staff-list li a .time .ico-holiday {color: #02cad2;}
.office-time-content .staff-list li a .time .ico-holiday:before {background-position: -4px -324px;}
.office-time-content .staff-list li a .time .ico-vacation1 {color: #8ce03b;}
.office-time-content .staff-list li a .time .ico-vacation1:before {background-position: -128px -324px;}
.office-time-content .staff-list li a .time .ico-vacation2 {color: #8ce03b;}
.office-time-content .staff-list li a .time .ico-vacation2:before {background-position: -97px -324px;}
.office-time-content .staff-list li a .absent:after {content: ''; position: absolute; top: 50%; left: 69px; display: block; width: 166px; height: 1px; font: 0/0 a; background-color: #b2b2b2;}
.office-time-content .staff-list .modify a {background-color: #fff3f5;}
.office-time-content .staff-list .modify .myinfo {background-color: transparent;}
.office-time-content .staff-list .modify .myinfo:after {content: ''; position: absolute; top: 0px; left: 8px; display: block; width: 8px; height: 8px; font: 0/0 a; background-color: #e54660; border-radius: 100%; animation-name: fade; animation-duration: 0.5s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both;}

.office-time-content .btn-wrap {position: relative; padding: 25px 24px 0px;}
.office-time-content .btn-wrap a {display: block; height: 50px; line-height: 50px; font-size: 16px; font-weight: 700; text-align: center; border-radius: 3px;}
.office-time-content .btn-wrap a:active {font-size: 15px;}
.office-time-content .btn-wrap .btn-confirm {color: #FFF; background-color: #02cbd3;}
.office-time-content .btn-wrap .btn-cancel {color: #02cbd3; background-color: #FFF; border: 1px solid #02cbd3;}
.office-time-content .btn-wrap .off {color: #afafb2; background-color: #f1f2f5; border: 0 none;}
.office-time-content .btn-wrap .off:active {font-size: 16px;}

 #office-time-staff .office-time-wrap {padding-bottom: 50px;}
 #office-time-view .office-time-wrap {padding-bottom: 0px;}
 #office-time-view .office-time-content {padding: 50px 0 40px;}
 #office-time-view .btn-office-time {position: absolute; top: 15px; right: 24px; display: block; font-size: 14px; font-weight: 500; color: #333;}
 #office-time-view .btn-office-time:active {font-size: 13px;}
 #office-time-view .office-time-content .time-info-all {border-top: 1px solid #eaebf0;}
.office-time-content .time-info-all .office-work-info {margin: 0px 8px 15px; overflow: hidden;}
.office-time-content .time-info-all .office-work-info p {height: 25px; line-height: 25px;}
.office-time-content .time-info-all .office-work-info .name {float: left; font-size: 18px; font-weight: 700; color: #050505;}
.office-time-content .time-info-all .office-work-info .name .position {display:inline-block;min-width:32px;height:18px;padding:0 3px;margin:0 0 0 6px;border-radius:4px;background-color:#02cbd3;font-size:11px;font-weight:500;color:#fff;line-height:18px;text-align:center;vertical-align:middle;box-sizing:border-box;}
.office-time-content .time-info-all .office-work-info .date {float: right; font-size: 15px;}
.office-time-content .time-info-all .office-work-info .date span {font-weight: 500; color: #050505;}
.office-time-content .office-time-info-view {position: relative; margin: 40px 24px 0px;}
.office-time-content .office-time-info-view h2 {height: 50px; line-height: 50px; font-size: 18px; font-weight: 700; color: #050505;}
.office-time-content .office-time-info-view .icon {position: absolute; top: 17px; right: -5px; display: block; width: 50px; height: 18px; line-height: 18px; padding-left: 20px; font-size: 13px; font-weight: 700;}
.office-time-content .office-time-info-view .icon:before {content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 18px; height: 18px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -4px -324px; background-size: 200px auto;}
.office-time-content .office-time-info-view .ico-late {color: #ffc000;}
.office-time-content .office-time-info-view .ico-late:before {background-position: -35px -324px;}
.office-time-content .office-time-info-view .ico-absent {color: #f41100;}
.office-time-content .office-time-info-view .ico-absent:before {background-position: -66px -324px;}
.office-time-content .office-time-info-view .ico-overtime {color: #02cad2;}
.office-time-content .office-time-info-view .ico-overtime:before {background-position: -4px -324px;}
.office-time-content .office-time-info-view .ico-holiday {color: #02cad2;}
.office-time-content .office-time-info-view .ico-holiday:before {background-position: -4px -324px;}
.office-time-content .office-time-info-view .ico-vacation1 {color: #8ce03b;}
.office-time-content .office-time-info-view .ico-vacation1:before {background-position: -128px -324px;}
.office-time-content .office-time-info-view .ico-vacation2 {color: #8ce03b;}
.office-time-content .office-time-info-view .ico-vacation2:before {background-position: -97px -324px;}
.office-time-content .office-time-info-view .item {margin: 10px 0px 20px; overflow: hidden;}
.office-time-content .office-time-info-view .item dt {float: left; font-size: 15px; font-weight: 500; color: #050505; line-height: 1.8;}
.office-time-content .office-time-info-view .item dd {float: right; text-align: right; font-size: 15px; line-height: 1.8;}
.office-time-content .office-time-info-view .item dd p {letter-spacing: 0.028em; text-align: right;}
.office-time-content .office-time-info-view .item dd p span {display: inline-block; width: 74px;}
.office-time-content .office-time-info-view .item.box {padding:10px 16px;border-radius:4px;background-color:#f5f5f5;}
.office-time-content .office-time-info-view.worktime .item dd {color: #050505; font-weight: 700;}
.office-time-content .office-time-info-view.worktime .item dd a {display: block; color: #050505; font-weight: 700;}
.office-time-content .office-time-info-view.worktime .item .view {display: none; position: relative;}
.office-time-content .office-time-info-view.worktime .item .view.on {display: block;}
.office-time-content .office-time-info-view.worktime .item .active:before {content: ''; position: absolute; top: 0px; left: -10px; display: block; width: 8px; height: 8px; font: 0/0 a; background-color: #e54660; border-radius: 100%;}
.office-time-content .office-time-info-view.worktime .item .modify {display: none;}
.office-time-content .office-time-info-view.worktime .item .modify.on {display: block;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap {width: 180px; padding: 0;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap li {display: inline-block; padding: 0; margin: 0;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap li label {display: none;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap li input {width: 76px; min-height: 26px; padding: 0; text-align: center; font-size: 15px; color: #050505; position: relative; z-index: 1;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap li .ui-input-text {height: 26px;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap li .ui-input-text:before {content: ':'; position: absolute; top: -1px; left: 51px; display: block; z-index: 0;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap li .line {background-color: #050505;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap li .line .line-focus {display: none;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap .tilde {margin-left: 2px;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap .resttime {width: 100%; text-align: right;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap .resttime label {display: inline-block; position: relative; opacity: 1; font-size: 15px; color: #050505; font-weight: 700; letter-spacing: 0.028em;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap .resttime input {width: 75px; text-align: right;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap .resttime .ui-input-text {display: inline-block; width: 75px;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap .resttime .ui-input-text:before {display: none;}
.office-time-content .office-time-info-view.worktime .item .modify .input-wrap .resttime .line {position: absolute; right: 0px; bottom: 0px; width: 70px;}

.office-time-wrap .layer-bottom-btn {position: relative; padding: 0 0 30px; width: 100%; text-align: center;}
.office-time-wrap .layer-bottom-btn .delete-btn {display: inline-block; width: 56px; height: 56px; text-indent: -99999px; background: #fe847b url(../../static/images/icons.png) no-repeat -73px -242px; background-size: 200px auto; border-radius: 100%;}
.office-time-wrap .layer-bottom-btn .delete-btn:active {background-size: 195px auto; background-position: -71px -234px;}

.office-time-content .office-time-info-view .tit-type {display: flex;justify-content: space-between; align-items: center;}
.office-time-content .office-time-info-view .tit-type span[class^="type-"] {display:inline-block;height:16px;padding:0 4px;margin-left:2px;border-radius:3px;font-size:9px;font-weight:bold;text-align:center;line-height:14px;}
.office-time-content .office-time-info-view .tit-type .type-other {border:1px solid #ffc054;color:#ffc054;}
.office-time-content .office-time-info-view .tit-type .type-subst {border:1px solid #79d0f7;color:#5cb9e2;}
.office-time-content .office-time-info-view .tit-type .type-vacation {border:1px solid #6ae2b7;color:#6ae2b7;}

/* 투썸 : 출퇴근 내역 매니저/직원 추가 */
.office-time-wrap .office-time-header.tt-time .input-wrap li .ui-input-text {width:100px;}
.office-time-content .time-info-all.tt-time .office-work-time.st2 li {width:25%;padding-left:4%;}
.office-time-content .time-info-all.tt-time .office-work-time.st2 li .time {font-size:13px;}
.office-time-content .time-info-all.tt-time .office-work-time.st2 .step1 .title:before {background-position: -106px -540px;}
.office-time-content .time-info-all.tt-time .office-work-time.st2 .step2 .title:before {background-position: -100px -296px;}
.office-time-content .time-info-all.tt-time .office-work-time.st2 .step3 .title:before {background-position: -68px -294px;}
.office-time-content .time-info-all.tt-time .office-work-time.st2 .step4 .title:before {background-position: -3px -549px;}

.office-time-content .staff-list.tt-staff li a {padding-bottom:16px;}
.office-time-content .staff-list.tt-staff li a .desc span {margin-right:1px;margin-bottom:4px;}
.office-time-content .staff-list li a .time .vacation {width:calc(100% - 14px);height:23px;margin-top:15px;border:1px solid #b2b2b2;border-radius:13px;font-size:15px;font-weight:500;color:#050505;text-align:center;line-height:21px;background-color:#f5f5f5;}
.office-time-content .staff-list li a .desc .type-normal {padding-left:5px;}
.office-time-content .staff-list li a .desc .type-other {padding-left:5px;border-color:#ffc054;color:#fff;background-color:#ffc054;}
.office-time-content .staff-list li a .desc .type-subst {padding-left:5px;margin-left:1px;border-color:#79d0f7;color:#fff;background-color:#79d0f7;}
.office-time-content .staff-list li a .desc .type-normal:before,
.office-time-content .staff-list li a .desc .type-other:before,
.office-time-content .staff-list li a .desc .type-subst:before {content:none;}
#office-time-staff .office-time-content .time-info-all.tt-time .office-time-icons:after {content:none;}
.office-time-content .staff-list.tt-staff li.modify a .time .date:after {content: ''; position: absolute; top: -8px; left: 0px; display: block; width: 8px; height: 8px; font: 0/0 a; background-color: #e54660; border-radius: 100%; animation-name: fade; animation-duration: 0.5s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both;}

.office-time-content .office-analysis-group.graph-wrap.tt-analysis .graph-cont .graph-list1.type2 .item1 .bar-wrap .bar,
.office-time-content .office-analysis-group.graph-wrap.tt-analysis .graph-cont .graph-list1.type2 .item2 .bar-wrap .bar {background: rgb(12,209,221); background: -moz-linear-gradient(top, rgba(12,209,221,1) 0%, rgba(8,246,238,1) 100%); background: -webkit-linear-gradient(top, rgba(12,209,221,1) 0%,rgba(8,246,238,1) 100%); background: linear-gradient(to bottom, rgba(12,209,221,1) 0%,rgba(8,246,238,1) 100%); animation-delay: 0.3s;}
.office-time-content .office-analysis-group.graph-wrap.tt-analysis .graph-cont .graph-list1.type2 .item1 .bar-wrap .bar span,
.office-time-content .office-analysis-group.graph-wrap.tt-analysis .graph-cont .graph-list1.type2 .item2 .bar-wrap .bar span {color:#03f0e8;}
.office-time-content .office-analysis-group.tt-analysis .work-list li a .type1:before {background-position:-88px -368px;}
.office-time-content .office-analysis-group.tt-analysis .work-list li a .type2:before {background-position:-8px -129px;}
.office-time-content .office-analysis-group.tt-analysis .work-list li a .type3:before {background-position:-48px -129px}
.office-time-content .office-analysis-group.tt-analysis .work-list li a .type4:before {background-position:-88px -129px;}
.office-time-content .office-analysis-group .work-wrap .list li .name i.position {min-width:34px;padding:0 3px;margin-left:6px;text-align:center;box-sizing:border-box;}
.office-time-content .office-time-info-view.worktime.tt-time .item .modify .input-wrap li input {width:74px;}
.office-time-content .office-time-info-view.worktime.tt-time .item .modify .input-wrap li .ui-input-text:before {left:auto;right:18px;}
.analysis-view-wrap .analysis-view-content .view-list li a .time i {position: relative; display: inline-block; height: 22px; line-height: 22px; padding: 0px 6px; margin-right: 14px; color: #2a2a6a; border: 1px solid #2a2a6a; border-radius: 22px; font-size:12px;font-weight:500;color:#2a2a6a;vertical-align:middle;}

/*전자결재 메인*/
#electro-approval {background-color: #f5f5f5;}
#electro-approval .header {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0);}
#electro-approval .electro-approval-wrap {padding: 30px 0 40px;}
.electro-approval-main {position: relative; z-index: 1;}
.electro-approval-main h2 {margin: 0 24px 25px; font-size: 24px; font-weight: 700;}
.electro-approval-main .list {overflow: hidden; margin: 0 16px 50px;}
.electro-approval-main .list li {float: left; width: 50%; margin-bottom: 15px;}
.electro-approval-main .list li a {position: relative; display: block; width: 90%; height: 110px; margin: 0 auto; text-align: center; background-color: #FFF; border-radius: 10px; box-shadow: 0px 3px 5px 3px rgba(0,0,0,0.1); -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.electro-approval-main .list li a:after {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #fafafa; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; border-radius: 10px;}
.electro-approval-main .list li a:active:after,
.electro-approval-main .list li a:focus:after {-webkit-transform: scale(1); transform: scale(1);}
.electro-approval-main .list li a span {display: block; position: absolute; z-index: 2;}
.electro-approval-main .list li a .tit {top: 74px; left: 0px; width: 100%; font-size: 16px; font-weight: 700; color: #050505;}
.electro-approval-main .list li a .num {top: 15px; left: 50%; min-width: 24px; height: 24px; line-height: 24px; padding: 0px 5px; margin-left: 20px; font-size: 13px; font-weight: 700; color: #FFF; background-color: #79d0f7;  border-radius: 24px;}
.electro-approval-main .list li a:before {content: ''; position: absolute; top: 18px; left: 50%; display: block; width: 50px; height: 50px; margin-left: -25px; font: 0/0 a; background: url(../../static/images/icons2.png) no-repeat; background-size: 200px auto; z-index: 2;}
.electro-approval-main .list .type1 a:before {background-position: -7px -200px;}
.electro-approval-main .list .type2 a:before {background-position: -70px -200px;}
.electro-approval-main .list .type3 a:before {background-position: -141px -200px;}
.electro-approval-main .list .type4 a:before {background-position: -6px -250px;}
.electro-approval-main .list .type5 a:before {background-position: -73px -250px;}
.electro-approval-main .list .type6 a:before {background-position: -143px -250px;}
.electro-approval-main .list .type7 a:before {background-position: -7px -300px;}
.electro-approval-main .list .type8 a:before {background-position: -7px -352px;}
.electro-approval-main .list .type9 a:before {background-position: -153px -352px;}
.electro-approval-bg {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #d1ede7;}

/*전자결재 내역*/
.electro-approval-wrap {padding: 50px 0 100px;}
.electro-approval-wrap .search-header {position: fixed; top: 48px; left: 0px; width: 100%; height: 40px; padding: 0px 16px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; background-color: #FFF; font-size: 13px; overflow: hidden; z-index: 1;}
.electro-approval-wrap .search-header .item1 {float: left; height: 40px; line-height: 40px;}
.electro-approval-wrap .search-header .item2 {float: right;}
.electro-approval-wrap .search-header .item2 a {display: block; height: 40px; line-height: 40px; color: #050505;}
.electro-approval-wrap .search-header .item2 a span {display: inline-block; position: relative;}
.electro-approval-wrap .search-header .item2 a span:last-child {padding: 0px 22px;}
.electro-approval-wrap .search-header .item2 a span:last-child:after {content: ''; position: absolute; top: 12px; right: -3px; display: block; width: 20px; height: 15px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -20px -2px; background-size: 140px auto;}
.electro-approval-wrap .overtime-guide {padding: 5px 24px 10px;}
.electro-approval-wrap .overtime-guide p {margin: 5px 0px; font-size: 13px; color: #f41100;}
.electro-approval-wrap .overtime-guide p:before {content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-right: 3px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -39px -510px; background-size: 200px auto;}
.electro-approval-wrap .search-list {position: relative; margin-bottom: 75px; background-color: #FFF; z-index: 0;}
.electro-approval-wrap .search-list li {border-bottom: 1px solid #e2e2e2;}
.electro-approval-wrap .search-list li a {position: relative; display: block; height: 90px; padding: 22px 24px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.electro-approval-wrap .search-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #fafafa; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.electro-approval-wrap .search-list li a:active:before,
.electro-approval-wrap .search-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.electro-approval-wrap .search-list li a span {display: block;}
.electro-approval-wrap .search-list li a .title {margin-bottom: 5px; font-size: 16px; font-weight: 500; color: #050505;}
.electro-approval-wrap .search-list li a .title .name-overlap {display: inline-block; vertical-align: 2px; margin-left: 3px;}
.electro-approval-wrap .search-list li a .date {font-size: 14px;}
.electro-approval-wrap .search-list li a .icon {position: absolute; top: 50%; right: 24px; width: 46px; height: 22px; line-height: 19px; margin-top: -11px; border-radius: 22px; border: 1px solid #02cbd3; font-size: 12px; font-weight: 700; text-align: center;}
.electro-approval-wrap .search-list li a .ico-type1 {color: #02cbd3; border-color: #02cbd3;}
.electro-approval-wrap .search-list li a .ico-type2 {color: #FFF; border-color: #02cbd3; background-color: #02cbd3;}
.electro-approval-wrap .search-list li a .ico-type3 {color: #FFF; border-color: #f41100; background-color: #f41100;}
.electro-approval-wrap .search-list-no {padding: 140px 0; font-size: 16px; text-align: center;position:relative;}
.electro-approval-wrap .search-list-no:before {content:'';width:40px;height:40px;background:url(../../static/images/icons3.png) no-repeat -160px 0;background-size:200px auto;position:absolute;top:68px;left:50%;transform:translateX(-50%);}

.electro-approval-wrap .search-list.staff-list li a {height: 105px;}
.electro-approval-wrap .search-list.staff-list li a .photo {position: absolute; left: 24px; top: 20px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.electro-approval-wrap .search-list.staff-list li a .name {position: relative; padding: 10px 0 15px 50px; font-size: 15px; font-weight: 500; color: #050505;}
.electro-approval-wrap .search-list.staff-list li a .name i {display: inline-block; vertical-align: 2px; padding: 1px 3px; margin-left: 3px; font-size: 10px; font-weight: 700; color: #FFF; background-color: #02cbd3; border-radius: 3px;}
.electro-approval-wrap .search-list.staff-list li a .name .name-overlap {position: absolute; left: 2px; bottom: 0px;}
.electro-approval-wrap .search-list.staff-list li a .date {font-size: 13px;}
.electro-approval-wrap .search-list.staff-list li a .date i {margin-right: 7px;}
.electro-approval-wrap .tab1-1 .search-list {border-top: 1px solid #e2e2e2;}

.electro-approval-wrap .btn-wrap {position: fixed; bottom: 0; padding: 0;}
.electro-approval-wrap .btn-wrap a {display: block; height: 64px; line-height: 64px; font-size: 19px; font-weight: 700; color: #FFF; text-align: center; background-color: #02cbd3;}
.electro-approval-wrap .btn-wrap a:active {font-size: 18px;}
.electro-approval-wrap .btn-wrap .btn-delete {background-color: #3c3c4a;}
#electro-approval-staff-list .electro-approval-wrap,
#electro-approval-overtime-list .electro-approval-wrap,
#electro-approval-list .electro-approval-wrap {padding: 95px 0 40px;}
#electro-approval-staff-list,
#electro-approval-overtime-list,
#electro-approval-list {background-color: #f5f5f5;}
#electro-approval-staff-list h1,
#electro-approval-overtime-list h1,
#electro-approval-list h1 {height: 22px; margin: 0px 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#electro-approval-staff-list .btn-name-search,
#electro-approval-overtime-list .btn-name-search,
#electro-approval-list .btn-name-search {position: absolute; top: 12px; right: 14px; display: block; width: 24px; height: 24px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -169px -68px; background-size: 200px auto;}
#electro-approval-overtime-list .electro-approval-wrap .search-list {margin-bottom: 10px;}
#electro-approval-staff-list .electro-approval-wrap .staff-list.staff-list2 li:first-of-type {border-top:1px solid #e2e2e2;}
#electro-approval-staff-list .electro-approval-wrap .staff-list.staff-list2 li a {height:87px;}
#electro-approval-staff-list .electro-approval-wrap .staff-list.staff-list2 li a .name i {min-width:32px;text-align:center;}
#electro-approval-staff-list .electro-approval-wrap .staff-list.staff-list2 li a .name {padding-top:0;}
#electro-approval-staff-list .electro-approval-wrap .staff-list.staff-list2 li a .name .name-overlap {bottom:-10px;}
#electro-approval-staff-list .electro-approval-wrap .staff-list.staff-list2 li a .date {padding-left:50px;margin-top:-14px;}

/*전자결재 상세*/
#electro-approval-view {background-color: #f5f5f5;}
#electro-approval-view .btn-modify,
#electro-approval-view .btn-delete {position: absolute; top: 15px; right: 24px; display: block; font-size: 14px; font-weight: 500; color: #333;}
#electro-approval-view .btn-modify:active,
#electro-approval-view .btn-delete:active {font-size: 13px;}
#electro-approval-view .electro-approval-wrap {padding: 45px 0 40px;}
.electro-approval-wrap .title-header {position: relative; padding: 25px 24px 20px; margin-bottom: 8px; background-color: #FFF; border-bottom: 1px solid #e2e2e2;}
.electro-approval-wrap .title-header:before {content: ''; position: absolute; top: 5px; left: 0px; display: block; width: 100%; height: 1px; font: 0/0 a; background-color: #e2e2e2;}
.electro-approval-wrap .title-header:after {content: ''; position: absolute; bottom: -9px; left: 0px; display: block; width: 100%; height: 8px; font: 0/0 a; background-color: #f5f5f5;}
.electro-approval-wrap .title-header .name {margin-bottom: 5px; font-size: 16px; font-weight: 500; color: #050505;}
.electro-approval-wrap .title-header .date {font-size: 13px;}
.electro-approval-wrap .title-header .date span {display: inline-block; vertical-align: middle; position: relative; padding-right: 15px;}
.electro-approval-wrap .title-header .date span:first-child:after {content: ''; position: absolute; top: 4px; right: 7px; display: block; width: 1px; height: 10px; font: 0/0 a; background-color: #b2b2b2;}

.electro-approval-wrap .approval-view-cont {margin-bottom: 85px;}
.electro-approval-wrap .approval-view-cont .tab-menu {overflow: hidden; background-color: #FFF; border-top: 1px solid #e2e2e2;}
.electro-approval-wrap .approval-view-cont .tab-menu li {float: left; width: 50%; text-align: center; border-bottom: 1px solid #e2e2e2;}
.electro-approval-wrap .approval-view-cont .tab-menu li a {position: relative; display: block; height: 45px; line-height: 45px; font-size: 15px; color: #b2b2b2;}
.electro-approval-wrap .approval-view-cont .tab-menu li a:active {font-size: 14px;}
.electro-approval-wrap .approval-view-cont .tab-menu li a.on {color: #050505; font-weight: 700;}
.electro-approval-wrap .approval-view-cont .tab-menu li a.on:after {content: ''; position: absolute; left: 0; bottom: 0; display: block; height: 3px; font: 0/0 a; background-color: #02cbd3; animation-name: widthSlide; animation-delay: 0.3s; animation-duration: 0.5s; animation-fill-mode: both;}
.electro-approval-wrap .approval-view-cont .tab-menu li a em {display:inline-block;width:16px;height:16px;line-height:16px;margin:-2px 0 2px 1px;border-radius:50%;background-color:#d2d2d2;font-size:12px;font-weight:500;color:#fff;vertical-align:middle;}
.electro-approval-wrap .approval-view-cont .tab-menu li a.on em {background-color:#02cbd3;}
.electro-approval-wrap .approval-view-cont .tab-cont .content {display: none;}
.electro-approval-wrap .approval-view-cont .tab-cont .content.on {display: block;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area {padding: 30px 24px 60px; margin-bottom: 8px; min-height: 100px; background-color: #FFF; border-bottom: 1px solid #e2e2e2;}

.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list li {position: relative; padding: 10px 0; overflow: hidden;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list li > div {position: relative; font-size: 15px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list li .title {float: left;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list li .cont {float: right; text-align: right;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list li .cont span {display: block;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list li .strong {font-weight: 700; color: #050505;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list li.arrow {padding-top: 25px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list li.arrow:before {content: ''; position: absolute; right: 70px; top: 5px; display: block; width: 0px; height: 0px; border-top: 6px solid #050505; border-bottom: 6px solid none; border-right: 6px solid transparent; border-left: 6px solid transparent;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list li .list {margin-top: 30px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list .vacation .cont span {position: relative; display: inline-block; padding-left: 20px; margin-right: 10px; vertical-align: 1px; font-size: 13px; font-weight: 700; color: #8ce03b;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list .vacation .cont span:before {content: ''; position: absolute; top: 50%; left: 0px; display: block; width: 18px; height: 18px; margin-top: -9px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat; background-size: 200px auto;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list .vacation .cont .icon1:before {background-position: -128px -324px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list .vacation .cont .icon2:before {background-position: -97px -324px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list .overtime .time {margin-bottom: 8px; background-color: #02cbd3; border-radius: 5px; overflow: hidden;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list .overtime .time li {float: left; position: relative; width: 50%; text-align: center; font-size: 13px; font-weight: 500; color: #FFF;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list .overtime .time li:first-child:after {content: ''; position: absolute; top: 10px; right: 0px; display: block; width: 1px; height: 45px; font: 0/0 a; background-color: #4edbe0;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list .overtime .time li span {display: block; margin-top: 5px; font-size: 16px; font-weight: 700;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .cont-list .overtime .text {padding: 10px 0px; margin-top: 0px; text-align: center; font-size: 13px; font-weight: 500; color: #fe847b; background-color: #3d3c4a; border-radius: 5px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .text {margin-top: 10px; font-size: 13px; line-height: 1.7;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .staff-change {margin-top: 20px; overflow: hidden;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .staff-change li {position: relative; float: left; width: 50%; text-align: center;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .staff-change li:first-child:after {content: ''; position: absolute; top: 41px; right: -15px; display: block; width: 30px; height: 30px; background: url(../../static/images/icons.png) no-repeat 3px -508px; background-size: 200px auto;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .staff-change li:first-child {padding-right: 30px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .staff-change li:last-child {padding-left: 30px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .staff-change li span {display: block; margin-bottom: 5px; font-size: 13px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .staff-change li .photo {width: 40px; height: 40px; margin: 0 auto 5px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .staff-change li .name {font-size: 15px; font-weight: 700; color: #050505;}

.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list {padding: 0px 24px; margin-bottom: 8px; border-bottom: 1px solid #e2e2e2;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li {border-top: 1px solid #f4f5f7; border-bottom: 0 none;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li:first-child {border-top: 0 none;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap {position: relative; display: block; height: 60px; padding: 0px 24px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap span {position: absolute; top: 10px; display: block;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .photo {left: 0px; width: 40px; height: 40px; border-radius: 100%; border: 1px solid #eaebf0; background-color: #f2f2f3; overflow: hidden;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .name {left: 50px; width: 100px; height: 40px; line-height: 40px; font-size: 15px; font-weight: 500; color: #050505;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .name .name-overlap {position: absolute; left: -50px; bottom: -5px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .date {left: 140px; width: 100px; height: 40px; line-height: 40px; font-size: 13px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .icon {top: 50%; right: 0px; width: 46px; height: 22px; line-height: 19px; margin-top: -11px; border-radius: 22px; border: 1px solid #02cbd3; font-size: 12px; font-weight: 700; text-align: center;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .ico-type1 {color: #02cbd3; border-color: #02cbd3;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .ico-type2 {color: #FFF; border-color: #02cbd3; background-color: #02cbd3;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .ico-type3 {color: #FFF; border-color: #f41100; background-color: #f41100;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .ico-type4 {color: #555; border-color: #b2b2b2;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .comment {min-height: 39px; padding: 8px 15px; font-size: 15px; background-color: #f4f4f4; border: 1px solid #e2e2e2; border-radius: 5px; margin-bottom: 20px;}

.electro-approval-wrap .approval-view-cont .tab-cont .content .mail-list-wrap {position: relative; padding: 0px 24px; background-color: #FFF; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .mail-list-wrap .title {position: absolute; left: 24px; top: 12px; font-size: 15px; font-weight: 700; color: #050505;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .mail-list-wrap .mail-list {margin-left: 50px; padding: 6px 0px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .mail-list-wrap .mail-list li {overflow: hidden;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .mail-list-wrap .mail-list li span {position: relative; display: block; height: 34px; line-height: 34px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .mail-list-wrap .mail-list li .name {float: left; font-size: 15px; font-weight: 500; color: #050505;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .mail-list-wrap .mail-list li .date {float: right; font-size: 13px; padding-left: 25px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .mail-list-wrap .mail-list li .date .read {position: absolute; top: 8px; left: 0px; display: block; width: 17px; height: 18px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -168px -321px; background-size: 200px auto;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .mail-list-wrap .mail-list li .date .read.on {background-position: -168px -296px;}

#electro-approval-view .electro-approval-wrap .btn-wrap {overflow: hidden;}
#electro-approval-view .electro-approval-wrap .btn-wrap span {display: block; float: left; width: 50%;}
#electro-approval-view .electro-approval-wrap .btn-wrap span.oneBtn {width: 100%;}
#electro-approval-view .electro-approval-wrap .btn-wrap span .btn-return {background-color: #3c3c4a;}
#electro-approval-view .electro-approval-wrap .btn-wrap span .btn-va-cancel {background-color: #3c3c4a;}
#electro-approval-view .electro-approval-wrap .btn-wrap span .disable {font-size: 19px; color: #afafb2; background-color: #f1f2f5;}

.tt-vacation .cancel-text {padding:17px 20px;margin-bottom:20px;border:1px solid #f41100;border-radius:4px;font-size:14px;color:#f41100;text-align:center;}
.tt-vacation .cont-list .cont .label {display:inline-block;width:39px;height:22px;margin:-1px 0 0 7px;border:1px solid #b2b2b2;border-radius:4px;font-size:12px;color:#555;text-align:center;line-height:20px;vertical-align:top;}
.tt-vacation .cont-list .cont .time {display:inline-block;padding:15px 20px;margin-top:10px;border-radius:4px;background-color:#f5f5f5;text-align:left;}
.tt-vacation .cont-list .cont .time span {display:block;margin-bottom:5px;font-size:13px;font-weight:400;color:#555;}
.tt-vacation .cont-list .cont .time span em {display:inline-block;margin-right:6px;}
.tt-vacation .cont-list .cont .time span:last-of-type {margin-bottom:0;}

.tt-vacation .cont-list .otherwork {padding-bottom:30px !important;}
.tt-vacation .cont-list .otherwork div {float:none !important;display:block;}
.tt-vacation .cont-list .otherwork .title {margin-bottom:8px;}
.tt-vacation .cont-list .otherwork .cont {height:31px;line-height:30px;border-bottom:1px solid #e2e2e2;color:#050505;text-align:left !important;}

/* 투썸 전자결재 상세 수정/추가 */
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .text.center {text-align:center;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .box-text {padding:17px 20px;margin-top:20px;border:1px solid #b2b2b2;border-radius:4px;background-color:#fff;font-size:13px;color:#555;text-align:center;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .important-text {padding-left: 20px; font-size: 13px; line-height: 1.7; color:#f41100;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .important-text:before {content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-left: -20px; margin-right: 5px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -39px -510px; background-size: 200px auto;}

.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .label {display:inline-block;height:22px;padding:0 9px;margin-right:6px;border:1px solid #b2b2b2;border-radius:4px;font-size:12px;font-weight:400;line-height:20px;text-align:center;box-sizing: border-box;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .title {float:none;width:100%;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .worktime {margin-top:10px;font-weight:700;color:#050505;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .worktime .label {border-color:#02cbd3;color:#02cbd3;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .worktime em {color:#02cbd3;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .cont {position:absolute;bottom:12px;right:0;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time > li:nth-of-type(3) {margin-top:10px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .overtime {padding-top:30px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .overtime .time {padding:0;border:1px solid #b2b2b2;border-radius:5px;background-color:#fff;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .overtime .time .title {width:100%;border-bottom:1px solid #b2b2b2;font-size:15px;font-weight:700;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .overtime .time .title span {display:inline-block;margin:0;padding:0;color:#f41100;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .overtime .time .title:after {content:none;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .overtime .time li:nth-of-type(2):after  {content: ''; position: absolute; top: 0; right: 0; display: block; width: 1px; height: 100%; font: 0/0 a; background-color: #b2b2b2;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .overtime .time li:last-of-type {display:flex; align-items: center; justify-content: center; height:56px;}
.electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time .overtime .time li {color:#050505;}

/* 전자결재 상세 사직원 */
.item.leave .cont-list li {padding-bottom:30px !important;}
.item.leave .cont-list .title,
.item.leave .cont-list .cont {float:none !important;position:relative;display:block;width:100%;}
.item.leave .cont-list .title {margin-bottom:10px;}
.item.leave .cont-list .cont {text-align:left !important;}
.item.leave .cont-list .cont.comment {min-height: 39px; padding: 11px 15px; font-size: 15px; background-color: #fff; border: 1px solid #e2e2e2; border-radius: 5px; word-break:break-all;}
.item.leave .cont-list dl.cont:after {content:'';display:block;clear:both;}
.item.leave .cont-list dl.cont dt,
.item.leave .cont-list dl.cont dd {float:left;height:35px;line-height:34px;padding-left:13px;padding-right:7px;font-size:14px;border-bottom:1px solid #e2e2e2;}
.item.leave .cont-list dl.cont dt {width:45%;background-color:#f1f2f5;font-weight:500;}
.item.leave .cont-list dl.cont dd {width:55%;}
.item.leave .cont-list dl.cont dt:first-of-type,
.item.leave .cont-list dl.cont dd:first-of-type {border-top:1px solid #e2e2e2;}
.item.leave .cont-list dl.cont dt.h-auto,
.item.leave .cont-list dl.cont dd.h-auto {height:52px;line-height:1.4;padding-top:7px;padding-bottom:8px;display:flex;align-items: center;}
.item.leave .cont-list.agree {position:relative;margin-top:9px;padding-top:40px;}
.item.leave .cont-list.agree:before {content:'';position:absolute;left:-24px;right:-24px;top:-9px;width:calc(100% + 48px);height:8px;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;background-color:#f5f5f5;}
.item.leave .cont-list.agree li {padding:18px 0 !important;margin-bottom:4px;overflow:visible !important;}
.item.leave .cont-list.agree li:before,
.item.leave .cont-list.agree li:after {content:'';position:absolute;left:-24px;right:-24px;width:calc(100% + 48px);height:1px;background:#e2e2e2;}
.item.leave .cont-list.agree li:before {top:0;}
.item.leave .cont-list.agree li:after {bottom:0;}
.item.leave .cont-list.agree .title {position:absolute !important;top:30px;font-size:16px;font-weight:500;color:#050505;}
.item.leave .cont-list.agree .cont {padding-left:50%;text-align:right !important;}
.item.leave .cont-list.agree .cont .date {margin-top:2px;font-size:13px;color:#3e6eb7;}
.item.leave .cont-list.agree .comment {min-height: 39px; padding: 11px 15px; margin: 9px 0 3px; font-size: 15px; background-color: #fff; border: 1px solid #e2e2e2; border-radius: 5px; word-break:break-all;}
.txc-red {color:#f41100;}

/*근로계약서 작성*/
.approval-group h2 {padding: 30px 24px 20px; font-size: 18px; font-weight: 700; color: #050505;}
.approval-group .input-wrap li {position: relative;}
.approval-group .input-wrap label {opacity: 1;}
.approval-group .input-wrap .unit {position: absolute; top: 29px; right: 5px; font-size: 18px; color: #050505;}
.approval-group .input-wrap.staff-select li, .approval-group .input-wrap.work-type li {padding: 0; margin: 0;}
.approval-group .input-wrap.staff-select li .ui-input-text:after {content: ''; position: absolute; top: 10px; right: 0px; display: block; width: 15px; height: 15px; font-size: 0; background: url(../../static/images/icons.png) no-repeat -65px -7px; background-size: 200px auto; z-index: 0;}
.approval-group .input-wrap.staff-select li input {position: relative; z-index: 1;}
.approval-group.set-group {padding:20px 0 15px;position:relative;}
.approval-group.set-group .input-wrap .ui-input-text input {padding:7px 40px 10px 120px;text-align:right;}
.approval-group.set-group  h2 {width:80px;padding:7px 0 10px;position:absolute;left:24px;z-index:2;}

.approval-group .weekday {margin: 0px 20px 20px; overflow: hidden;}
.approval-group .weekday li {float: left; width: 14.2857%;}
.approval-group .weekday li a {display: block; width: 40px; height: 40px; line-height: 40px; margin: 0 auto; border-radius: 100%; border: 1px solid #e2e2e2; text-align: center; font-size: 14px;}
.approval-group .weekday li a:active {background-color: #f5f8f8; font-size: 13px;}
.approval-group .weekday li a.on {border: 1px solid #02cbd3; font-size: 15px; font-weight: 700; color: #02cbd3}

.approval-group .work-time-list {margin-bottom: 40px;}
.approval-group .work-time-list .item {position: relative; margin-bottom: 15px;}
.approval-group .work-time-list .item .week-title {position: absolute; top: 6px; left: 24px; width: 60px; font-size: 15px; color: #333;}
.approval-group .work-time-list .item .input-wrap {padding-left: 30%;overflow: hidden;}
.approval-group .work-time-list .item .input-wrap li {float: left; width: 45%; margin: 0; padding: 0;}
.approval-group .work-time-list .item .input-wrap li.tilde {width: 10%; height: 34px; line-height: 34px; text-align: center;}
.approval-group .work-time-list .item .input-wrap li .ui-input-text {width: 100%;}
.approval-group .work-time-list .item .input-wrap li .ui-input-text:after {top: 5px; width: 20px; height: 20px; background-size: 180px auto; background-position: -29px -2px; z-index: 0;}
.approval-group .work-time-list .item .input-wrap li .ui-input-text:before {content: ':'; position: absolute; top: 3px; left: 55px; display: block;}
.approval-group .work-time-list .item .input-wrap label {display: none;}
.approval-group .work-time-list .item .input-wrap input {position: relative; width: 100%; padding: 5px 25px 8px 5px; font-size: 15px; color: #050505; z-index: 1;}

.approval-group .tab-wrap {padding: 0 24px 20px;}
.approval-group .tab-wrap .tab-menu {position: relative; margin-bottom: 15px; overflow: hidden;}
.approval-group .tab-wrap .tab-menu:before {content: ''; position: absolute; top: 0px; left: 50%; display: block; width: 50px; height: 50px; margin-left: -25px; border: 1px solid #e5e5e5; font: 0/0 a; z-index: 0;}
.approval-group .tab-wrap .tab-menu li {position: relative; float: left; width: 50%; z-index: 1;}
.approval-group .tab-wrap .tab-menu li a {display: block; height: 50px; line-height: 50px; text-align: center; font-size: 15px; border: 1px solid #e5e5e5; background-color: #FFF;}
.approval-group .tab-wrap .tab-menu li:first-child a {border-right: 0 none; border-radius: 5px 0px 0px 5px;}
.approval-group .tab-wrap .tab-menu li:last-child a {border-left: 0 none; border-radius: 0px 5px 5px 0px;}
.approval-group .tab-wrap .tab-menu li a.on {background-color: #02cbd3; color: #FFF; font-weight: 700; border-color: #02cbd3; border-radius: 5px;}
.approval-group .tab-wrap .tab-cont {position: relative;}
.approval-group .tab-wrap .tab-cont > div {display: none; font-size: 13px;}
.approval-group .tab-wrap .tab-cont > div.on {display: block;}
.approval-group .tab-wrap .tab-cont h3 {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0);}
.approval-group .tab-wrap .tab-cont .tab2-2 .input-wrap {padding: 0 0 15px 0; font-size: 0;}
.approval-group .tab-wrap .tab-cont .tab2-2 .input-wrap li {display: inline-block; vertical-align: middle; padding: 0; margin: 0; font-size: 15px; color: #333;}
.approval-group .tab-wrap .tab-cont .tab2-2 .input-wrap .rest-title {width: 25%; height: 40px; line-height: 40px;}
.approval-group .tab-wrap .tab-cont .tab2-2 .input-wrap .select-wrap {position: relative; width: 75%; text-align: right;}
.approval-group .tab-wrap .tab-cont .tab2-2 .input-wrap .select-wrap label {display: none;}
.approval-group .tab-wrap .tab-cont .tab2-2 .input-wrap .select-wrap .ui-input-text {display: inline-block; width: 110px;}
.approval-group .tab-wrap .tab-cont .tab2-2 .input-wrap .select-wrap input {padding: 9px 25px 9px 5px; font-size: 15px; position: relative; z-index: 1;}
.approval-group .tab-wrap .tab-cont .tab2-2 .input-wrap .select-wrap input::placeholder {font-size: 15px;}
.approval-group .tab-wrap .tab-cont .tab2-2 .input-wrap .select-wrap .line {position: absolute; right: 0; bottom: 0; width: 110px;}
.approval-group .rest-time-list .item {position: relative; margin-bottom: 15px;}
.approval-group .rest-time-list .item .input-wrap {padding:0 40px 15px 0; overflow: hidden;}
.approval-group .rest-time-list .item .input-wrap li {float: left; width: 45%; margin: 0; padding: 0;}
.approval-group .rest-time-list .item .input-wrap li.tilde {width: 10%; height: 34px; line-height: 34px; text-align: center;}
.approval-group .rest-time-list .item .input-wrap li .ui-input-text {width: 100%;}
.approval-group .rest-time-list .item .input-wrap li .ui-input-text:after {top: 5px; width: 20px; height: 20px; background-size: 180px auto; background-position: -29px -2px; z-index: 0;}
.approval-group .rest-time-list .item .input-wrap li .ui-input-text:before {content: ':'; position: absolute; top: 3px; left: 55px; display: block;}
.approval-group .rest-time-list .item .input-wrap label {display: none;}
.approval-group .rest-time-list .item .input-wrap input {position: relative; width: 100%; padding: 5px 25px 8px 5px; font-size: 15px; color: #050505; z-index: 1;}
.approval-group .rest-time-list .item a {position:absolute;top:6px;right:0;width:22px;height:22px;}
.approval-group .rest-time-list .item a.btn-rest-add {background:url(../../static/images/icons.png) no-repeat -45px -220px;background-size:200px auto;}
.approval-group .rest-time-list .item a.btn-rest-del {border-radius:50%;border:2px solid #555;}
.approval-group .rest-time-list .item a.btn-rest-del:before {content:'';display:block;width:12px;height:2px;background-color:#555;position:absolute;left:3px;top:8px;}

.electro-approval-wrap.staff-wrap .important {margin: 20px 20px; padding: 10px; font-size: 15px; color: #f41100; border: 2px solid #fe847b; text-align: center;}
.electro-approval-wrap.staff-wrap .staff-group .input-wrap label {opacity: 0;}
.electro-approval-wrap.staff-wrap .staff-group .input-wrap label.on,
.electro-approval-wrap.staff-wrap .staff-group .input-wrap label.view {opacity: 1;}
.electro-approval-wrap.staff-wrap .staff-group .input-wrap label.view {opacity: 1;}
.electro-approval-wrap.staff-wrap .btn-wrap {position: relative; bottom: inherit; width: auto; margin: 40px 24px 0px;}
.electro-approval-wrap.staff-wrap .btn-wrap a {height: 50px; line-height: 50px; font-size: 16px; border-radius: 5px;}
.electro-approval-wrap.staff-wrap .btn-wrap a:active {font-size: 15px;}
.electro-approval-wrap.staff-wrap .btn-wrap a.off {color: #afafb2; background-color: #f1f2f5; font-size: 16px;}
.electro-approval-wrap.staff-wrap .layer-bottom-btn {position: relative; bottom: inherit; padding-top: 30px;}

.approval-group.insurance-group .select-item-wrap {margin: 0 24px; overflow: hidden;}
.approval-group.insurance-group .select-item-wrap li {float: left; width: 50%; margin-bottom: 10px;}
.approval-group.insurance-group .select-item-wrap li a {display: block; height: 40px; line-height: 40px; font-size: 15px; border-radius: 40px; border: 1px solid #e2e2e2; text-align: center;}
.approval-group.insurance-group .select-item-wrap li a.on {border: 1px solid #02cbd3; color: #02cbd3; font-weight: 700;}
.approval-group.insurance-group .select-item-wrap li:nth-child(odd) a {margin-right: 5px;}
.approval-group.insurance-group .select-item-wrap li:nth-child(even) a {margin-left: 5px;}
.approval-group.insurance-group .desc {margin: 10px 24px 0px; font-size: 14px;}

.approval-group.agree-wrap {padding-top: 0;}
.approval-group.agree-wrap h2 {padding-left:0;padding-right:0;}
#electro-approval-contract .electro-approval-wrap {padding-bottom: 0px;}
#electro-approval-contract .btn-wrap {position: relative; bottom: inherit;}
#electro-approval-staff-contract-1 .electro-approval-wrap,
#electro-approval-staff-contract-2 .electro-approval-wrap,
#electro-approval-staff-contract-3 .electro-approval-wrap {padding-bottom: 40px;}

.approval-work-group h2 {padding: 30px 24px 20px; font-size: 18px; font-weight: 700; color: #050505;}

.approval-group.group-payment .input-wrap {padding:0;}
.approval-group.group-payment .extrapay-list h4 {font-size:14px;color:#555;}
.approval-group.group-payment .extrapay-list .item {position:relative;}
.approval-group.group-payment .extrapay-list .item .pay-title {position: absolute;top: 9px;left: 0;width: 120px;font-size: 18px;color: #333;}
.approval-group.group-payment .extrapay-list .item .input-wrap {padding-left:50%;overflow:hidden;}
.approval-group.group-payment .extrapay-list .item .input-wrap > li {padding:0;}
.approval-group.group-payment .extrapay-list .item .input-wrap .ui-input-text input {padding-right:24px;text-align:right;}
.approval-group.group-payment .extrapay-list .item .input-wrap label {display:none;opacity:0;}
.approval-group.group-payment .extrapay-list .item .input-wrap .unit {top:8px;}
.approval-group.group-payment .extrapay-list .item .view-detail {display:inline-block;width:24px;height:24px;text-indent:100%;white-space:nowrap;overflow:hidden;background:url(../../static/images/icons.png) no-repeat -89px -114px;background-size: 200px auto;vertical-align:top;}
.approval-group.group-payment .extrapay-list.total {margin:20px 0;border:1px solid #e2e2e2;}
.approval-group.group-payment .extrapay-list.total .item.total {padding:16px 16px 0;margin-bottom:16px;border-bottom:1px solid #e2e2e2;background-color:#f5f5f5;}
.approval-group.group-payment .extrapay-list.total .item.total .pay-title {margin-bottom:16px;font-size:18px;font-weight:700;color:#050505;top:25px;}
.approval-group.group-payment .extrapay-list.total .item.total .line {opacity:0;}
.approval-group.group-payment .extrapay-list.total .item.total input,
.approval-group.group-payment .extrapay-list.total .item.total .unit {font-weight: 700;color: #050505;}
.approval-group.group-payment .extrapay-list.total .item.total .ui-body-inherit {background-color:transparent;}
.approval-group.group-payment .extrapay-list.total .item.fix .input-wrap input {padding-right:44px;}
.approval-group.group-payment .extrapay-list.total .item {padding:0 16px;}
.approval-group.group-payment .extrapay-list.total .item .pay-title {left:16px;top:9px;}

/* 투썸 : 근로계약서 작성 추가 */
.approval-group.tt-sub {position:relative;}
.approval-group.tt-sub .input-wrap {padding-top:30px;padding-bottom:20px;}
.approval-group.tt-sub .input-wrap li {padding:0;margin:0;}
.approval-group.tt-sub .input-wrap li input {padding-left:30%;padding-right:36px;text-align:right;}
.approval-group.tt-sub h2 {position:absolute;left:24px;top:37px;z-index:1;padding:0;}
.group-contract {margin-top:-15px;}
.date-list {position:relative;}
.date-list .date-title {position:absolute;left:24px;font-size:14px;}
.date-list .input-wrap:after {content:'';display:block;clear:both;}
.date-list .input-wrap li {float:left;}
.date-list .input-wrap li.select-wrap {width:calc((100% - 40px) / 2);}
.date-list .input-wrap li.select-wrap input {padding-right:30px;}
.date-list .input-wrap .select-wrap .ui-input-text:after {background-position:-88px -219px;opacity:0.4;}
.date-list .input-wrap li:last-of-type {width:calc((100% - 40px) / 2);}
.date-list .input-wrap li.tilde {width:40px;height:63px;border-bottom:1px solid #ddd;font-size:18px;line-height:2;text-align:center;}
.approval-group.group-payment.tt-payment .input-wrap {padding:0 24px;}
.approval-group.group-payment.tt-payment .input-wrap li {margin-bottom:7px;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money li {padding-left:50%;padding-top:0;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money label {position:absolute;top:10px;left:0;font-size:15px;color:#333;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money input {padding-right:24px;padding-top:10px;padding-bottom:7px;font-size:15px;text-align:right;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money .unit {top:10px;font-size:15px;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money .item {padding-top:0;margin-bottom:0;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money .item .ui-checkbox {text-align:right;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money .item .ui-checkbox input {position:absolute;left:45px;top:15px;display:none;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money .item label {padding: 5px 0 5px 34px; font-size: 15px; color: #333; position: relative;left:auto;top:auto;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money .item label.ui-btn.ui-checkbox-off:after,
.approval-group.group-payment.tt-payment .input-wrap.tt-money .item label.ui-btn.ui-checkbox-on:after {width: 22px; height: 22px; left: 0; top: 13px; border-radius: 4px; background: url(../../static/images/icons.png) no-repeat; background-size: 200px auto; z-index: 2;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money .item label.ui-btn.ui-checkbox-off:after {border: 1px solid #d4d4d4; background-color: #FFF; background-position: -62px -36px;}
.approval-group.group-payment.tt-payment .input-wrap.tt-money .item label.ui-btn.ui-checkbox-on:after {border: none; background-color: #02cbd3; background-position: -33px -35px;}

.approval-group.group-payment.tt-payment .extrapay-list h4 {padding:0 24px;color:#b2b2b2;}
.approval-group.group-payment.tt-payment .extrapay-list .item .pay-title {left:24px;top:10px;font-size:15px;}
.approval-group.group-payment.tt-payment .extrapay-list .item .input-wrap input {font-size:15px;padding-top:10px;padding-bottom:7px;}
.approval-group.group-payment.tt-payment .extrapay-list .item .input-wrap .unit {top:10px;font-size:15px;}
.approval-group.group-payment.tt-payment .pay-list .item {position:relative;}
.approval-group.group-payment.tt-payment .pay-list .item .pay-title {position: absolute;top: 8px;left: 24px;width: calc(50% - 24px);font-size: 15px;color: #333;}
.approval-group.group-payment.tt-payment .pay-list .item .input-wrap {padding-left:50%;overflow:hidden;}
.approval-group.group-payment.tt-payment .pay-list .item .input-wrap > li {padding:0;}
.approval-group.group-payment.tt-payment .pay-list .item .input-wrap li:first-of-type input {padding-right:40px;}
.approval-group.group-payment.tt-payment .pay-list .item .input-wrap .ui-input-text input {padding-right:24px;font-size:15px;text-align:right;}
.approval-group.group-payment.tt-payment .pay-list .item .input-wrap label {display:none;opacity:0;}
.approval-group.group-payment.tt-payment .pay-list .item .input-wrap .unit {top:8px;font-size:15px;}
.approval-group.group-payment.tt-payment .pay-list .item.item-pertime {padding:0 24px;margin:4px 0 10px;}
.approval-group.group-payment.tt-payment .pay-list .item.item-pertime .item-inner {padding:9px 16px;background-color:#f5f5f5;text-align:right;}
.approval-group.group-payment.tt-payment .pay-list .item.item-pertime .item-inner .pay-title,
.approval-group.group-payment.tt-payment .pay-list .item.item-pertime .item-inner span {font-size:15px;color:#333;}
.approval-group.group-payment.tt-payment .pay-list .item.item-pertime .item-inner .pay-title {top:10px;padding-left:16px;text-align:left;}
.approval-group.group-payment.tt-payment .pay-total {padding:0 24px;margin-top:13px;}
.approval-group.group-payment.tt-payment .pay-total .total-inner {position:relative;padding:12px 6px 0 50%;border-top:2px solid #555;text-align:right;}
.approval-group.group-payment.tt-payment .pay-total .total-inner span {font-size:15px;font-weight:700;color:#333;}
.approval-group.group-payment.tt-payment .pay-total .total-inner span em {margin-right:7px;}
.approval-group.group-payment.tt-payment .pay-total .total-inner .pay-title {position:absolute;left:0;top:12px;font-size:15px;font-weight:700;color:#333;}

.approval-group.tt-weekday .work-time-list .item .input-wrap {padding-left:30%;}
.approval-group.tt-weekday .work-time-list .item .input-wrap li .ui-input-text:before {left:55px;}

/*근로계약서 서명*/
.approval-group .contract-list {border-top: 1px solid #e2e2e2; padding: 30px 24px 0px}
.approval-group .contract-list li {margin-bottom: 10px;}
.approval-group .contract-list li a {position: relative; display: block; height: 60px; line-height: 60px; padding: 0 25px; font-size: 15px; color: #050505; border: 1px solid #e2e2e2; border-radius: 4px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.approval-group .contract-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f5f8f8; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.approval-group .contract-list li a:active:before,
.approval-group .contract-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.approval-group .contract-list li a .check,
.approval-group .contract-list li a .view {position: absolute; top: 50%; text-indent: -99999px; background-image: url(../../static/images/icons.png); background-repeat: no-repeat;}
.approval-group .contract-list li a .check {width: 32px; height: 32px; right: 16px; margin-top: -16px; background-color: #e2e2e2; background-position:  -69px -48px; background-size: 160px auto; border-radius: 100%;}
.approval-group .contract-list li a .check.on {background-color: #02cbd3;}
.approval-group .contract-list li a .view {width: 23px; height: 16px; right: 20px; margin-top: -8px; background-position:  -92px -7px; background-size: 200px auto;}
.approval-group .finish-text {padding: 10px 24px; text-align: center; font-size: 12px;}
#electro-approval-contract-sign .header-fix .btn-modify {position: absolute; top: 10px; right: 15px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat 0px -350px; background-size: 200px auto;}
#electro-approval-contract-sign .header-fix .btn-modify:active {background-size: 180px auto; background-position: 2px -314px;}
#electro-approval-contract-sign .approval-group {padding-bottom: 50px;}
#electro-approval-contract-sign2 {background-color: #f5f5f5;}
#electro-approval-contract-sign2 .place-wrap.staff-wrap .contract-wrap {margin-bottom: 75px;}
.btn-wrap .btn-email-send.off {color: #afafb2; background-color: #f1f2f5;}
#electro-approval-contract-sign3 {padding-bottom:64px;background-color: #f5f5f5;}
#electro-approval-contract-sign3 .contract-wrap .contract-box {font-size:14px;line-height:1.6;}
#electro-approval-contract-sign3 .contract-wrap .contract-box .title {margin:6px 0 12px;font-size:17px;text-align:center;}
#electro-approval-contract-sign3 .contract-wrap .contract-box .contract-para {padding:20px 0;}
#electro-approval-contract-sign3 .contract-wrap .contract-box .contract-para .subtit {padding-bottom:12px;font-weight:700;}
#electro-approval-contract-sign3 .contract-lst li {padding-left:18px;margin-bottom:4px;position:relative;}
#electro-approval-contract-sign3 .contract-lst li em {position:absolute;left:0;top:-2px;}
#electro-approval-contract-sign3 .contract-lst li.bloc2 {padding-left:26px;}
#electro-approval-contract-sign3 .contract-lst li.bloc2 em {left:16px;}
#electro-approval-contract-sign3 .contract-wrap .contract-box .contract-para p + .contract-lst {margin-top:8px;}
#electro-approval-contract-sign3 .contract-wrap .contract-box .contract-sign .subtit {padding-left:0;}
#electro-approval-contract-sign3 .contract-wrap .contract-box .contract-sign .sign-area {position:absolute;right:0;}
#electro-approval-contract-sign3 .contract-wrap .contract-box .contract-sign span {padding-left:62px;position:relative;}
#electro-approval-contract-sign3 .contract-wrap .contract-box .contract-sign span em {display:block;width:58px;position:absolute;left:0;top:0;}
#electro-approval-contract-sign3 .agree-table th,
#electro-approval-contract-sign3 .agree-table td {font-size:13px;}
#electro-approval-contract-sign3 .agree-table .company-name {display:inline-block;position:relative;z-index:1;}
#electro-approval-contract-sign3 .agree-table .company-name:after {content:'';display:block;width:24px;height:24px;background:url(../../static/images/stamp-freshway.png) no-repeat 0 0;background-size:100% auto;z-index:-1;position:absolute;right:-10px;top:18px;}
#electro-approval-contract-sign3 .agree-table .txa-r {text-align:right;}
#electro-approval-contract-sign3 .agree-table b {font-weight:700;}
#electro-approval-contract-sign3 .btn-electro-sign {display:inline-block;color:#02cbd3;font-weight:500;text-decoration:underline;cursor:pointer;}
#electro-approval-contract-sign3 .btn-electro-sign.on {padding:1px 4px;border-radius:2px;font-size:12px;color:#fff;text-decoration:none;background-color:#02cbd3;pointer-events:none;}
#electro-approval-contract-sign3 .contract-agree {padding:16px;margin:20px 0;border:1px solid #ddd;background-color:#f5f5f5;}
#electro-approval-contract-sign3 .contract-agree .tit {margin-bottom:20px;font-weight:700;color:#050505;}
#electro-approval-contract-sign3 .contract-agree .contract-check-wrap input[type="checkbox"] {display: none;}
#electro-approval-contract-sign3 .contract-agree .contract-check-wrap input {left: 3px; top: 17px; background-color: transparent;}
#electro-approval-contract-sign3 .contract-agree .contract-check-wrap label {padding: 5px 0 5px 30px; font-size:14px; position: relative; background-color:transparent;}
#electro-approval-contract-sign3 .contract-agree .contract-check-wrap label.ui-btn.ui-checkbox-off:after,
#electro-approval-contract-sign3 .contract-agree .contract-check-wrap label.ui-btn.ui-checkbox-on:after {width: 20px; height: 20px; left: 0; top: 13px; border-radius: 25px; background: url(../../static/images/icons.png) no-repeat; background-size: 150px auto; z-index: 2;}
#electro-approval-contract-sign3 .contract-agree .contract-check-wrap label.ui-btn.ui-checkbox-off:after {border: 1px solid #CCC; background-color: #FFF; background-position: -66px -25px;}
#electro-approval-contract-sign3 .contract-agree .contract-check-wrap label.ui-btn.ui-checkbox-on:after {border: none; background-color: #02cbd3; background-position: -23px -24px;}
#electro-approval-contract-sign3 .contract-agree .contract-check-wrap p {padding-left:30px;margin-top:-12px;font-size:12px;color:#b2b2b2;}
#electro-approval-contract-sign3 .contract-agree .contract-check-wrap + .contract-check-wrap {margin-top:20px;}

#electro-approval-contract-signAdd {padding-bottom:64px;background-color: #f5f5f5;}
#electro-approval-contract-signAdd .contract-wrap .contract-box {font-size:14px;line-height:1.6;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .title {margin:6px 0 12px;font-size:17px;text-align:center;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-para {padding:20px 0;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-para .subtit {padding-bottom:12px;font-weight:700;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-para .subtit2 {padding-bottom:12px;font-weight:500;text-align:center;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-para p b {font-weight:500;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-para p.txa-c {text-align:center;}
#electro-approval-contract-signAdd .contract-lst li {padding-left:18px;margin-bottom:4px;position:relative;}
#electro-approval-contract-signAdd .contract-lst li em {position:absolute;left:0;top:0;}
#electro-approval-contract-signAdd .contract-lst li b {font-weight:500;}
#electro-approval-contract-signAdd .contract-lst2 li {padding-left:78px;margin-bottom:4px;position:relative;}
#electro-approval-contract-signAdd .contract-lst2 li em {position:absolute;left:0;top:0;}
#electro-approval-contract-signAdd .agree-table th,
#electro-approval-contract-signAdd .agree-table td {font-size:13px;}
#electro-approval-contract-signAdd .contract-agree {padding:12px 16px 4px;margin:20px 0;border:1px solid #ddd;background-color:#f5f5f5;}
#electro-approval-contract-signAdd .contract-agree .tit {margin-bottom:20px;font-weight:700;color:#050505;}
#electro-approval-contract-signAdd .contract-agree .contract-check-wrap input[type="checkbox"] {display: none;}
#electro-approval-contract-signAdd .contract-agree .contract-check-wrap input {left: 3px; top: 17px; background-color: transparent;}
#electro-approval-contract-signAdd .contract-agree .contract-check-wrap label {padding: 5px 0 5px 30px; font-size:14px; position: relative; background-color:transparent;}
#electro-approval-contract-signAdd .contract-agree .contract-check-wrap label.ui-btn.ui-checkbox-off:after,
#electro-approval-contract-signAdd .contract-agree .contract-check-wrap label.ui-btn.ui-checkbox-on:after {width: 20px; height: 20px; left: 0; top: 13px; border-radius: 25px; background: url(../../static/images/icons.png) no-repeat; background-size: 150px auto; z-index: 2;}
#electro-approval-contract-signAdd .contract-agree .contract-check-wrap label.ui-btn.ui-checkbox-off:after {border: 1px solid #CCC; background-color: #FFF; background-position: -66px -25px;}
#electro-approval-contract-signAdd .contract-agree .contract-check-wrap label.ui-btn.ui-checkbox-on:after {border: none; background-color: #02cbd3; background-position: -23px -24px;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign .contract-employee {padding-top:0;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign .subtit {padding-left:0;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign .sign-area {position:absolute;right:0;top:0;width:36px;height:22px;text-align:center;padding:0;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign .sign-area .sign-my {position:absolute;left:0;top:50%;width:36px;height:36px;vertical-align:top;transform:translateY(-50%);}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign .sign-area .sign-my img {max-width:100%;opacity:0.75;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign span {padding-left:86px;position:relative;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign span em {display:block;width:84px;position:absolute;left:0;top:0;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign span em u {display:inline-block;width:51px;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign.type2 span {padding-left:146px;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign.type2 span em {width:144px;}
#electro-approval-contract-signAdd .contract-wrap .contract-box .contract-sign.type2 span em u {display:inline-block;width:112px;}
/* 투썸 : 계약서 추가 */
#electro-approval-contract-sign3 .contract-wrap.contract-tt .highlight-bg {background-color:#ebd2f6;}
#electro-approval-contract-sign3 .contract-wrap.contract-tt .highlight {background-color:#d1ede7;}
#electro-approval-contract-sign3 .contract-wrap.contract-tt .highlight.point {color:#f41100;}
#electro-approval-contract-sign3 .contract-wrap.contract-tt .contract-box .contract-sign span {padding-left:0;}
#electro-approval-contract-sign3 .contract-wrap.contract-tt .contract-box .contract-sign span em {position:relative;display:inline-block;width:auto;}
#electro-approval-contract-sign3 .contract-wrap.contract-tt .contract-box .contract-sign .contract-employee {padding-top:40px;}
#electro-approval-contract-sign3 .contract-wrap.contract-tt .contract-box .contract-sign .sign-twot {position:absolute;left:120px;top:-7px;width:36px;height:36px;text-indent:1000%;white-space:nowrap;overflow:hidden;background:url(../../static/images/stamp-twot.png) no-repeat 50% 50%;background-size:36px auto;vertical-align:top;}
#electro-approval-contract-sign3 .contract-wrap.contract-tt .contract-box .contract-sign .sign-my-wrap {position:relative;display:inline-block;width:36px;text-align:center;}
#electro-approval-contract-sign3 .contract-wrap.contract-tt .contract-box .contract-sign .sign-my {position:absolute;left:0;top:50%;width:36px;height:36px;vertical-align:top;transform:translateY(-50%);}
#electro-approval-contract-sign3 .contract-wrap.contract-tt .contract-box .contract-sign .sign-my img {max-width:100%;opacity:0.75;}
.contract-wrap .highlgt-g {background-color:#ddd;}

/*전자결재 신청 및 수정, 등록 - 출퇴근/스케줄/휴가/휴일근무 등*/
.electro-approval-wrap .electro-approval-header {position: relative; padding: 10px 24px 30px; border-bottom: 1px solid #e2e2e2; margin-bottom: 8px;}
.electro-approval-wrap .electro-approval-header:after {content: ''; position: absolute; left: 0; bottom: -9px; display: block; width: 100%; height: 8px; font: 0/0 a; background-color: #f5f5f5;}
.electro-approval-wrap .electro-approval-header .header-list li {position: relative; min-height: 45px;}
.electro-approval-wrap .electro-approval-header .header-list li .title {position: absolute; top: 0px; left: 0px; height: 45px; line-height: 45px; font-size: 15px; font-weight: 500; color: #050505;}
.electro-approval-wrap .electro-approval-header .header-list li .name,
.electro-approval-wrap .electro-approval-header .header-list li .name-select,
.electro-approval-wrap .electro-approval-header .header-list li .name-list {padding-left: 60px;}
.electro-approval-wrap .electro-approval-header .header-list li .name {height: 45px; line-height: 45px; font-size: 15px;}
.electro-approval-wrap .electro-approval-header .header-list li .name-select input {position: relative; height: 45px; line-height: 45px; padding: 0px 30px 0px 0px; font-size: 15px; z-index: 1;}
.electro-approval-wrap .electro-approval-header .header-list li .name-select input::placeholder {font-size: 15px;}
.electro-approval-wrap .electro-approval-header .header-list li .name-select .ui-input-text:after {content: ''; position: absolute; top: 13px; right: 0px; display: block; width: 15px; height: 15px; font-size: 0; background: url(../../static/images/icons.png) no-repeat -65px -7px; background-size: 200px auto; z-index: 0;}
.electro-approval-wrap .electro-approval-header .header-list li .name-list {position: relative; padding-top: 7px; margin-top: -45px; z-index: 0;}
.electro-approval-wrap .electro-approval-header .header-list li .name-list p {font-size: 15px; height: 32px; line-height: 32px;}
.electro-approval-wrap .electro-approval-header .header-list li .name-select-link {position: relative; height: 45px; line-height: 45px; padding-left: 60px; font-size: 15px; color: #b2b2b2; z-index: 1;}
.electro-approval-wrap .electro-approval-header .header-list li .name-select-link span {display: block; letter-spacing: -0.06em;}
.electro-approval-wrap .electro-approval-header .header-list li .name-select-link span.off {display: none;}
.electro-approval-wrap .electro-approval-header .header-list li .name-select-btn {position: absolute; top: 10px; right: 0px; display: block; width: 24px; height: 24px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -44px -219px; background-size: 200px auto;}

.electro-approval-wrap .electro-approval-content {padding: 30px 24px;}
.electro-approval-wrap .electro-approval-content .approval-group .item {position: relative; margin-bottom: 15px;}
.electro-approval-wrap .electro-approval-content .approval-group .item dt {position: absolute; left: 0px; width: 160px; min-height: 30px; line-height: 30px; font-size: 15px; font-weight: 700; color: #050505;}
.electro-approval-wrap .electro-approval-content .approval-group .item dd {padding-left: 100px; min-height: 30px; line-height: 30px;}
.electro-approval-wrap .electro-approval-content .approval-group .item dd .input-wrap {padding: 0;}
.electro-approval-wrap .electro-approval-content .approval-group .item dd .input-wrap li {padding: 0; margin: 0;}
.electro-approval-wrap .electro-approval-content .approval-group .item dd .input-wrap label,
.electro-approval-wrap .electro-approval-content .approval-group .item dd .input-wrap .line-focus {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .item dd .input-wrap input {position: relative; display: inline-block; width: 100%; font-size: 15px; font-weight: 700; color: #050505; z-index: 1;}
.electro-approval-wrap .electro-approval-content .approval-group .item dd .input-wrap input::placeholder {font-size: 15px; font-weight: 400;}
.electro-approval-wrap .electro-approval-content .approval-group .item .text {text-align: right; font-size: 15px; font-weight: 700; color: #050505;}
.electro-approval-wrap .electro-approval-content .approval-group .item.date dd .input-wrap .ui-input-text {text-align: right;}
.electro-approval-wrap .electro-approval-content .approval-group .item.date dd .input-wrap .ui-input-text:after {content: ''; position: absolute; top: 3px; right: 0px; display: block; width: 24px; height: 24px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -89px -218px; background-size: 200px auto;}
.electro-approval-wrap .electro-approval-content .approval-group .item.date dd .input-wrap input {width: 130px; padding: 5px 40px 5px 0px; text-align: right;}
.electro-approval-wrap .electro-approval-content .approval-group .item.date dd .input-wrap .line {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .item.time {margin-bottom: 40px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.time dt {font-weight:400;}
.electro-approval-wrap .electro-approval-content .approval-group .item.time:after {content: ''; position: absolute; right: 77px; bottom: -25px; display: block; width: 0px; height: 0px; border-top:6px solid #050505; border-bottom: 6px solid none; border-right: 6px solid transparent; border-left: 6px solid  transparent;}
.electro-approval-wrap .electro-approval-content .approval-group .item.time dd p {margin-bottom: 5px; text-align: right; font-size: 15px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.time dd p .error {color: #f41100; font-weight: 700;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap {padding: 0; text-align: right;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap li {display: inline-block; padding: 0; margin: 0;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap li label {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap li input {width: 74px; min-height: 29px; padding: 0; text-align: center; font-size: 15px; color: #050505; position: relative; z-index: 1;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap li .ui-input-text {min-height: 29px;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap li .ui-input-text:before {content: ':'; position: absolute; top: -1px; left: 52px; display: block; z-index: 0;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap li .line {background-color: #050505;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap li .line .line-focus {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap .tilde {margin-left: 2px;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap .resttime {width: 100%; text-align: right;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap .resttime label {display: inline-block; position: relative; opacity: 1; font-size: 15px; color: #050505; font-weight: 700; letter-spacing: 0.028em;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap .resttime input {width: 75px; text-align: right;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap .resttime .ui-input-text {display: inline-block; width: 75px;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap .resttime .ui-input-text:before {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .item .modify .input-wrap .resttime .line {position: absolute; right: 0px; bottom: 0px; width: 70px;}

.electro-approval-wrap .electro-approval-content .approval-group .item.vacation .modify .input-wrap li input {width: 85px; color: #555; font-weight: 400; text-align: left;}
.electro-approval-wrap .electro-approval-content .approval-group .item.vacation .modify .input-wrap li .ui-input-text:before {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .item.vacation .modify .input-wrap li .ui-input-text:after {content: ''; position: absolute; top: 4px; right: 0px; display: block; width: 20px; height: 20px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -29px -2px; background-size: 180px auto; z-index: 0;}
.electro-approval-wrap .electro-approval-content .approval-group .item.vacation .modify .input-wrap.view li input {text-align: right; font-weight: 700;}
.electro-approval-wrap .electro-approval-content .approval-group .item.vacation .modify .input-wrap.view li .ui-input-text:after {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .item.vacation .modify .input-wrap li .line {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .item .thin {font-weight: 400;}
.electro-approval-wrap .electro-approval-content .approval-group .etc-text {font-size: 13px; line-height: 1.7;}
.electro-approval-wrap .electro-approval-content .approval-group .important-text {padding-left: 20px; font-size: 13px; line-height: 1.7; color:#f41100;}
.electro-approval-wrap .electro-approval-content .approval-group .important-text:before {content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-left: -20px; margin-right: 5px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -39px -510px; background-size: 200px auto;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap {margin-bottom: 8px; background-color: #02cbd3; border-radius: 5px; overflow: hidden;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap li {float: left; position: relative; width: 50%; padding: 10px 0; text-align: center; font-size: 13px; font-weight: 500; color: #FFF;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap li:first-child:after {content: ''; position: absolute; top: 10px; right: 0px; display: block; width: 1px; height: 45px; font: 0/0 a; background-color: #4edbe0;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap li span {display: block; margin-top: 5px; font-size: 16px; font-weight: 700;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-text {padding: 10px 0px; margin: 0px 0 20px 0; text-align: center; font-size: 13px; font-weight: 500; color: #fe847b; background-color: #3d3c4a; border-radius: 5px;}

.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list {margin-bottom: 20px;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li a {position: relative; display: block; overflow: hidden;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li a:before {content: ''; position: absolute; top: 50%; left: 0px; display: block; width: 16px; height: 14px; margin-top: -7px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -44px -355px; background-size: 200px auto;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li a span {display: block; height: 100%; min-height: 38px; line-height: 38px; font-size: 15px; color: #333;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li a .text {float: left; padding-left: 30px;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li a .time {float: right; text-align: right;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li a .time i {display: block; margin-top: -5px;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li a.on span {color: #02cbd3;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li a.on:before {background-position: -74px -355px;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li.one a:before {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li.one a .text {padding-left: 0;}
.electro-approval-wrap .electro-approval-content .approval-group .work-schedule-list li.one a.on span {color: #333;}

.electro-approval-wrap .electro-approval-content .approval-group.tab-wrap h2 {padding: 0 0 20px 0;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-menu {position: relative; margin-bottom: 20px; overflow: hidden;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-menu:before {content: ''; position: absolute; top: 0px; left: 50%; display: block; width: 50px; height: 50px; margin-left: -25px; border: 1px solid #e5e5e5; font: 0/0 a; z-index: 0;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-menu li {position: relative; float: left; width: 50%; z-index: 1;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-menu li a {display: block; height: 50px; line-height: 50px; text-align: center; font-size: 15px; border: 1px solid #e5e5e5; background-color: #FFF;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-menu li:first-child a {border-right: 0 none; border-radius: 5px 0px 0px 5px;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-menu li:last-child a {border-left: 0 none; border-radius: 0px 5px 5px 0px;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-menu li a.on {background-color: #02cbd3; color: #FFF; font-weight: 700; border-color: #02cbd3; border-radius: 5px;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-cont {position: relative;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-cont .content {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .tab-cont .content.on {display: block;}

.electro-approval-wrap .electro-approval-content .approval-group .sub-title {margin-bottom: 15px; font-size: 15px; font-weight: 700; color: #050505;}
.electro-approval-wrap .electro-approval-content .approval-group .change-staff-select {position: relative;}
.electro-approval-wrap .electro-approval-content .approval-group .change-staff-select a {position: absolute; top: -38px; right: 0px; display: block; width: 25px; height: 25px; font-size: 0px; background: url(../../static/images/icons.png) no-repeat -61px -2px; background-size: 200px auto;}
.electro-approval-wrap .electro-approval-content .approval-group .change-staff-select a span {position: absolute; top: 2px; right: 15px; display: block; width: 130px; font-size: 15px;  color: #555;}
.electro-approval-wrap .electro-approval-content .approval-group .change-staff-select a span:before {content:'';width:calc(100% + 14px);height:1px;background:#e2e2e2;position:absolute;left:0;bottom:-6px;}
.electro-approval-wrap .electro-approval-content .approval-group .change-staff-select a span.off {display: none;}
.electro-approval-wrap .electro-approval-content .approval-group .no-select-text {font-size: 15px; color: #b2b2b2;}

.electro-approval-wrap .electro-approval-content .approval-group .textarea-wrap {margin-top: 40px; padding: 10px; background-color: #f4f4f4; border: 1px solid #e2e2e2; border-radius: 5px;}
.electro-approval-wrap .electro-approval-content .approval-group .textarea-wrap textarea {max-height: 70px; height: 70px !important; font-size: 15px; background-color: transparent;}
.electro-approval-wrap .electro-approval-content .approval-group .textarea-wrap textarea::placeholder {font-size: 15px;}

.electro-approval-wrap .layer-bottom-btn {position: absolute; left: 0px; bottom: 30px; width: 100%; text-align: center;}
.electro-approval-wrap .layer-bottom-btn .delete-btn {display: inline-block; width: 56px; height: 56px; text-indent: -99999px; background: #fe847b url(../../static/images/icons.png) no-repeat -73px -242px; background-size: 200px auto; border-radius: 100%;}
.electro-approval-wrap .layer-bottom-btn .delete-btn:active {background-size: 195px auto; background-position: -71px -234px;}
.electro-approval-wrap.pb40 {padding-bottom: 40px;}

#electro-approval-schedule-register .approval-group .item.date dd {padding-left: 140px;}

/* 투썸 전자결재 : 라디오/체크박스 */
.checkbox-wrap .ui-checkbox,
.radio-wrap .ui-radio {padding:0;margin:0;}
.checkbox-wrap input {left: 0px; top: 11px; background-color: transparent; opacity: 0;}
.checkbox-wrap .ui-checkbox label {padding: 5px 0px 5px 28px; font-size: 15px; color:#050505; position: relative;background-color:#fff;}
.checkbox-wrap .ui-checkbox label.ui-btn.ui-checkbox-off:after,
.checkbox-wrap .ui-checkbox label.ui-btn.ui-checkbox-on:after {width: 21px; height: 21px; left: 0; top: 13px; border-radius: 4px; background: url(../../static/images/icons.png) no-repeat; background-size: 200px auto; z-index: 2;}
.checkbox-wrap .ui-checkbox label.ui-btn.ui-checkbox-off:after {border: 1px solid #CCC; background-color: #FFF; background-position: -63px -36px;}
.checkbox-wrap .ui-checkbox label.ui-btn.ui-checkbox-on:after {border: none; background-color: #02cbd3; background-position: -33px -35px;}
.radio-wrap .ui-radio input {left: 0px; top: 11px; background-color: transparent;}
.radio-wrap .ui-radio label {padding: 3px 0px 3px 32px; font-size: 14px; color:#050505; position: relative;background-color:#fff;}
.radio-wrap .ui-radio label.ui-btn.ui-radio-off:after,
.radio-wrap .ui-radio label.ui-btn.ui-radio-on:after {width: 20px; height: 20px; left: 0; top: 11px; border-radius: 50%; background-color:#fff;z-index: 2;}
.radio-wrap .ui-radio label.ui-btn.ui-radio-off:after {border:1px solid #b2b2b2; }
.radio-wrap .ui-radio label.ui-btn.ui-radio-on:after {border:1px solid #02cbd3;}
.radio-wrap .ui-radio label.ui-btn.ui-radio-off:before,
.radio-wrap .ui-radio label.ui-btn.ui-radio-on:before {content:'';width:12px;height:12px;border-radius:50%;position:absolute;left:6px;top:6px;z-index: 3;}
.radio-wrap .ui-radio label.ui-btn.ui-radio-off:before {background-color:#b2b2b2;}
.radio-wrap .ui-radio label.ui-btn.ui-radio-on:before {background-color:#02cbd3;}
/* 투썸 전자결재 추가 */
.electro-approval-wrap .electro-approval-content .approval-group .item.holiday {padding:14px 18px;margin-top:30px;border:1px solid #b2b2b2;border-radius:4px;background-color:#fff;}
.electro-approval-wrap .electro-approval-content .approval-group .item.holiday .radio-wrap {padding:4px 0;line-height:0;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set {margin-bottom:40px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set dt {position:relative;display:block;width:100%;height:auto;line-height:0;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set dt:nth-of-type(2) {margin-top:24px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set dd {position:relative;padding:0;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify .input-wrap {text-align:left;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify .cont {position:absolute;right:0;top:0;font-weight:700;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify {color:#b2b2b2;pointer-events: none;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify.active {margin-bottom:16px;color:#050505;pointer-events: all;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify .input-wrap .label-box {display:inline-block;width:36px;height:22px;margin-right:3px;border:1px solid #e2e2e2;border-radius:4px;background-color:#fff;font-size:12px;font-weight:500;color:#999;text-align:center;line-height:20px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify.active .input-wrap .label-box {border-color:#02cbd3;color:#02cbd3;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify .input-wrap .text,
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify .input-wrap li input,
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify .input-wrap li .ui-input-text:before {color:#b2b2b2;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify .input-wrap .line {background-color:#e2e2e2;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify.active .input-wrap .text {color:#050505;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify.active .input-wrap li input,
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify.active .input-wrap li .ui-input-text:before {color:#02cbd3;}
.electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify.active .input-wrap .line {background-color:#02cbd3;}

.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap.tt-overtime {padding:0;border:1px solid #b2b2b2;border-radius:5px;background-color:#fff;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap.tt-overtime .title {width:100%;border-bottom:1px solid #b2b2b2;font-size:15px;font-weight:700;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap.tt-overtime .title span {display:inline-block;margin:0;padding:0;color:#f41100;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap.tt-overtime .title:after {content:none;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap.tt-overtime li:nth-of-type(2):after  {content: ''; position: absolute; top: 0; right: 0; display: block; width: 1px; height: 100%; font: 0/0 a; background-color: #b2b2b2;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap.tt-overtime li:last-of-type {display:flex; align-items: center; justify-content: center; height:56px;}
.electro-approval-wrap .electro-approval-content .approval-group .overtime-wrap.tt-overtime li {color:#050505;}

.item.tt-vacation:after {content:'';display:block;clear:both;}
.item.tt-vacation dt, .item.tt-vacation dd {position:relative;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation dt {float:left;width:100px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation dd {float:right;padding-left:0;}

.item.tt-vacation.cont dd {width:calc(100% - 100px);}
.item.tt-vacation.cont dd .input-wrap li {margin-bottom:0;}
.item.tt-vacation.cont dd .input-wrap li input {min-height:auto;height:30px;padding:0 30px 0 0;text-align:right;}
.item.tt-vacation.cont dd .input-wrap .select-wrap .ui-input-text:after {top:2px;background-position:-20px 2px;background-size:160px auto;}
.item.tt-vacation.cont dd .input-wrap .line {height:0;}
.item.tt-vacation.time-set dd span {font-weight:700;color:#050505;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.cont {margin-bottom:25px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date {margin-bottom:35px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date dd {width:100%;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date ul:after {content:'';display:block;clear:both;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date ul {float:right;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date ul > li {float:left;height:30px;line-height:30px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .checkbox-wrap {margin-right:14px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .datepicker-wrap {display:inline-block;width:82px;margin-top:4px;vertical-align:top;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .datepicker-wrap label {display:none;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .datepicker-wrap input {min-height:auto;padding:0;border-bottom:1px solid #b2b2b2;font-size:15px;font-weight:700;color:#050505;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .datepicker-wrap input::placeholder {font-size:15px;font-weight:400;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date3 {margin-top:8px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date3 .input-wrap {float:right;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date3 .input-wrap li {float:left;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date3 .input-wrap li .checkbox-wrap {position:relative;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date3 .input-wrap li .checkbox-wrap .ui-checkbox label {display:block;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date3 .input-wrap li .checkbox-wrap .ui-checkbox input {position:absolute;top:16px;left:4px;width:16px;height:16px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date3 .input-wrap li:last-of-type {margin-left:10px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date3 .input-wrap li.select-wrap .ui-input-text:after {background-position:-20px 2px;background-size:160px auto;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date3 .input-wrap li.select-wrap .ui-input-text input {width:80px;height:20px;min-height:auto;padding:0 30px 0 0;border-bottom:1px solid #b2b2b2;text-align:left;line-height:20px;}
.checkbox-wrap.check-breaktime {margin:4px 0 !important;}
.checkbox-wrap.check-breaktime .ui-checkbox label.ui-btn.ui-checkbox-off:after,
.checkbox-wrap.check-breaktime .ui-checkbox label.ui-btn.ui-checkbox-on:after {content:none;}
.checkbox-wrap.check-breaktime .ui-checkbox label {width:64px !important;height:22px;padding:0;border:1px solid #d4d4d4;border-radius:4px;font-size:12px;font-weight:700;color:#d4d4d4;text-align:center;line-height:20px;}
.checkbox-wrap.check-breaktime .ui-checkbox label.ui-btn.ui-checkbox-on {border-color:#02cbd3;color:#02cbd3;}

.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .time {float:right;padding:15px 20px;margin-top:10px;margin-bottom:20px;border-radius:4px;background-color:#f5f5f5;text-align:left;clear:both;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .time span {display:block;margin-bottom:5px;font-size:13px;font-weight:400;color:#555;line-height:1.4;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .time span em {display:inline-block;margin-right:6px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .time span:last-of-type {margin-bottom:0;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .time span.error {color:#f41100;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .important-text {line-height:1.5;clear:both;}

.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item > li {display:block;float:none;text-align:right;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item .sub-item-time {margin-top:8px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item .sub-item-time .input-wrap {float:right;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item .sub-item-time .input-wrap li {float:left;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item .sub-item-time .input-wrap li .checkbox-wrap {position:relative;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item .sub-item-time .input-wrap li .checkbox-wrap .ui-checkbox label {display:block;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item .sub-item-time .input-wrap li .checkbox-wrap .ui-checkbox input {position:absolute;top:16px;left:4px;width:16px;height:16px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item .sub-item-time .input-wrap li:last-of-type {margin-left:10px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item .sub-item-time .input-wrap li.select-wrap .ui-input-text:after {background-position:-20px 2px;background-size:160px auto;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item .sub-item-time .input-wrap li.select-wrap .ui-input-text input {width:80px;height:20px;min-height:auto;padding:0 30px 0 0;border-bottom:1px solid #b2b2b2;text-align:left;line-height:20px;}

/* 휴가 신청 - 대체휴일 신청 */
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item.subst-work li {position:relative;margin-bottom:10px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .sub-item.subst-work .subst-title {margin-right:12px;font-size:15px;font-weight:700;color:#050505;}

/* 휴가신청 - 잔여일자 : 투썸 *//* 20220329 추가 */
.tt-remain {padding: 16px; border-radius: 4px; background-color: #f5f5f5; display: flex; justify-content: space-between; align-items: center;}
.tt-remain .tit {font-size: 14px;color: #050505;margin-right:10px;}
.tt-remain .cont {font-size: 14px;color: #050505;font-weight:700;}

/* 전자결재 - 퇴직 */
#electro-approval-leave .electro-approval-content {border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave dd {padding-left:50%;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave dd .input-wrap input {padding-right:40px;font-weight:400;text-align:right;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-comment dt,
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-comment dd {position:relative;display:block;width:100%;padding:0;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-comment dd .textarea-wrap {margin:0;}
.electro-approval-content.leave {position:relative;border-top:1px solid #e2e2e2;border-bottom:none !important;margin-top:8px;}
.electro-approval-content.leave:after {content: ''; position: absolute; left: 0; top: -9px; display: block; width: 100%; height: 8px; font: 0/0 a; background-color: #f5f5f5;}
.electro-approval-content.leave .contract-list li a {position: relative; display: block; height: 60px; line-height: 60px; padding: 0 25px; font-size: 15px; color: #050505; border: 1px solid #e2e2e2; border-radius: 4px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.electro-approval-content.leave .contract-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f5f8f8; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.electro-approval-content.leave .contract-list li a:active:before,
.electro-approval-content.leave .contract-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.electro-approval-content.leave .contract-list li a .view {position: absolute; top: 50%; width: 23px; height: 16px; right: 20px; margin-top: -8px; background: url(../../static/images/icons.png) no-repeat  -92px -7px; background-size: 200px auto; text-indent: -99999px;}
.electro-approval-content.leave p {margin-top:20px;font-size:12px;text-align:center;}

/* 전자결재 - 간주근로 */
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.otherwork.cont {margin-bottom:30px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.otherwork.cont dt,
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.otherwork.cont dd {float:none;display:block;position:relative;width:100%;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.otherwork.cont dd .input-wrap input {font-weight:400;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.otherwork.cont dd .input-wrap .line-focus {display:block;}
.electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.otherwork.date .time {margin-bottom:0;}
.item.tt-vacation.otherwork.cont dd .input-wrap li input {text-align:left;padding:0;}
.item.tt-vacation.otherwork.cont dd .input-wrap .line {height:1px;}
.item.tt-vacation.otherwork.change-place dd {width:50%;text-align:right}
.item.tt-vacation.otherwork.change-place .place-select {position:relative;padding-right:25px;margin-bottom:10px;border-bottom:1px solid #b2b2b2;text-align:left;}
.item.tt-vacation.otherwork.change-place .place-select .change-place-select a {position: absolute; top: 3px; right: 0px; display: block; width: 25px; height: 25px; font-size: 0px; background: url(../../static/images/icons.png) no-repeat -61px -2px; background-size: 200px auto;}
.item.tt-vacation.otherwork.change-place .name {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

/* 전자결재 - 사직원 작성 */
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info {margin:15px 0 0;border-top:1px solid #e2e2e2;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info:after {content:'';display:block;clear:both;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dt,
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dd {float:left;width:50%;height:35px;position:relative;padding:2px 7px 2px 14px;border:none;border-bottom:1px solid #e2e2e2;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dt {background-color:#f1f2f5;font-size:14px;font-weight:500;color:#555;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dd .input-wrap .datepicker-wrap input {padding:0 0 0 34px;font-size:14px;font-weight:400;color:#555;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dd .input-wrap .datepicker-wrap .ui-input-text:after {content: ''; position: absolute; top: 3px; left: 0px; display: block; width: 24px; height: 24px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -89px -218px; background-size: 200px auto;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dd .input-wrap .datepicker-wrap .ui-input-text:before {content:'';position:absolute;left:32px;bottom:5px;display:block;width:70px;height:1px;background-color:#555;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dd .input-wrap .select-wrap .ui-input-text:after {top:50%;transform:translateY(-50%);background-position:-24px 1px;background-size:170px auto;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dd .input-wrap .select-wrap .ui-input-text {width:100px;height:30px;line-height:30px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dd .input-wrap .select-wrap input {min-height:30px;padding:0 30px 0 0;font-size:15px;font-weight:400;color:#555;vertical-align:top;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dd .input-wrap input::placeholder {font-size:14px;font-weight:400;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-info dd .input-wrap .line {display:none;}
.electro-approval-wrap .electro-approval-content .approval-group .item.leave-comment dt {margin-top:32px;margin-bottom:5px;}
.electro-approval-wrap .electro-approval-content.leave {padding:35px 24px;}
.electro-approval-wrap .electro-approval-content.leave .agree-list li {position: relative;margin-bottom:32px;}
.electro-approval-wrap .electro-approval-content.leave .agree-list li:last-of-type {margin-bottom:0;}
.electro-approval-wrap .electro-approval-content.leave .agree-list .title {height:24px;line-height:24px;margin-bottom:8px;font-size:16px;font-weight:500;color:#050505;}
.electro-approval-wrap .electro-approval-content.leave .agree-list .btn.btn-leave-agree {display:inline-block;height:24px;line-height:22px;padding:0 10px;margin-left:10px;border-radius:12px;border:1px solid #02cbd3;background-color:#fff;font-size:11px;font-weight:500;color:#02cbd3;vertical-align:top;}
.electro-approval-wrap .electro-approval-content.leave .agree-list .btn.btn-leave-agree.checked {background-color:#02cbd3;color:#fff;}
.electro-approval-wrap .electro-approval-content.leave .agree-list .cont.agree-cont {max-height:90px;padding:14px;border:1px solid #e2e2e2;border-radius:5px;background-color:#fff;overflow-y:auto;overflow-x:hidden;font-size:12px;line-height:1.3;}
.electro-approval-wrap .electro-approval-content.leave .agree-list li .ui-checkbox {height:24px;margin:0;}
.electro-approval-wrap .electro-approval-content.leave .agree-list li .ui-checkbox input {left:2px;top:12px;opacity:0;}
.electro-approval-wrap .electro-approval-content.leave .agree-list li .ui-checkbox label {height:24px;line-height:24px;padding: 0 0 0 30px;font-size:16px;font-weight:500;color:#050505;}
.electro-approval-wrap .electro-approval-content.leave .agree-list li .ui-checkbox label.ui-checkbox-off:after,
.electro-approval-wrap .electro-approval-content.leave .agree-list li .ui-checkbox label.ui-checkbox-on:after {margin: 0; left: 0px; top: 0; width: 24px; height: 24px; background: #fff url(../../static/images/icons.png) no-repeat; background-size: 200px auto;}
.electro-approval-wrap .electro-approval-content.leave .agree-list li .ui-checkbox label.ui-checkbox-off:after {background-position: -88px -34px;}
.electro-approval-wrap .electro-approval-content.leave .agree-list li .ui-checkbox label.ui-checkbox-on:after {background-position: -117px -34px;}
.electro-approval-wrap .electro-approval-content.leave .agree-list .cont .textarea-wrap {margin-top: 12px; padding: 10px; background-color: #f4f4f4; border: 1px solid #e2e2e2; border-radius: 5px;}
.electro-approval-wrap .electro-approval-content.leave .agree-list .cont .textarea-wrap textarea {max-height: 70px; height: 70px !important; font-size: 15px; background-color: transparent;}
.electro-approval-wrap .electro-approval-content.leave .agree-list .cont .textarea-wrap textarea::placeholder {font-size: 15px;}

/* 전자결재 - 휴일근무 취소 */
.electro-approval-wrap .electro-approval-content .approval-group .item.wh-cancel .cont-list li {position: relative; padding: 10px 0; overflow: hidden;}
.electro-approval-wrap .electro-approval-content .approval-group .item.wh-cancel .cont-list li > div {position: relative; font-size: 15px;}
.electro-approval-wrap .electro-approval-content .approval-group .item.wh-cancel .cont-list li .title {float: left;}
.electro-approval-wrap .electro-approval-content .approval-group .item.wh-cancel .cont-list li .cont {float: right; text-align: right;}
.electro-approval-wrap .electro-approval-content .approval-group .item.wh-cancel .cont-list li .cont span {display: block;}
.electro-approval-wrap .electro-approval-content .approval-group .item.wh-cancel .cont-list li .strong {font-weight: 700; color: #050505;}
.electro-approval-wrap .electro-approval-content .approval-group .item.wh-cancel .box-text {padding:17px 20px;margin-top:20px;border:1px solid #b2b2b2;border-radius:4px;background-color:#fff;font-size:13px;color:#555;text-align:center;}
.electro-approval-wrap .electro-approval-content .approval-group .item.wh-cancel .important-text {padding-left: 20px; font-size: 13px; line-height: 1.7; color:#f41100;}
.electro-approval-wrap .electro-approval-content .approval-group .item.wh-cancel .important-text:before {content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-left: -20px; margin-right: 5px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -39px -510px; background-size: 200px auto;}

/*급여 정산 및 내역*/
.pay-settlement-wrap  {padding-bottom: 50px;}
.pay-settlement-wrap .pay-settlement-header {position: fixed; width: 100%; background-color: #FFF; z-index: 10;}
.pay-settlement-wrap .pay-settlement-header .input-wrap {height: 80px; padding: 11px 24px;}
.pay-settlement-wrap .pay-settlement-header .input-wrap li {display: inline-block; padding: 0; margin: 0;}
.pay-settlement-wrap .pay-settlement-header .input-wrap li.head-name {height: 58px; line-height: 58px; padding-right: 10px; font-size: 24px; font-weight: 700; color: #050505;}
.pay-settlement-wrap .pay-settlement-header .input-wrap li .ui-input-text:after {content: ''; position: absolute; top: 23px; right: 0px; display: block; width: 18px; height: 12px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -135px -119px; background-size: 200px auto; z-index: 0;}
.pay-settlement-wrap .pay-settlement-header .input-wrap li .ui-input-text input {position: relative; width: 145px; height: 58px; line-height: 58px; padding: 0px; font-size: 24px; color: #050505; font-family: 'Roboto'; font-weight: 700; z-index: 1;}

.pay-settlement-wrap .pay-settlement-content {position: relative; padding-top: 80px;}
.pay-settlement-wrap .tab-menu {position: relative; overflow: hidden; background-color: #FFF; z-index: 2;}
.pay-settlement-wrap .tab-menu li {float: left; width: 50%; text-align: center; border-bottom: 1px solid #eaebf0;}
.pay-settlement-wrap .tab-menu li  a {position: relative; display: inline-block; height: 40px; padding: 0px 5px; line-height: 35px; font-size: 15px; color: #b2b2b2;}
.pay-settlement-wrap .tab-menu li  a:active {font-size: 14px;}
.pay-settlement-wrap .tab-menu li  a.on {font-weight: 700; color: #050505;}
.pay-settlement-wrap .tab-menu li  a.on:after {content: ''; position: absolute; left: 0; bottom: 0; display: block; height: 3px; font: 0/0 a; background-color: #02cbd3; border-radius: 3px; animation-name: widthSlide; animation-delay: 0.1s; animation-duration: 0.5s; animation-fill-mode: both;}
.pay-settlement-wrap .pay-content-no {position: relative; margin-top: 50px; text-align: center; font-size: 16px;}
.pay-settlement-wrap .pay-content-no:before {content: ''; display: block; width: 40px; height: 50px; margin: 0 auto 20px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -37px -547px; background-size: 200px auto;}
.pay-settlement-wrap .tab-cont .content {display: none;}
.pay-settlement-wrap .tab-cont .content.on {display: block;}
.pay-settlement-wrap .tab-cont .content.tab1-2:before {content: ''; position: fixed; top: 0px; left: 0px; right: 0; bottom: 0px; background-color: #FFF;}
.pay-settlement-wrap .pay-group-wrap {position: relative; background-color: #FFF; z-index: 1;}

.pay-settlement-wrap .pay-group-wrap.graph {padding: 40px 0px; background-color: #363d44;}
.pay-settlement-wrap .pay-group-wrap.graph #chart-area {max-width: 500px; margin: 0 auto;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list {margin: 30px 24px 0px;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list li {margin: 10px 8px; overflow: hidden;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list li:last-child {margin-bottom: 0;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list li p {font-size: 15px; color: #FFF;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list li .title {float: left;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list li .title:before {content: ''; display: inline-block; vertical-align: 2px; width: 8px; height: 8px; margin-right: 10px; font: 0/0 a; border-radius: 100%;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list li .money {float: right;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list .all {margin: 10px 0px 20px;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list .all p {font-size: 18px; font-weight: 500;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list .all .title:before {display: none;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list .item1 .title:before {background-color: #03f0e8;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list .item2 .title:before {background-color: #57baff;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list .item3 .title:before {background-color: #6ae2b7;}
.pay-settlement-wrap .pay-group-wrap.graph .graph-value-list .item4 .title:before {background-color: #e3b5f6;}
.pay-settlement-wrap .pay-group-wrap.graph #chartjs-tooltip {position: absolute; opacity: 1; background: rgba(0, 0, 0, .7); color: white; font-size: 11px; border-radius: 3px; -webkit-transition: all .1s ease; transition: all .1s ease; pointer-events: none; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
.pay-settlement-wrap .pay-settlement-content .pay-group-wrap.graph .chartjs-tooltip-key {display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 100%;}

.pay-settlement-wrap .pay-group-wrap .pay-group {position: relative; margin-bottom: 8px; padding: 35px 24px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;}
.pay-settlement-wrap .pay-group-wrap .pay-group:after {content: ''; position: absolute; left: 0; bottom: -9px; display: block; width: 100%; height: 8px; font: 0/0 a; background-color: #f5f5f5;}
.pay-settlement-wrap .pay-group-wrap .pay-group h3 {padding-bottom: 30px; line-height: 1.5; font-size: 18px; font-weight: 700; color: #050505;}
.pay-settlement-wrap .pay-group-wrap .pay-group h3 span {display: block; font-size: 14px; font-weight: 400;}
.pay-settlement-wrap .pay-group-wrap .pay-group .all-money {position: absolute; top: 36px; right: 24px; font-size: 16px; font-weight: 700; color: #050505;}

.pay-settlement-wrap .pay-group-wrap .pay-list li {position: relative; padding: 0px 0px 30px 40px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li:last-child {padding-bottom: 0;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico {position: absolute; top: 0px; left: 0px; width: 28px; height: 28px; text-indent: -99999px; background: url(../../static/images/icons2.png) no-repeat; background-size: 200px auto;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .title {position: relative; height: 28px; line-height: 28px; margin-bottom: 5px; font-size: 16px; font-weight: 500; color: #050505;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .btn-etc-pay {display: inline-block; vertical-align: -5px; margin-left: 2px; width: 18px; height: 18px; text-indent: -99999px; border-radius: 100%; background: url(../../static/images/icons.png) no-repeat -4px -579px; background-size: 200px auto;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .money {font-size: 13px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .money span {display: inline-block; vertical-align: middle; position: relative; padding-right: 15px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .money span:after {content: ''; position: absolute; top: 3px; right: 6px; display: block; width: 1px; height: 10px; font: 0/0 a; background-color: #b2b2b2;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico01 {background-position: -6px -6px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico02 {background-position: -45px -6px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico03 {background-position: -86px -6px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico04 {background-position: -126px -6px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico05 {background-position: -166px -6px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico06 {background-position: -6px -46px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico07 {background-position: -45px -46px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico08 {background-position: -86px -46px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico09 {background-position: -126px -46px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico10 {background-position: -166px -46px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico11 {background-position: -6px -87px;}
.pay-settlement-wrap .pay-group-wrap .pay-list li .ico12 {background-position: -45px -87px;}

.pay-settlement-wrap .pay-group-wrap .pay-list2 {margin-bottom: 40px;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li {position: relative; height: 54px; overflow: hidden;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .photo {position: absolute; left: 0px; top: 7px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .name {position: relative; display: inline-block; padding-left: 50px; height: 54px; line-height: 54px; font-size: 15px; font-weight: 500; color: #050505;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .name .name-overlap {position: absolute; left: 2px; bottom: 0px;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .name i {display: inline-block; vertical-align: 2px; height: 16px; line-height: 16px; padding: 1px 3px; margin-left: 3px; font-size: 10px; font-weight: 700; color: #FFF; background-color: #02cbd3; border-radius: 3px;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .pay {float: right; height: 54px; line-height: 54px; text-align: right; font-size: 15px;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .register {position: absolute; top: 13px; right: 0px;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .register .ui-input-text {width: 90px; height: 28px;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .register .ui-input-text:after {content: '원'; position: absolute; top: 5px; right: 2px; display: block; font-size: 13px;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .register .ui-input-text input {min-height: 28px; padding: 0 17px 0 0; text-align: right; font-size: 13px; border-bottom: 1px solid #b2b2b2;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .btn-pay-view {position: relative; display: block; height: 100%; padding: 0px 24px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .btn-pay-view:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f5; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .btn-pay-view:active:before,
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .btn-pay-view:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.pay-settlement-wrap .pay-group-wrap .pay-list2 li .btn-pay-view .photo {left: 24px;}

.pay-settlement-wrap .pay-guide {padding: 20px 24px;}
.pay-settlement-wrap .pay-guide .desc {position: relative; padding: 0px 0px 10px 20px; font-size: 13px; color: #f41100;}
.pay-settlement-wrap .pay-guide .desc:before {content: ''; position: absolute; top: 2px; left: 0px; display: block; width: 15px; height: 15px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -39px -510px; background-size: 200px auto;}

.pay-settlement-wrap .btn-wrap {position: relative; width: auto; margin: 0 24px 40px;}
.pay-settlement-wrap .btn-wrap a {height: 50px; line-height: 50px; font-size: 16px; font-weight: 700; text-align: center; border-radius: 5px;}
.pay-settlement-wrap .btn-wrap a:active {font-size: 15px;}
.pay-settlement-wrap .btn-wrap .btn-confirm {color: #FFF; background-color: #f41100;}
.pay-settlement-wrap .btn-wrap .btn-cancel {color: #f41100; background-color: #FFF; border: 1px solid #f41100;}
.pay-settlement-wrap .btn-wrap .off {color: #afafb2; background-color: #e2e2e2; border: 0 none;}
.pay-settlement-wrap .btn-wrap .off:active {font-size: 16px;}

.pay-settlement-wrap .tab1-2 .pay-group-wrap .pay-list2 {padding-top: 30px;}
#pay-settlement {background-color: #f5f5f5;}

/*기타수당입력*/
.pay-settlement-wrap .pay-group-wrap .pay-etc-header {position: relative; padding: 70px 24px 20px; border-bottom: 8px solid #f5f5f5;}
.pay-settlement-wrap .pay-group-wrap .pay-etc-header:after {content: ''; position: absolute; left: 0px; bottom: 0px; display: block; width: 100%; height: 1px; font: 0/0 a; background-color: #e2e2e2;}
.pay-settlement-wrap .pay-group-wrap .pay-etc-header .title {font-size: 14px; margin-bottom: 5px;}
.pay-settlement-wrap .pay-group-wrap .pay-etc-header .money {position: relative; font-size: 18px; font-weight: 700; color: #050505;}
.pay-settlement-wrap .pay-group-wrap .pay-etc-header .money:after {content: ''; position: absolute; top: -2px; right: 0px; display: block; width: 30px; height: 30px; font: 0/0 a; background: url(../../static/images/icons2.png) no-repeat -5px -165px; background-size: 200px auto;}
.pay-settlement-wrap .pay-group-wrap .pay-etc-content {padding: 30px 24px 0px; border-top: 1px solid #e2e2e2;}

/*급여내역 상세*/
.pay-settlement-wrap.view-wrap .pay-settlement-header .btn-back {position: absolute; top: 26px; left: 10px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat 3px 0px; background-size: 200px auto;}
.pay-settlement-wrap.view-wrap .pay-settlement-header .btn-back:active {background-size: 180px auto; background-position: 5px 1px;}
.pay-settlement-wrap.view-wrap .pay-settlement-header .name {display: inline-block; vertical-align: middle; height: 80px; line-height: 80px; padding-left: 40px; font-size: 23px; font-weight: 700; color: #050505;}
.pay-settlement-wrap.view-wrap .pay-settlement-header .input-wrap {display: inline-block; vertical-align: middle; padding: 11px;}
.pay-settlement-wrap.view-wrap .pay-settlement-header .date {height: 40px; line-height: 40px; padding: 0px 24px; font-size: 13px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;}

.pay-settlement-wrap.view-wrap .pay-settlement-content {padding-top: 119px;}
.pay-settlement-wrap.view-wrap .pay-settlement-content .pay-list3 li {padding: 0px 0px 5px 0px; overflow: hidden;}
.pay-settlement-wrap.view-wrap .pay-settlement-content .pay-list3 .title {float: left;}
.pay-settlement-wrap.view-wrap .pay-settlement-content .pay-list3 .money {float: right; font-size: 16px; text-align: right;}
.pay-settlement-wrap.view-wrap .pay-settlement-content .total {background-color: #363d44;}
.pay-settlement-wrap.view-wrap .pay-settlement-content .total h3 {color: #03f0e8;}
.pay-settlement-wrap.view-wrap .pay-settlement-content .total .all-money {color: #7cfecf;}
.pay-settlement-wrap.view-wrap .pay-settlement-content .total .pay-list3 li p {color: #FFF;}

/* 급여내역 상세 : 투썸용 */
.pay-settlement-wrap.view-wrap .pay-settlement-content.tt-pay {padding-top: 81px;}
.pay-group.pay-info {padding:24px !important;}
.pay-group.pay-info th, .pay-group.pay-info td {padding:10px 10px 9px 16px;border:1px solid #e2e2e2; font-size:14px;text-align:left;}
.pay-group.pay-info th {background-color:#f5f5f5;font-weight:500; color: #050505;}
.pay-list-no {padding: 160px 0px 30px;border-top:1px solid #e2e2e2;font-size:15px;text-align:center;}

#pay-settlement-view .pay-settlement-wrap .pay-settlement-header .input-wrap li .ui-input-text input {position: relative; width: 110px; height: 58px; line-height: 58px; padding: 0px; font-size: 24px; color: #050505; font-family: 'Roboto'; font-weight: 700; z-index: 1;}
#pay-settlement-view .pay-settlement-wrap .pay-settlement-header .input-wrap.pay-select {position:absolute;right:16px;}
#pay-settlement-view .pay-settlement-wrap .pay-settlement-header .input-wrap li.select-wrap .ui-input-text:after {content: ''; position: absolute; top: 17px; right: -10px; display: block; width: 24px; height: 24px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -22px 1px; background-size: 160px auto; z-index: 0;}
#pay-settlement-view .pay-settlement-wrap .pay-settlement-header .input-wrap li.select-wrap .ui-input-text input {position: relative; width: 74px; height: 58px; line-height: 58px; padding: 0 14px 0 0; font-size: 16px; color: #555; font-family: 'Noto Sans KR'; font-weight: 500; text-align:right; z-index: 1;}

/* 20211229 추가 */
.btn-calc-wrap {position:relative;padding-bottom:0 !important;}
.btn-calc-wrap:after {content:'';position:absolute;right:0;top:8px;width: 18px; height: 12px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -135px -119px; background-size: 200px auto;transform: rotate(-180deg);}
.btn-calc-wrap.fold:after {transform: rotate(0deg);}
.calc-tbl-wrap {margin-top:30px;}
.calc-tbl-wrap th, .calc-tbl-wrap td {padding:5px 7px 6px;border:1px solid #e2e2e2;font-size:13px;text-align:center;word-break:break-all;}
.calc-tbl-wrap th {background-color:#f5f5f5;font-weight:500; color: #050505;}
.calc-tbl-wrap .txa-l {text-align:left;}
.calc-tbl-wrap .txa-r {text-align:right;}

/*메뉴 및 설정 - 공통*/
.menu-setting > div {margin-top: 50px; padding-bottom: 85px;}
.menu-setting .menu-setting-wrap {margin-top: 0px; padding: 20px 24px 80px;}
.menu-setting .menu-setting-wrap .more {margin-bottom: 25px; text-align: left; font-size: 24px; font-weight: 700; color: #050505;}
.menu-setting .set-myinfo {position: relative; overflow: hidden; margin-bottom: 20px;}
.menu-setting .set-myinfo .photo {position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.menu-setting .set-myinfo .name,
.menu-setting .set-myinfo .authority {display: inline-block; height: 40px; line-height: 40px;}
.menu-setting .set-myinfo .name {padding-left: 50px; font-size: 18px; font-weight: 500; color: #050505;}
.menu-setting .set-myinfo .name i {display: inline-block; vertical-align: 2px; height: 16px; line-height: 16px; padding: 1px 3px; margin-left: 3px; font-size: 10px; font-weight: 700; color: #FFF; background-color: #02cbd3; border-radius: 3px;}
.menu-setting .set-myinfo .authority {float: right; font-size: 16px;}
.menu-setting .set-operator-change {margin-bottom: 35px;}
.menu-setting .set-operator-change a {position: relative; display: block; padding: 0 15px; border-radius: 5px; background-color: #f5f5f5; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.menu-setting .set-operator-change a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #EEE; border-radius: 5px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.menu-setting .set-operator-change a:active:before,
.menu-setting .set-operator-change a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.menu-setting .set-operator-change a span {display: block; font-size: 13px;}
.menu-setting .set-operator-change a .title {width: 70%; height: 50px; line-height: 50px; color: #050505; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.menu-setting .set-operator-change a .change {position: absolute; top: 10px; right: 15px; height: 30px; line-height: 30px; padding: 0px 10px; background-color: #FFF; border: 1px solid #e2e2e2; border-radius: 30px;}
.menu-setting .set-list {padding: 15px 0px; border-top: 1px solid #e2e2e2;}
.menu-setting .set-list h2 {padding: 10px 5px; font-size: 13px; font-weight: 500; color: #b2b2b2;}
.menu-setting .set-list ul li a {position: relative; display: block; padding: 15px 5px; font-size: 15px; font-weight: 700; color: #050505; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.menu-setting .set-list ul li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f5; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.menu-setting .set-list ul li a:active:before,
.menu-setting .set-list ul li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.menu-setting .set-list ul li a i {display: inline-block; vertical-align: 2px; width: 16px; height: 16px; line-height: 16px; margin-left: 5px; font-size: 10px; color: #FFF; text-align: center; border-radius: 100%; background-color: #f41100;}

.menu-setting .board-list li {border-bottom: 1px solid #e2e2e2;}
.menu-setting .board-list li a,
.menu-setting .board-view-header {display: block; padding: 24px;}
.menu-setting .board-list li a {position: relative; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
.menu-setting .board-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f9f9f9; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.menu-setting .board-list li a:active:before,
.menu-setting .board-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
.menu-setting .board-list li a span,
.menu-setting .board-view-header span {display: block;}
.menu-setting .board-list li a .title,
.menu-setting .board-view-header .title {font-size: 15px; font-weight: 500; color: #050505; margin-bottom: 5px;}
.menu-setting .board-list li a .date,
.menu-setting .board-view-header .date {font-size: 13px;}
.menu-setting .board-list li a .date i,
.menu-setting .board-view-header .date i {display: inline-block; vertical-align: 1px; padding: 2px 5px; margin-left: 7px; font-size: 10px; font-weight: 700; color: #FFF; background-color: #b2b2b2; border-radius: 3px;}
.menu-setting .board-list li.end a {background-color: #f5f5f5;}
.menu-setting .board-list li.end a:before {display: none;}
.menu-setting .board-list li.end a .title,
.menu-setting .board-list li.end a .date {color: #b2b2b2;}
.menu-setting .board-view-header {padding-bottom: 40px; border-bottom: 1px solid #e2e2e2;}
.menu-setting .board-view-header .title {margin-bottom: 10px; font-size: 18px; font-weight: 700;}
.menu-setting .board-view-content {min-height: 200px; padding: 40px 24px; font-size: 14px;}
.menu-setting .board-write-title {padding: 24px; border-bottom: 1px solid #e2e2e2;}
.menu-setting .board-write-title input {min-height: auto; padding: 0; font-size: 15px; font-weight: 500; color: #050505;}
.menu-setting .board-write-title input::placeholder {font-size: 15px;}
.menu-setting .board-write-content {padding: 24px;}
.menu-setting .board-write-content textarea {min-height: 100px; font-size: 15px; color: #555;}
.menu-setting .board-write-content textarea::placeholder {font-size: 15px;}
.menu-setting .board-bottom {position: absolute; left: 0px; bottom: 0px; width: 100%;}
.menu-setting .board-writer {border-top: 1px solid #e2e2e2;}
.menu-setting .board-writer li {padding: 15px 24px; border-bottom: 1px solid #e2e2e2; overflow: hidden;}
.menu-setting .board-writer li span {display: block; font-size: 15px; color: #050505;}
.menu-setting .board-writer li .title {float: left; font-weight: 700;}
.menu-setting .board-writer li .name {float: right; font-weight: 500;}
.menu-setting .board-writer li .date-select {float: right;}
.menu-setting .board-writer li .date-select > div {display: inline-block;}
.menu-setting .board-writer li .date-select .ui-input-text {width: 80px;}
.menu-setting .board-writer li .date-select input {min-height: auto; padding: 0; font-size: 15px; font-weight: 500; color: #050505; text-align: center; border-bottom: 1px solid #050505;}
.menu-setting .board-answer {padding: 40px 24px; border-top: 1px solid #e2e2e2;}
.menu-setting .board-answer .title {padding-bottom: 20px; font-size: 15px; font-weight: 500; color: #050505;}
.menu-setting .board-answer .content {font-size: 14px;}
.menu-setting .btn-wrap {position: relative; padding: 30px 0px; text-align: center;}
.menu-setting .btn-wrap .btn-delete {display: inline-block; width: 56px; height: 56px; text-indent: -99999px; background: #fe847b url(../../static/images/icons.png) no-repeat -73px -242px; background-size: 200px auto; border-radius: 100%;}
.menu-setting .btn-wrap .btn-delete:active {background-size: 195px auto; background-position: -71px -234px;}

.btn-board-write {position: absolute; top: 9px; right: 15px; display: block; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat 0px -350px; background-size: 200px auto;}
.btn-board-write:active {background-position: 2px -314px; background-size: 180px auto;}
#menu-setting .menu-setting {padding-top: 0px;}

/*메뉴 및 설정 - 공지사항*/
.menu-setting .menu-notice-wrap {padding-bottom: 0px;}
#menu-notice-write .menu-setting .menu-notice-wrap {padding-bottom: 110px;}
#menu-notice-write .menu-setting .menu-notice-wrap.modify {padding-bottom: 220px;}

/*메뉴 및 설정 - 고객센터/버전정보*/
.menu-setting .menu-customer-wrap {padding-bottom: 0px;}
.menu-setting .menu-customer-wrap .set-list {position: relative; border-bottom: 8px solid #f5f5f5;}
.menu-setting .menu-customer-wrap .set-list:after {content: ''; position: absolute; left: 0px; bottom: 0px; display: block; width: 100%; height: 1px; font: 0/0 a; background-color: #e2e2e2;}
.menu-setting .menu-customer-wrap .set-list:first-child {border-top: 0;}
.menu-setting .menu-customer-wrap .set-list h2 {padding: 10px 24px;}
.menu-setting .menu-customer-wrap .set-list ul li {font-size: 15px; color: #050505; overflow: hidden;}
.menu-setting .menu-customer-wrap .set-list ul li span {display: block; padding: 15px 0;}
.menu-setting .menu-customer-wrap .set-list ul li .title {float: left; padding-left: 24px;}
.menu-setting .menu-customer-wrap .set-list ul li .version {float: right; padding-right: 24px; color: #555;}
.menu-setting .menu-customer-wrap .set-list ul li .cont {float: right; padding-right: 24px;}
.menu-setting .menu-customer-wrap .set-list ul li a {position: relative; padding: 15px 24px; font-weight: 400;}
.menu-setting .menu-customer-wrap .set-list ul li a:after {content: ''; position: absolute; top: 50%; right: 24px; display: block; width: 16px; height: 16px; margin-top: -8px; font-size: 0; background: url(../../static/images/icons.png) no-repeat -63px -6px; background-size: 200px auto;}
.menu-setting .menu-customer-wrap .set-list.info {border-bottom: 0; padding-bottom: 40px;}
.menu-setting .menu-customer-wrap .set-list.info:after {display: none;}
.menu-setting .menu-customer-wrap .set-list.info ul li .title {color: #777;}
.menu-setting .menu-customer-wrap .set-list.info ul li.etc span {float: none; padding: 15px 24px;}
.menu-setting .menu-customer-wrap .set-list.info ul li.etc .title {padding-bottom: 0px;}

.menu-setting .menu-customer-wrap.tab-wrap.padding {padding-bottom: 160px;}
.menu-setting .menu-customer-wrap .tab-menu {overflow: hidden; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;}
.menu-setting .menu-customer-wrap .tab-menu li {float: left; width: 50%;}
.menu-setting .menu-customer-wrap .tab-menu li a {display: block; height: 45px; line-height: 45px; text-align: center; font-size: 15px; color: #b2b2b2; background-color: #f5f5f5;}
.menu-setting .menu-customer-wrap .tab-menu li a.on {font-weight: 700; color: #FFF; background-color: #02cbd3;}
.menu-setting .menu-customer-wrap .tab-cont .content {display: none;}
.menu-setting .menu-customer-wrap .tab-cont .content.on {display: block;}
.menu-setting .menu-customer-wrap .tab-cont .board-writer {bottom: 110px;}
.menu-setting .menu-customer-wrap .tab-cont .board-list li .date,
.menu-setting .menu-customer-wrap .tab-cont .board-list li .answer {display: inline-block;}
.menu-setting .menu-customer-wrap .tab-cont .board-list li .answer {height: 22px; line-height: 18px; margin-left: 5px; padding: 0px 10px; font-size: 12px; font-weight: 700; color: #02cbd3; border: 1px solid #02cbd3; border-radius: 22px;}
.menu-setting .menu-customer-wrap .tab-cont .btn-wrap .btn-write {display: block; height: 50px; line-height: 50px; margin: 0 24px; font-size: 16px; font-weight: 700; border-radius: 5px; color: #FFF; text-align: center; background-color: #02cbd3;}
.menu-setting .menu-customer-wrap .tab-cont .btn-wrap .btn-write:active {font-size: 15px;}
.menu-setting .menu-customer-wrap .tab-cont .btn-wrap .btn-write.off {color: #afafb2; background-color: #f1f2f5;}
.menu-setting .menu-customer-wrap .tab-cont .btn-wrap .btn-write.off:active {font-size: 16px;}

/*내 정보 - 개인정보 관리*/
.menu-setting .menu-myinfo-wrap h2 {padding: 24px; font-size: 18px; font-weight: 700; color: #050505;}
.menu-setting .menu-myinfo-wrap .input-wrap {padding-bottom: 30px;}
.menu-setting .menu-myinfo-wrap .btn-wrap {position: absolute; padding: 0px 0px 30px;}
.menu-setting .menu-myinfo-wrap .btn-wrap .btn-signoff {display: block; height: 50px; line-height: 50px; margin: 0 24px; font-size: 16px; font-weight: 700; color: #FFF; background-color: #3d3c4a; border-radius: 5px;}
.menu-setting .menu-myinfo-wrap .btn-wrap .btn-signoff:active {font-size: 15px;}
.menu-setting .menu-myinfo-wrap .sign-off-btn {position: relative; display: block; padding: 7px 60px 10px 0; margin-top: -20px; border-bottom: 1px solid #e2e2e2; font-size:18px; color: #050505;}
.menu-setting .menu-myinfo-wrap .sign-off-btn:after {content: ''; position: absolute; top: 50%; right: 0; display: block; width: 30px; height: 30px; margin-top: -15px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -57px 1px; background-size: 200px auto;}

/*내 정보 - 휴가사용 내역*/
.menu-setting .menu-vacation-wrap {padding-bottom: 0px;}
.menu-setting .menu-vacation-wrap .search-header {position: fixed; top: 48px; left: 0px; width: 100%; height: 40px; padding: 0px 16px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; background-color: #FFF; font-size: 13px; overflow: hidden; z-index: 1;}
.menu-setting .menu-vacation-wrap .search-header .item1 {float: left; height: 40px; line-height: 40px;}
.menu-setting .menu-vacation-wrap .search-header .item2 {float: right;}
.menu-setting .menu-vacation-wrap .search-header .item2 a {display: block; height: 40px; line-height: 40px; color: #050505;}
.menu-setting .menu-vacation-wrap .search-header .item2 a span {display: inline-block; position: relative;}
.menu-setting .menu-vacation-wrap .search-header .item2 a span:last-child {padding: 0px 22px;}
.menu-setting .menu-vacation-wrap .search-header .item2 a span:last-child:after {content: ''; position: absolute; top: 12px; right: -3px; display: block; width: 20px; height: 15px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -20px -2px; background-size: 140px auto;}
.menu-setting .menu-vacation-wrap .menu-vacation-cont {padding-top: 40px;}
.menu-setting .menu-vacation-wrap .search-vacation {position: relative; padding: 20px 16px; border-bottom: 15px solid #f5f5f5;}
.menu-setting .menu-vacation-wrap .search-vacation:after {content: ''; position: absolute; left: 0px; bottom: 0px; display: block; width: 100%; height: 1px; font: 0/0 a; background-color: #e2e2e2;}
.menu-setting .menu-vacation-wrap .search-vacation ul {border-radius: 10px; overflow: hidden; background-color: #02cbd3;}
.menu-setting .menu-vacation-wrap .search-vacation ul li {float: left; position: relative; width: 50%; padding: 15px 10px 15px 20px; color: #FFF; font-size: 13px; font-weight: 500;}
.menu-setting .menu-vacation-wrap .search-vacation ul li:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; width: 20px; height: 20px; font: 0/0 a; background-repeat: no-repeat; background-size: 200px auto; background-image: url(../../static/images/icons2.png);}
.menu-setting .menu-vacation-wrap .search-vacation ul .vacation1:before {background-position: -130px -90px;}
.menu-setting .menu-vacation-wrap .search-vacation ul .vacation2:before {background-position: -170px -90px;}
.menu-setting .menu-vacation-wrap .search-vacation ul li span {display: block; margin-top: 5px; font-size: 16px; font-weight: 700;}
.menu-setting .menu-vacation-wrap .search-list {border-top: 1px solid #e2e2e2;}
.menu-setting .menu-vacation-wrap .search-list li {padding: 0px 24px; border-bottom: 1px solid #e2e2e2; overflow: hidden;}
.menu-setting .menu-vacation-wrap .search-list li p {position: relative; height: 60px; line-height: 60px; font-size: 15px;}
.menu-setting .menu-vacation-wrap .search-list li .date {float: left; font-weight: 500; color: #050505;}
.menu-setting .menu-vacation-wrap .search-list li .time {float: right;}
.menu-setting .menu-vacation-wrap .search-list li .time span {position: relative; display: inline-block; margin-right: 8px; padding-left: 22px; font-weight: 700; color: #8ce03b;}
.menu-setting .menu-vacation-wrap .search-list li .time span:before {content: ''; position: absolute; left: 0px; top: 50%; display: block; margin-top: -9px; width: 18px; height: 18px; font: 0/0 a; background-repeat: no-repeat; background-size: 200px auto; background-image: url(../../static/images/icons.png);}
.menu-setting .menu-vacation-wrap .search-list li .time .vacation1:before {background-position: -128px -324px;}
.menu-setting .menu-vacation-wrap .search-list li .time .vacation2:before {background-position: -97px -324px;}
.menu-setting .menu-vacation-wrap .search-list-no {padding: 60px 0; font-size: 15px; text-align: center;}

/* 휴가상세내역 20221201 추가 */
.menu-setting .menu-vacation-wrap .search-vacation.detail {position: fixed; top: 48px; width:100%; padding-top: 16px; background-color: #fff; z-index: 1;}
.menu-setting .menu-vacation-wrap .search-vacation.detail ul {display: flex; justify-content: space-around; align-items: center; background-color: #2a2a6a;}
.menu-setting .menu-vacation-wrap .search-vacation.detail ul li {width: initial; padding: 15px 0; letter-spacing: -1.6px;}
.menu-setting .menu-vacation-wrap .search-vacation.detail ul li:before {content: none;}
.menu-setting .menu-vacation-wrap .search-vacation.detail ul li span {font-size: 14px; }
.menu-setting .menu-vacation-wrap .search-vacation.detail + .search-header {top: 154px; z-index: 2;}
.menu-setting .menu-vacation-wrap .search-vacation.detail + .search-header + .menu-vacation-cont {padding-top: 140px; }
.menu-setting .menu-vacation-wrap .search-vacation.detail.off {display: none;}
.menu-setting .menu-vacation-wrap .search-vacation.detail.off + .search-header {top: 48px;}
.menu-setting .menu-vacation-wrap .search-vacation.detail.off + .search-header + .menu-vacation-cont {padding-top: 38px;}


/*메뉴 및 설정 - 권한관리*/
.menu-setting .menu-authority-wrap {padding-bottom: 0px;}
.menu-setting .menu-authority-wrap h2 {padding: 10px 24px;}
.menu-setting .menu-authority-wrap .set-list {position: relative; border-bottom: 8px solid #f5f5f5;}
.menu-setting .menu-authority-wrap .set-list:after {content: ''; position: absolute; left: 0px; bottom: 0px; display: block; width: 100%; height: 1px; font: 0/0 a; background-color: #e2e2e2;}
.menu-setting .menu-authority-wrap .set-list:first-child {border-top: 0;}
.menu-setting .menu-authority-wrap .set-list.last {border-bottom: 0;}
.menu-setting .menu-authority-wrap .set-list.last:after {display: none;}
.menu-setting .menu-authority-wrap .set-list ul li {overflow: hidden;}
.menu-setting .menu-authority-wrap .set-list ul li .title {float: left; padding: 15px 24px; font-size: 15px; color: #050505;}
.menu-setting .menu-authority-wrap .set-list ul li .select {float: right; padding: 15px 24px;}
.menu-setting .menu-authority-wrap .set-list ul li .select .ui-input-text {width: 90px;}
.menu-setting .menu-authority-wrap .set-list ul li .select .ui-input-text input {position: relative; min-height: auto; padding: 0 25px 0 0; font-size: 15px; text-align: right; z-index: 1;}
.menu-setting .menu-authority-wrap .set-list ul li .select .ui-input-text:after {content: ''; position: absolute; top: 1px; right: 0px; display: block; width: 20px; height: 20px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -25px -2px; background-size: 160px auto; z-index: 0;}
.menu-setting .menu-authority-wrap .desc {padding: 0px 24px 50px; font-size: 13px; color: #f41100;}
.menu-setting .menu-authority-wrap .desc:before {content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-right: 3px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -39px -510px; background-size: 200px auto;}

/*메뉴 및 설정 - 회원탈퇴*/
.menu-setting .menu-signoff-wrap {padding-top: 10px;}
.menu-setting .menu-signoff-wrap .title-text {margin: 40px 24px; text-align: center; font-size: 16px;}
.menu-setting .menu-signoff-wrap .title-text.import {margin: 20px 24px 30px; padding: 20px 0; font-weight: 700; color: #FFF; background-color: #b2b2b2;}
.menu-setting .menu-signoff-wrap h2 {margin: 0px 24px 10px; font-size: 15px; font-weight: 700; color: #050505;}
.menu-setting .menu-signoff-wrap .signoff-guide {margin: 0px 24px 30px;}
.menu-setting .menu-signoff-wrap .signoff-guide li {position: relative; padding: 5px 0px 5px 12px; font-size: 13px;}
.menu-setting .menu-signoff-wrap .signoff-guide li:before {content: ''; position: absolute; top: 12px; left: 0px; display: block; width: 4px; height: 4px; font: 0/0 a; background-color: #02cbd3; border-radius: 100%;}
.menu-setting .menu-signoff-wrap .input-wrap li {padding: 20px 0 0 0; margin: 0 0 30px 0;}
.menu-setting .menu-signoff-wrap .input-wrap .select-wrap {padding-top: 0px;}
.menu-setting .menu-signoff-wrap .input-wrap .select-wrap input,
.menu-setting .menu-signoff-wrap .input-wrap .select-wrap input::placeholder {font-size: 15px; font-weight: 700; color: #050505;}
.menu-setting .menu-signoff-wrap .input-wrap .select-wrap input {padding-right: 40px;}
.menu-setting .menu-signoff-wrap .agree {margin: 0px 24px 30px;}
.menu-setting .menu-signoff-wrap .agree input {left: 4px; top: 15px; background-color: transparent;}
.menu-setting .menu-signoff-wrap .agree label {position: relative; padding: 5px 30px 5px 37px; font-size: 15px; color: #050505; line-height: 1.5;}
.menu-setting .menu-signoff-wrap .agree label.ui-btn.ui-checkbox-off:after,
.menu-setting .menu-signoff-wrap .agree label.ui-btn.ui-checkbox-on:after {width: 22px; height: 22px; left: 0; top: 13px; border-radius: 22px; background: url(../../static/images/icons.png) no-repeat; background-size: 200px auto; z-index: 2;}
.menu-setting .menu-signoff-wrap .agree label.ui-btn.ui-checkbox-off:after {border: 1px solid #CCC; background-color: #FFF; background-position: -62px -35px;}
.menu-setting .menu-signoff-wrap .agree label.ui-btn.ui-checkbox-on:after {border: none; background-color: #02cbd3; background-position: -33px -34px;}
.menu-setting .menu-signoff-wrap .password-find {padding: 0 24px; text-align: right;}
.menu-setting .menu-signoff-wrap .password-find a {display: inline-block; text-decoration: underline; font-size: 12px; color: #333;}
.menu-setting .menu-signoff-wrap .btn-wrap {position: absolute; padding: 0px; bottom: 0px;}

/*메뉴 및 설정 - 사업잗/본사정보 */
#menu-operator-register-1 .place-wrap .map-api-wrap .input-wrap li {margin-bottom: 15px;}
#menu-operator-register-2 .place-wrap .week-work-wrap.read-only {padding-top:0;}
#menu-operator-register-4 .place-wrap .input-wrap .ui-input-text input {padding-right:0}
#menu-operator-register-4 .layer-cont.place-wrap {padding-bottom:20px;}
.payday-wrap .input-wrap {padding-bottom:0;}
.payday-wrap .item .title {padding:0 24px;font-size:14px;}
.payday-wrap .item .input-wrap li {width:45%;padding-top:0;}
.payday-wrap .item .input-wrap li:first-of-type {float:left;}
.payday-wrap .item .input-wrap li:last-of-type {float:right;}
.payday-wrap .item .input-wrap:after {content:'';display:block;clear:both;}
.payday-wrap .work-type {padding:0 24px 15px;}
.payday-wrap .work-type span {display:inline-block;height:26px;line-height:26px;padding:0 12px;border-radius:13px;font-size:12px;font-weight:500;color:#fff;background-color:#b2b2b2;}
.payday-wrap h2.blind + .work-type {padding-top:20px;}

/*일정관리 데이터 피커*/
.cal-date-picker {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none;}
.cal-date-picker.on {display: block;}
.cal-date-picker .dimmed {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #eee; background: rgba(0, 0, 0, 0.7); z-index: 0;}
.cal-date-picker .datepicker-inline {position: absolute; left: 50%; top: 50%; width: 260px; height: 330px; padding: 15px; margin: -175px 0 0 -130px; background-color: #FFF; border-radius: 10px; z-index: 1;}
.cal-date-picker .datepicker-inline:before {content: ''; position: absolute; top: 15px; left: 45px; display: block; width: 170px; height: 35px; font: 0/0 a; z-index: 2;}
.cal-date-picker .datepicker .datepicker-switch {height: 35px; padding: 0; font-size: 20px; font-weight: 700; color: #050505;}
.cal-date-picker .datepicker .prev,
.cal-date-picker .datepicker .next {height: 33px; padding: 0; text-indent: -99999px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px auto;}
.cal-date-picker .datepicker .prev {background-image: url(../../static/images/icon_datepicker_prev.png);}
.cal-date-picker .datepicker .next {background-image: url(../../static/images/icon_datepicker_next.png);}
.cal-date-picker .datepicker .dow {height: 30px; font-size: 12px; font-weight: 400; color: #050505;}
.cal-date-picker .datepicker .dow:first-child {color: #f41100;}
.cal-date-picker .datepicker td {padding: 0; margin: 0; height: 34px;}
.cal-date-picker .datepicker td p {position: relative; height: 34px; line-height: 34px; margin: 0; padding: 0; text-align: center; font-size: 14px; font-weight: 500; color: #050505; font-family: 'roboto';}
.cal-date-picker .datepicker td p span {position: relative; display: inline-block; z-index: 1;}
.cal-date-picker .datepicker td p:after {content: ''; position: absolute; top: 2px; left: 50%; display: none; width: 28px; height: 28px; margin-left: -14px; font:0/0 a; background-color: #e2e2e2; border-radius: 100%; z-index: 0;}
.cal-date-picker .datepicker td:first-child p {color: #f41100;}
.cal-date-picker .datepicker td.old p,
.cal-date-picker .datepicker td.new p {color: #b2b2b2;}
.cal-date-picker .datepicker td.old:first-child p,
.cal-date-picker .datepicker td.new:first-child p {color: #fd9e97;}
.cal-date-picker .datepicker td.disabled p {color: #b2b2b2;}
.cal-date-picker .datepicker td.disabled p:after {display: block;}
.cal-date-picker .datepicker td.disabled:first-child p {color: #fd9e97;}
.cal-date-picker .datepicker td.active p {color: #FFF;}
.cal-date-picker .datepicker td.active p:after {display: block; background-color: #02cbd3;}
.cal-date-picker .datepicker td.today p:after {display: block;}
.cal-date-picker .datepicker td.old.active p {color: #FFF;}
.cal-date-picker .picker-close {position: absolute; left: 0; top: 50%; width: 100%; margin-top: 115px; text-align: center; z-index: 5;}
.cal-date-picker .picker-close button {display: inline-block; width: 50px; padding: 3px 0; font-size: 14px; font-weight: 500; border-radius: 4px; background-color: #e2e2e2;}

/*알림 페이지*/
#main-note-list {background-color: #f5f5f5;}
#main-note-list .note-list-wrap {padding-top: 50px; background-color: #FFF;}
#main-note-list .note-list-wrap .note-list {margin-bottom: 50px; border-top: 1px solid #e2e2e2;}
#main-note-list .note-list-wrap .note-list li {position: relative; height: 70px; border-bottom: 1px solid #e2e2e2;}
#main-note-list .note-list-wrap .note-list li .item {position: relative; display: block; height: 100%; padding: 10px 24px;}
#main-note-list .note-list-wrap .note-list li .item:after {content: ''; position: absolute; top: 50%; left: 24px; display: block; width: 24px; height: 24px; margin-top: -12px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat;}
#main-note-list .note-list-wrap .note-list li span {display: block; margin: 0px 15px 0px 35px; padding: 4px 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#main-note-list .note-list-wrap .note-list li .link {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
#main-note-list .note-list-wrap .note-list li .link:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f9f9f9; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
#main-note-list .note-list-wrap .note-list li .link:active:before,
#main-note-list .note-list-wrap .note-list li .link:focus:before {-webkit-transform: scale(1); transform: scale(1);}
#main-note-list .note-list-wrap .note-list li .link:after {background-position: -131px -426px; background-size: 200px auto;}
#main-note-list .note-list-wrap .note-list li .text:after {background-position: -159px -369px; background-size: 210px auto;}
#main-note-list .note-list-wrap .note-list li .link .time:after {content: ''; position: absolute; top: 50%; right: 24px; display: block; width: 16px; height: 16px; margin-top: -8px; font-size: 0; background: url(../../static/images/icons.png) no-repeat -63px -6px; background-size: 200px auto;}
#main-note-list .note-list-wrap .note-list li .title {font-size: 13px; font-weight: 500; color: #050505;}
#main-note-list .note-list-wrap .note-list li .time {font-size: 12px;}
#main-note-list .note-list-wrap .note-list-no {padding: 160px 0px 30px; font-size: 15px; text-align: center; background-color: #f5f5f5;position:relative;}
#main-note-list .note-list-wrap .note-list-no:before {content:'';display:block;width:40px;height:40px;background:url(../../static/images/icons3.png) no-repeat -120px 0;background-size:200px auto;position:absolute;top:100px;left:50%;transform:translateX(-50%);}

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

/*레이어 팝업*/
.layer-popup-wrap {position: relative; z-index: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s, z-index 0.4s; transition: opacity 0.4s, z-index 0.4s;}
.layer-popup-wrap.show {opacity: 1; z-index: 9999; visibility: visible;}
.layer-popup-wrap * {margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
.layer-popup-wrap .layer-grayLayer {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #eee; background: rgba(0, 0, 0, 0.7); z-index: 888; display: block; -webkit-transition: all 0.4s; transition: all 0.4s; opacity: 0;}
.layer-popup-wrap.show .layer-grayLayer {-webkit-transition: all 0.4s; transition: all 0.4s; opacity: 1;}
.layer-popup-wrap .layer-content {width: 100%; display: block; position: fixed; z-index: 889; -webkit-transition: all 0.4s; transition: all 0.4s; left: 0; background-color: #FFF;}
.layer-popup-wrap .layer-content.top {top: -350px; opacity: 0;}
.layer-popup-wrap .layer-content.bottom {bottom: -350px; opacity: 0;}
.layer-popup-wrap .layer-content.fade-top {top: 0; opacity: 0;}
.layer-popup-wrap .layer-content.fade-bottom {bottom: 0; opacity: 0;}
.layer-popup-wrap .layer-content.fade-in {opacity: 0;}
.layer-popup-wrap.show .layer-content.top {top: 0; opacity: 1;}
.layer-popup-wrap.show .layer-content.bottom {bottom: 0; opacity: 1;}
.layer-popup-wrap.show .layer-content.fade-top {opacity: 1;}
.layer-popup-wrap.show .layer-content.fade-bottom {opacity: 1;}
.layer-popup-wrap.show .layer-content.fade-in {opacity: 1;}
.layer-popup-wrap .layer-content .layer-close-btn {position: absolute; top: 8px; left: 8px; display: block; width: 30px; height: 30px; text-indent: -99999px; overflow: hidden; background: url(../../static/images/icons.png) no-repeat -131px -63px; background-size: 200px auto;}
.layer-popup-wrap .layer-content .layer-close-btn:active {background-size: 180px auto; background-position: -116px -56px;}

.layer-popup-wrap2 {position: relative; z-index: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s, z-index 0.4s; transition: opacity 0.4s, z-index 0.4s;}
.layer-popup-wrap2.show {opacity: 1; z-index: 9999; visibility: visible;}
.layer-popup-wrap2 * {margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
.layer-popup-wrap2 .layer-grayLayer {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #eee; background: rgba(0, 0, 0, 0.7); z-index: 888; display: block; -webkit-transition: all 0.4s; transition: all 0.4s; opacity: 0;}
.layer-popup-wrap2.show .layer-grayLayer {-webkit-transition: all 0.4s; transition: all 0.4s; opacity: 1;}
.layer-popup-wrap2 .layer-content {width: 100%; display: block; position: fixed; z-index: 889; -webkit-transition: all 0.4s; transition: all 0.4s; left: 0; background-color: #FFF;}
.layer-popup-wrap2 .layer-content.top {top: -350px; opacity: 0;}
.layer-popup-wrap2 .layer-content.bottom {bottom: -350px; opacity: 0;}
.layer-popup-wrap2 .layer-content.fade-top {top: 0; opacity: 0;}
.layer-popup-wrap2 .layer-content.fade-bottom {bottom: 0; opacity: 0;}
.layer-popup-wrap2 .layer-content.fade-in {opacity: 0;}
.layer-popup-wrap2.show .layer-content.top {top: 0; opacity: 1;}
.layer-popup-wrap2.show .layer-content.bottom {bottom: 0; opacity: 1;}
.layer-popup-wrap2.show .layer-content.fade-top {opacity: 1;}
.layer-popup-wrap2.show .layer-content.fade-bottom {opacity: 1;}
.layer-popup-wrap2.show .layer-content.fade-in {opacity: 1;}
.layer-popup-wrap2 .layer-content .layer-close-btn {position: absolute; top: 8px; left: 8px; display: block; width: 30px; height: 30px; text-indent: -99999px; overflow: hidden; background: url(../../static/images/icons.png) no-repeat -131px -63px; background-size: 200px auto;}
.layer-popup-wrap2 .layer-content .layer-close-btn:active {background-size: 180px auto; background-position: -116px -56px;}

/*근무 스케줄의 등록 레이어 팝업*/
#popup-schedule-register .layer-content {border-radius: 0px 0px 40px 40px;}
#popup-schedule-register .layer-content h2 {height: 46px; line-height: 46px; font-size: 16px; text-align: center;}
#popup-schedule-register .layer-content ul {padding: 30px 16px; overflow: hidden;}
#popup-schedule-register .layer-content ul li {float: left; width: 50%; text-align: center;}
#popup-schedule-register .layer-content ul li a {position: relative; display: inline-block; width: 100px; font-size: 14px;}
#popup-schedule-register .layer-content ul li a:active {font-size: 13px;}
#popup-schedule-register .layer-content ul li a:before {content: ''; display: block; width: 40px; height: 35px; margin: 0 auto 10px; background: url(../../static/images/icons.png) no-repeat -75px -168px; background-size: 200px auto;}
#popup-schedule-register .layer-content ul li .btn1:before {background-position: -75px -168px;}
#popup-schedule-register .layer-content ul li .btn2:before {background-position: -150px -168px;}

#popup-schedule-delete .layer-content {background: none;}
#popup-schedule-delete .layer-content ul {padding: 30px 24px 10px; overflow: hidden;}
#popup-schedule-delete .layer-content ul li {text-align: center;}
#popup-schedule-delete .layer-content ul li a {position: relative; display: block; padding: 10px 0; margin: 10px 0; font-size: 14px; border-radius: 10px; background-color: #FFF;}
#popup-schedule-delete .layer-content .layer-close-btn {position: relative; top: inherit; left: inherit; display: block; width: auto; height: auto; padding: 10px 0; margin: 10px 24px 30px; font-size: 14px; border-radius: 10px; background-image: none; background-color: #FFF; text-indent: inherit; text-align: center;}

/*근무 스케줄 등록 - 근무그룹선택, 직원근무시간선택, 근무일자 선택 레이어 팝업*/
#work-register-group1 .layer-content,
#work-register-group2 .layer-content,
#work-register-member .layer-content,
#work-register-member2 .layer-content,
#work-schedule-error .layer-content,
#work-register-date .layer-content {height: 90%; border-radius: 15px 15px 0px 0px;}
#work-register-group1 .layer-content .work-group-header,
#work-register-group2 .layer-content .work-group-header,
#work-register-member .layer-content .work-group-header,
#work-register-member2 .layer-content .work-group-header,
#work-schedule-error .layer-content .work-group-header,
#work-register-date .layer-content .work-group-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 10;}
#work-register-group1 .layer-content .work-group-header h2,
#work-register-group2 .layer-content .work-group-header h2,
#work-register-member .layer-content .work-group-header h2,
#work-register-member2 .layer-content .work-group-header h2,
#work-schedule-error .layer-content .work-group-header h2,
#work-register-date .layer-content .work-group-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
#work-register-group1 .layer-content .work-group-header a,
#work-register-group2 .layer-content .work-group-header a,
#work-register-member .layer-content .work-group-header a,
#work-register-member2 .layer-content .work-group-header a,
#work-schedule-error .layer-content .work-group-header a,
#work-register-date .layer-content .work-group-header a {position: absolute; top: 14px; display: block;}
#work-register-group1 .layer-content .cont-scroll,
#work-register-group2 .layer-content .cont-scroll,
#work-register-member .layer-content .cont-scroll,
#work-register-member2 .layer-content .cont-scroll,
#work-schedule-error .layer-content .cont-scroll,
#work-register-date .layer-content .cont-scroll {position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;}
#work-register-group1 .layer-content .work-group-header .confirm-btn,
#work-register-group2 .layer-content .work-group-header .confirm-btn,
#work-register-member .layer-content .work-group-header .confirm-btn,
#work-register-member2 .layer-content .work-group-header .confirm-btn,
#work-register-date .layer-content .work-group-header .confirm-btn {left: auto; right: 10px; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -39px -252px; background-size: 200px auto;}
#work-register-group1 .layer-content .work-group-header .confirm-btn.disable,
#work-register-group2 .layer-content .work-group-header .confirm-btn.disable,
#work-register-member .layer-content .work-group-header .confirm-btn.disable,
#work-register-member2 .layer-content .work-group-header .confirm-btn.disable,
#work-register-date .layer-content .work-group-header .confirm-btn.disable {background-position: -110px -42px; background-size: 250px auto;}
#work-register-group1 .layer-content .work-group-header .confirm-btn:active,
#work-register-group2 .layer-content .work-group-header .confirm-btn:active,
#work-register-member .layer-content .work-group-header .confirm-btn:active,
#work-register-member2 .layer-content .work-group-header .confirm-btn:active,
#work-register-date .layer-content .work-group-header .confirm-btn:active {background-size: 180px auto; background-position: -34px -225px;}
#work-register-group1 .layer-content .work-group-header .cancel-btn,
#work-register-member .layer-content .work-group-header .cancel-btn,
#work-register-member2 .layer-content .work-group-header .cancel-btn,
#work-schedule-error .layer-content .work-group-header .cancel-btn,
#work-register-date .layer-content .work-group-header .cancel-btn {left: 6px; width: auto; height: auto; padding: 5px 10px; font-size: 14px; font-weight: 500; color: #333; text-indent: inherit; background: none;}
#work-register-group1 .layer-content .work-group-header .cancel-btn:active,
#work-register-member .layer-content .work-group-header .cancel-btn:active,
#work-register-member2 .layer-content .work-group-header .cancel-btn:active,
#work-schedule-error .layer-content .work-group-header .cancel-btn:active,
#work-register-date .layer-content .work-group-header .cancel-btn:active {font-size: 13px;}
#work-register-group1 .layer-content .layer-bottom-btn,
#work-register-date .layer-content .layer-bottom-btn {position: relative; padding-bottom: 50px; text-align: center;}
#work-register-group1 .layer-content .layer-bottom-btn a,
#work-register-date .layer-content .layer-bottom-btn a {display: inline-block; width: 56px; height: 56px; text-indent: -99999px; background: #fe847b url(../../static/images/icons.png) no-repeat -73px -242px; background-size: 200px auto; border-radius: 100%;}
#work-register-group1 .layer-content .layer-bottom-btn a:active,
#work-register-date .layer-content .layer-bottom-btn a:active {background-size: 195px auto; background-position: -71px -234px;}

#work-register-group1 .layer-content .work-group-list {margin: 60px 24px;}
#work-register-group1 .layer-content .work-group-list .input-wrap {margin: 10px 0px 50px;}
#work-register-group1 .layer-content .work-group-list .work-group-time h3 {margin-bottom: 20px; font-size: 18px; font-weight: 700; color: #050505;}
#work-register-group1 .layer-content .work-group-list .work-group-time .input-wrap {margin-bottom: 40px;}
#work-register-group1 .layer-content .work-group-list .work-group-time .input-wrap li {position: relative; margin: 0; padding: 0;}
#work-register-group1 .layer-content .work-group-list .work-group-time .input-wrap label {height: 45px; line-height: 45px; font-size: 15px; font-weight: 500; color: #050505; opacity: 1; z-index: 1;}
#work-register-group1 .layer-content .work-group-list .work-group-time .input-wrap .ui-input-text {padding-left: 120px; text-align: right;}
#work-register-group1 .layer-content .work-group-list .work-group-time .input-wrap .ui-input-text:before {content: ':'; position: absolute; bottom: 10px; right: 0px; display: block; width: 40px; height: 1px; font: 0/0 a; background-color: #555; z-index: 0;}
#work-register-group1 .layer-content .work-group-list .work-group-time .input-wrap .ui-input-text:after {content: ':'; position: absolute; top: 10px; right: 17px; display: block; z-index: 0;}
#work-register-group1 .layer-content .work-group-list .work-group-time .input-wrap .ui-input-text input {position: relative; display: inline-block; padding: 0; width: 100px; height: 45px; text-align: right; font-size: 15px; z-index: 1;}
#work-register-group1 .layer-content .work-group-list .work-group-time .input-wrap .line {display: none;}

#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member {position: relative; margin-bottom: 10px;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .mem {position: absolute; right: 0px; top: -47px; text-align: right; padding-right: 30px; height: 30px; line-height: 30px; font-size: 15px; font-weight: 700; color: #050505;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .mem a {position: absolute; top: 50%; right: 0px; display: block; width: 20px; height: 20px; margin-top: -10px; background: url(../../static/images/icons.png) no-repeat -35px -175px; background-size: 160px auto; text-indent: 99999px;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li {position: relative; height: 54px; line-height: 54px; overflow: hidden;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li > div {position: absolute; top: 0px; height: 54px;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .photo {top: 7px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .name {left: 52px; font-size: 15px; color: #050505; font-weight: 500;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .name .name-overlap {position: absolute; left: -50px; bottom: 0px;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .delete {position: absolute; top: 5px; left: 24px; width: 17px; height: 17px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -134px -219px; background-size: 200px auto;}

#work-register-group1 .layer-content .work-group-list .work-group-time .text {font-size: 13px;}
#work-register-group1 .layer-content .work-group-list .work-group-time .input-wrap li .text {font-size: 13px;margin-top:8px;}

#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .time {right: 0; text-align: right;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .time > div {display: inline-block;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .time .select .ui-input-text {width: 42px;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .time .select .ui-input-text:after {content: ':'; position: absolute; top: 0px; right: 19px; display: block; z-index: 0; line-height: normal; font-size: 15px;}
#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .time .select input {position: relative; min-height: 24px; padding: 0; font-size: 15px; text-align: center; border-bottom: 1px solid #555; z-index: 1;}
#work-register-group1 .layer-content .group-start-wrap {position:relative;padding-top:20px;margin-bottom:20px;}
#work-register-group1 .layer-content .group-start-wrap .start-date {position:relative;}
#work-register-group1 .layer-content .group-start-wrap .start-date .date {display:inline-block;width:calc(100% - 39px);height:42px;background:#fff;position:relative;}
#work-register-group1 .layer-content .group-start-wrap .start-date .date * {margin:0;padding:0;background-color:transparent;}
#work-register-group1 .layer-content .group-start-wrap .start-date .date label {height:40px;font-size:15px;font-weight:700;color:#050505;line-height:40px;vertical-align:top;position:absolute;left:0;z-index:1;}
#work-register-group1 .layer-content .group-start-wrap .start-date .date .ui-input-text {padding-left:50%;position:relative;}
#work-register-group1 .layer-content .group-start-wrap .start-date .date .ui-input-text:before {content:'';width:39px;height:42px;overflow:hidden;background:url(../../static/images/icons.png) no-repeat -81px -209px;background-size:200px auto;position:absolute;right:0;top:0;z-index:0;}
#work-register-group1 .layer-content .group-start-wrap .start-date .date .ui-input-text input {padding:11px 46px 10px 0;font-size:15px;font-weight:700;color:#050505;text-align:right;position:relative;}
#work-register-group1 .layer-content .group-start-wrap .start-date .date:before {content:'';width:1px;height:20px;background-color:#e2e2e2;position:absolute;right:-4px;top:12px}
#work-register-group1 .layer-content .group-start-wrap .start-date .btn-history-view {width:39px;height:42px;text-indent:1000%;white-space:nowrap;overflow:hidden;background:url(../../static/images/icons3.png) no-repeat -40px 1px;background-size:200px auto;cursor:pointer;position:absolute;right:-8px;top:0;}
#work-register-group1 .layer-content .group-start-wrap .start-date .btn-history-view.active {background:url(../../static/images/icons3.png) no-repeat -80px 1px;background-size:200px auto;}
#work-register-group1 .layer-content .group-start-wrap .history-list {display:none;position:absolute;top:calc(100% + 3px);width:100%;height:213px;border:1px solid #e2e2e2;background-color:#fff;z-index:2;}
#work-register-group1 .layer-content .group-start-wrap .history-list.view {display:block;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-header {height:35px;border-bottom:1px solid #e2e2e2;background-color:#f4f4f4;position:relative;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-header:after {content:'';display:block;clear:both;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-header span {float:left;height:34px;line-height:34px;font-size:14px;text-align:center;color:#050505;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-header .from {width:72px;margin-left:20px;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-header .to {width:72px;margin-left:20px;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-header .del {text-align:right;position:absolute;right:14px;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-body {height:calc(100% - 35px);padding:8px 0;overflow-x:hidden;overflow-y:auto;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-body ul {padding:0 16px 0 20px;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-body li {position:relative;height:40px;line-height:40px;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-body li .date-fromto {display:inline-block;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-body li .date-fromto:after {content:'';display:block;clear:both;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-body li .date-fromto span {float:left;width:72px;font-size:14px;text-align:center;vertical-align:top;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-body li .date-fromto .tx-fromto {width:20px;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-body li .btn-history-check {width:42px;height:24px;margin-top:8px;margin-left:7px;border:2px solid #02cbd3;border-radius:6px;text-align:center;font-size:12px;color:#02cbd3;font-weight:700;vertical-align:top;background-color:#fff;}
#work-register-group1 .layer-content .group-start-wrap .history-list .list-body li .btn-history-delet {width:24px;height:24px;text-indent:1000%;white-space:nowrap;background:url(../../static/images/icons.png) no-repeat -130px -216px;background-size:200px auto;position:absolute;right:0;top:8px;}

#work-register-group2 .layer-content .work-group-header .modify-btn {left: 6px; padding: 5px 10px; font-size: 14px; font-weight: 500; color: #333;}
#work-register-group2 .layer-content .work-group-header .confirm-btn.off {display: none;}
#work-register-group2 .layer-content .work-group-header .modify-btn:active {font-size: 13px;}
#work-register-group2 .layer-content .work-group-header .register-btn {right: 8px; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat 2px -253px; background-size: 200px auto;}
#work-register-group2 .layer-content .work-group-header .register-btn:active {background-size: 180px auto; background-position: 3px -227px;}
#work-register-group2 .layer-content .not-exist {padding-top: 50px; font-size: 18px; color: #b2b2b2; text-align: center;}
#work-register-group2 .layer-content .work-group-select-btn {display: block; height: 45px; line-height: 42px; margin: 80px 24px 0px; font-size: 14px; font-weight: 700; color: #02cbd3; text-align: center; border: 2px solid #02cbd3; border-radius: 45px;}
#work-register-group2 .layer-content .work-group-list {margin: 30px 0px 60px; border-top: 1px solid #e2e2e2;}
#work-register-group2 .layer-content .work-group-list li {position: relative; border-bottom: 1px solid #e2e2e2;}
#work-register-group2 .layer-content .work-group-list li .drag {display: none;}
#work-register-group2 .layer-content .work-group-list li a {position: relative; display: block; padding: 24px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; z-index: 1;}
#work-register-group2 .layer-content .work-group-list li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #f9f9f9; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
#work-register-group2 .layer-content .work-group-list li a:active:before,
#work-register-group2 .layer-content .work-group-list li a:focus:before {-webkit-transform: scale(1); transform: scale(1);}
#work-register-group2 .layer-content .work-group-list li .group-select span {position: relative; display: block; font-size: 18px; font-weight: 500; color: #050505; z-index: 2;}
#work-register-group2 .layer-content .work-group-list li .group-select span i {display: block; font-size: 13px; font-weight: 400; color: #555;}
#work-register-group2 .layer-content .work-group-list li .group-select span i u {display: inline-block; width: 1px; height: 10px; margin: 0 5px; font: 0/0 a; background-color: #666;}
#work-register-group2 .layer-content .work-group-list li .group-select:after {content: ''; position: absolute; top: 50%; right: 24px; display: block; width: 22px; height: 22px; margin-top: -11px; font: 0/0 a; border: 2px solid #b2b2b2; border-radius: 100%; z-index: 2;}
#work-register-group2 .layer-content .work-group-list li .group-select.on:after {border: 0 none; background: #02cbd3 url(../../static/images/icons.png) no-repeat -33px -34px; background-size: 200px auto;}
#work-register-group2 .layer-content .work-group-list li .arrow {position: absolute; top: 50%; right: 12px; display: none; width: 30px; height: 30px; margin-top: -15px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -57px 1px; background-size: 200px auto; z-index: 0;}
#work-register-group2 .layer-content .work-group-list li .arrow.on {display: block;}
#work-register-group2 .layer-content .work-group-list.select-modify li { background-color: #FFF;}
#work-register-group2 .layer-content .work-group-list.select-modify li .group-select:after {display: none;}
#work-register-group2 .layer-content .work-group-list.select-modify li .drag {display: block; position: absolute; top: 0px; left: 0px; width: 60px; height: 100%; text-indent: -99999px;}
#work-register-group2 .layer-content .work-group-list.select-modify li .drag:before {content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -166px -424px; background-size: 200px auto;}
#work-register-group2 .layer-content .work-group-list.select-modify li a {padding-left: 0px; margin-left: 60px;}
#work-register-group2 .layer-content .work-group-list.select-modify li a:before {display: none;}

#work-schedule-error .layer-content .work-member-list,
#work-register-member .layer-content .work-member-list,
#work-register-member2 .layer-content .work-member-list {margin: 70px 24px 60px;}
#work-register-member .layer-content .work-member-list .input-wrap .member-search,
#work-register-member2 .layer-content .work-member-list .input-wrap .member-search {position: absolute; top: 25px; right: 0px; display: block; width: 24px; height: 24px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -169px -68px; background-size: 200px auto;}
#work-register-member .layer-content .work-member-list .member-list,
#work-register-member2 .layer-content .work-member-list .member-list {margin-top: 30px;}
#work-schedule-error .layer-content .work-member-list .member-list li,
#work-register-member .layer-content .work-member-list .member-list li,
#work-register-member2 .layer-content .work-member-list .member-list li {position: relative;}
#work-schedule-error .layer-content .work-member-list .member-list li div,
#work-register-member .layer-content .work-member-list .member-list li a,
#work-register-member2 .layer-content .work-member-list .member-list li a {position: relative; display: block; height: 54px; line-height: 54px; overflow: hidden; z-index: 1;}
#work-schedule-error .layer-content .work-member-list .member-list li div span,
#work-register-member .layer-content .work-member-list .member-list li a span,
#work-register-member2 .layer-content .work-member-list .member-list li a span {position: absolute; top: 0px; display: block; height: 54px;}
#work-schedule-error .layer-content .work-member-list .member-list li div .photo,
#work-register-member .layer-content .work-member-list .member-list li a .photo,
#work-register-member2 .layer-content .work-member-list .member-list li a .photo {top: 7px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
#work-schedule-error .layer-content .work-member-list .member-list li div .name,
#work-register-member .layer-content .work-member-list .member-list li a .name,
#work-register-member2 .layer-content .work-member-list .member-list li a .name {left: 52px; max-width: 85px; font-size: 15px; color: #050505; font-weight: 500;}
#work-schedule-error .layer-content .work-member-list .member-list li div .name .name-overlap,
#work-register-member .layer-content .work-member-list .member-list li a .name .name-overlap,
#work-register-member2 .layer-content .work-member-list .member-list li a .name .name-overlap {position: absolute; left: -50px; bottom: 0px;}
#work-register-member .layer-content .work-member-list .member-list li .check,
#work-register-member2 .layer-content .work-member-list .member-list li .check {position: absolute; top: 50%; right: 0px; display: block; width: 22px; height: 22px; text-indent: -99999px; margin-top: -11px; border: 2px solid #b2b2b2; border-radius: 100%; z-index: 0;}
#work-register-member .layer-content .work-member-list .member-list li.on .check,
#work-register-member2 .layer-content .work-member-list .member-list li.on .check {background: #02cbd3 url(../../static/images/icons.png) no-repeat -33px -34px; background-size: 200px auto; border: 0 none;}
#work-schedule-error .layer-content .work-member-list {margin-bottom: 50px;}
#work-schedule-error .layer-content .work-member-list h3 {font-size: 18px; font-weight: 700; color: #050505;}
#work-schedule-error .layer-content .work-member-list .date {margin-top: 30px; font-size: 15px; color: #050505; font-weight: 700;}
#work-schedule-error .layer-content .work-member-list .member-list {margin-top: 10px;}
#work-schedule-error .layer-content .work-member-list .member-list.type1 {margin-bottom: 40px;}
#work-schedule-error .layer-content .work-member-list .member-list li div .time {right: 0; text-align: right; font-size: 15px; color: #f41100;}
#work-schedule-error .layer-content .work-member-list .member-list.type2 li {margin-bottom: 10px;}
#work-schedule-error .layer-content .work-member-list .member-list.type2 li div .time {top: 5px; height: 44px; line-height: 1.5;}

#work-register-date .layer-content .work-date-picker {position: relative; margin: 60px 10px 10px;}
#work-register-date .layer-content .work-date-picker:before {content: ''; position: absolute; top: 0px; left: 13%; display: block; width: 74%; height: 50px; font: 0/0 a; z-index: 1;}
#work-register-date .layer-content .work-date-picker .datepicker-inline {width: 100%;}
#work-register-date .layer-content .work-date-picker .datepicker .datepicker-switch {height: 50px; font-size: 24px; font-weight: 700; color: #050505;}
#work-register-date .layer-content .work-date-picker .datepicker .prev,
#work-register-date .layer-content .work-date-picker .datepicker .next {height: 33px; text-indent: -99999px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px auto;}
#work-register-date .layer-content .work-date-picker .datepicker .prev {background-image: url(../../static/images/icon_datepicker_prev.png);}
#work-register-date .layer-content .work-date-picker .datepicker .next {background-image: url(../../static/images/icon_datepicker_next.png);}
#work-register-date .layer-content .work-date-picker .datepicker .dow {height: 30px; font-size: 12px; font-weight: 400; color: #050505;}
#work-register-date .layer-content .work-date-picker .datepicker .dow:first-child {color: #f41100;}
#work-register-date .layer-content .work-date-picker .datepicker td {padding: 0; margin: 0; height: 40px;}
#work-register-date .layer-content .work-date-picker .datepicker td p {position: relative; height: 40px; line-height: 40px; margin: 0; padding: 0; text-align: center; font-size: 14px; font-weight: 500; color: #050505; font-family: 'roboto';}
#work-register-date .layer-content .work-date-picker .datepicker td p span {position: relative; display: inline-block; z-index: 1;}
#work-register-date .layer-content .work-date-picker .datepicker td p:after {content: ''; position: absolute; top: 4px; left: 50%; display: none; width: 30px; height: 30px; margin-left: -15px; font:0/0 a; background-color: #e2e2e2; border-radius: 100%; z-index: 0;}
#work-register-date .layer-content .work-date-picker .datepicker td:first-child p {color: #f41100;}
#work-register-date .layer-content .work-date-picker .datepicker td.old p,
#work-register-date .layer-content .work-date-picker .datepicker td.new p {color: #b2b2b2;}
#work-register-date .layer-content .work-date-picker .datepicker td.old:first-child p,
#work-register-date .layer-content .work-date-picker .datepicker td.new:first-child p {color: #fd9e97;}
#work-register-date .layer-content .work-date-picker .datepicker td.disabled p {color: #b2b2b2;}
#work-register-date .layer-content .work-date-picker .datepicker td.disabled p:after {display: block;}
#work-register-date .layer-content .work-date-picker .datepicker td.disabled:first-child p {color: #fd9e97;}
#work-register-date .layer-content .work-date-picker .datepicker td.active p {color: #FFF;}
#work-register-date .layer-content .work-date-picker .datepicker td.active p:after {display: block; background-color: #02cbd3;}
#work-register-date .layer-content .work-date-picker .datepicker td.old.active p {color: #FFF;}
#work-register-date .layer-content .work-date-text {margin: 15px 24px; font-size: 13px;}

/* 근무스케줄 확인 */
#popup-schedule-check .layer-content {height: 90%; border-radius: 15px 15px 0px 0px; background-color: #f5f5f5;}
#popup-schedule-check .layer-content .schedule-check-header {position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10; height: 101px; border-bottom: 1px solid #e2e2e2; border-radius: 15px 15px 0 0; background-color: #fff;}
#popup-schedule-check .layer-content .schedule-check-header .layer-close-btn {position: absolute; top: 22px; left: auto; right: 18px; display: block; width: 30px; height: 30px; text-indent: -99999px; overflow: hidden; background: url(../../static/images/icons.png) no-repeat -131px -63px; background-size: 200px auto;}
#popup-schedule-check .layer-content .schedule-check-header .name {position: absolute; top: 20px; left: 24px; font-size:24px;font-weight:700;color:#050505;}
#popup-schedule-check .layer-content .schedule-check-header .name .position {display:inline-block;min-width:40px;height:18px;padding:0 3px;margin:-1px 0 1px 6px;border-radius:4px;background-color:#02cbd3;font-size:11px;font-weight:500;color:#fff;line-height:18px;text-align:center;vertical-align:middle;box-sizing:border-box;}
#popup-schedule-check .layer-content .schedule-check-header .checkbox-wrap {position:absolute;right:24px;bottom:0;}
#popup-schedule-check .layer-content .schedule-check-header .checkbox-wrap .ui-checkbox label {padding:5px 0px 5px 26px;font-size:13px;color:#555;}
#popup-schedule-check .layer-content .schedule-check-header .checkbox-wrap .ui-checkbox label.ui-btn.ui-checkbox-on {color:#050505;font-weight:500;}
#popup-schedule-check .layer-content .schedule-check-header .checkbox-wrap .ui-checkbox label.ui-btn.ui-checkbox-off:after {top:12px;border:none;background-color:#fff;}
#popup-schedule-check .layer-content .schedule-check-header .checkbox-wrap .ui-checkbox label.ui-btn.ui-checkbox-on:after {top:12px;border:none;background-color:#fff;background-position:-120px -36px;}
#popup-schedule-check .layer-content .cont-scroll {position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;}
#popup-schedule-check .layer-content .schedule-check-list {position:relative;margin: 109px 0 72px; }
#popup-schedule-check .layer-content .schedule-check-list:before {content: ''; position: absolute; top: -9px; width: 100%; height: 9px; border-bottom: 1px solid #e2e2e2; background-color: #f5f5f5;}
#popup-schedule-check .layer-content .schedule-check-list li {position:relative;height:54px;line-height:54px;padding:0 24px;border-bottom:1px solid #e2e2e2;background-color:#fff;}
#popup-schedule-check .layer-content .schedule-check-list li .time {font-size:14px;font-weight:500;color:#050505;}
#popup-schedule-check .layer-content .schedule-check-list li .myschedule-btn {position:absolute;right:24px;top:50%;transform:translateY(-50%);width:42px;height:22px;border:1px solid #d4d4d4;border-radius:11px;font-size:12px;text-align:center;line-height:20px;}
#popup-schedule-check .layer-content .schedule-check-list li .myschedule-btn.on {border-color:#02cbd3;color:#02cbd3;font-weight:700;line-height:18px;}
#popup-schedule-check .layer-content .layer-bottom-btn {position: fixed; left: 0px; bottom: 0px; width: 100%; text-align: center;}
#popup-schedule-check .layer-content .layer-bottom-btn .schedule-check-btn {display:block;height:64px;line-height:64px;font-size:19px;font-weight:700;color:#fff;}
#popup-schedule-check .layer-content .layer-bottom-btn .schedule-check-btn.off {background-color:#f1f2f5;color:#afafb2;}
#popup-schedule-check .layer-content .layer-bottom-btn .schedule-check-btn.on {background-color:#02cbd3;}


/*전자결재내역 - 이름 검색 레이어팝업*/
#electro-approval-name-search .layer-content .approval-name-search {position: relative; height: 50px;}
#electro-approval-name-search .layer-content .approval-name-search .layer-close-btn {left: inherit; right: 8px; top: 10px;}
#electro-approval-name-search .layer-content .approval-name-search .layer-close-btn:active {background-size: 180px auto; background-position: -116px -56px;}
#electro-approval-name-search .layer-content .approval-name-search .ui-input-text {height: 50px; padding: 8px 50px 8px 24px;}
#electro-approval-name-search .layer-content .approval-name-search .ui-input-text:before {content: ''; position: absolute; top: 14px; left: 35px; display: block; width: 22px; height: 22px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -129px -295px; background-size: 200px auto;}
#electro-approval-name-search .layer-content .approval-name-search .ui-input-text input {min-height: 34px; padding: 0px 10px 0px 40px; border: 1px solid #e2e2e2; background-color: #f4f4f4; border-radius: 3px; font-size: 15px;}
#electro-approval-name-search .layer-content .approval-name-search .ui-input-text input::placeholder {font-size: 15px; font-weight: 400; color: #555;}

/*전자결재내역 - 날짜 조회 레이어 팝업 /  휴가사용내역 조회*/
#electro-approval-search .layer-content,
#menu-vacation-search .layer-content {height: 340px; border-radius: 40px 40px 0px 0px;}
#electro-approval-search .approval-search-header,
#menu-vacation-search .menu-vacation-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 1;}
#electro-approval-search .approval-search-header h2,
#menu-vacation-search .menu-vacation-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
#electro-approval-search .approval-search-header .close-btn,
#menu-vacation-search .menu-vacation-header .close-btn {top: 13px;}
#electro-approval-search .approval-search-header .btn-confirm,
#menu-vacation-search .menu-vacation-header .btn-confirm {top: 14px; left: auto; right: 6px; width: auto; height: auto; padding: 5px 10px; text-indent: inherit; background: none; font-size: 14px; font-weight: 500; color: #333;}
#electro-approval-search .approval-search-header .btn-confirm:active,
#menu-vacation-search .menu-vacation-header .btn-confirm:active {font-size: 13px;}

#electro-approval-search .approval-search-cont,
#menu-vacation-search .menu-vacation-cont {height: 284px; margin-top: 56px; text-align: center; font-size: 0;}
#electro-approval-search .approval-search-cont:before,
#menu-vacation-search .menu-vacation-cont:before {content: ''; display: inline-block; vertical-align: middle; width: 0px; height: 100%; font: 0/0 a;}
#electro-approval-search .approval-search-cont .middle-wrap,
#menu-vacation-search .menu-vacation-cont .middle-wrap {display: inline-block; vertical-align: middle; width: 100%;}
#electro-approval-search .approval-search-cont .item:first-child,
#menu-vacation-search .menu-vacation-cont .item:first-child {margin-bottom: 25px;}
#electro-approval-search .approval-search-cont h3,
#menu-vacation-search .menu-vacation-cont h3 {margin-bottom: 15px; text-align: center; font-size: 15px; font-weight: 500; color: #050505;}
#electro-approval-search .approval-search-cont .select-tab,
#menu-vacation-search .menu-vacation-cont .select-tab {padding: 0 16px 5px 20px; overflow: hidden;}
#electro-approval-search .approval-search-cont .select-tab li,
#menu-vacation-search .menu-vacation-cont .select-tab li {position: relative; float: left; width: 25%; margin-left: -1px; z-index: 0;}
#electro-approval-search .approval-search-cont .select-tab li a,
#menu-vacation-search .menu-vacation-cont .select-tab li a {display: block; height: 40px; line-height: 40px; border: 1px solid #e2e2e2; font-size: 14px; background-color: #f4f4f4;}
#electro-approval-search .approval-search-cont .select-tab li:first-child a,
#menu-vacation-search .menu-vacation-cont .select-tab li:first-child a {border-radius: 5px 0px 0px 5px;}
#electro-approval-search .approval-search-cont .select-tab li:last-child a,
#menu-vacation-search .menu-vacation-cont .select-tab li:last-child a {border-radius: 0px 5px 5px 0px;}
#electro-approval-search .approval-search-cont .select-tab li.on,
#menu-vacation-search .menu-vacation-cont .select-tab li.on {z-index: 1;}
#electro-approval-search .approval-search-cont .select-tab li.on a,
#menu-vacation-search .menu-vacation-cont .select-tab li.on a {border: 1px solid #02cbd3; font-weight: 700; color: #02cbd3; line-height: 38px; background-color: #FFF;}
#electro-approval-search .approval-search-cont .direct-wrap,
#menu-vacation-search .menu-vacation-cont .direct-wrap {display: none; position: relative; height: 40px; margin: 0 19px 20px 20px; border: 1px solid #e2e2e2; border-radius: 5px;}
#electro-approval-search .approval-search-cont .direct-wrap li,
#menu-vacation-search .menu-vacation-cont .direct-wrap li {display: inline-block; font-size: 14px; color: #050505;}
#electro-approval-search .approval-search-cont .direct-wrap li label,
#menu-vacation-search .menu-vacation-cont .direct-wrap li label {width: 0px; height: 0px; margin: 0; padding: 0; overflow: hidden; text-indent: -99999px;}
#electro-approval-search .approval-search-cont .direct-wrap li .ui-input-text,
#menu-vacation-search .menu-vacation-cont .direct-wrap li .ui-input-text {width: 130px;}
#electro-approval-search .approval-search-cont .direct-wrap li .ui-input-text input,
#menu-vacation-search .menu-vacation-cont .direct-wrap li .ui-input-text input {width: 100%; min-height: 38px; line-height: 38px; padding: 0; margin: 0; font-size: 14px; color: #050505; text-align: center;}

#menu-vacation-search .menu-vacation-cont .select-tab li {width: 33.33333%;}
#menu-vacation-search .menu-vacation-cont .direct-wrap {display: block;}

/*전자결재 상세 - 결재진행 레이어 팝업*/
#electro-approval-progress .layer-content {border-radius: 40px 40px 0px 0px;}
#electro-approval-progress .approval-progress-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 1;}
#electro-approval-progress .approval-progress-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
#electro-approval-progress .approval-progress-header .close-btn {top: 13px;}
#electro-approval-progress .approval-progress-cont {margin-top: 56px; padding: 15px 24px 20px;}
#electro-approval-progress .approval-progress-cont .text-wrap {padding: 10px; margin-bottom: 15px; background-color: #f4f4f4; border: 1px solid #e2e2e2; border-radius: 5px;}
#electro-approval-progress .approval-progress-cont .text-wrap textarea {max-height: 70px; height: 70px !important; font-size: 15px; background-color: transparent;}
#electro-approval-progress .approval-progress-cont .text-wrap textarea::placeholder {font-size: 15px; font-weight: 400; color: #b2b2b2;}
#electro-approval-progress .approval-progress-cont .btn-wrap {position: relative;}
#electro-approval-progress .approval-progress-cont .btn-wrap a {display: block; height: 50px; line-height: 50px; font-size: 16px; font-weight: 700; color: #FFF; text-align: center; border-radius: 3px;}
#electro-approval-progress .approval-progress-cont .btn-wrap a:active {font-size: 15px;}
#electro-approval-progress .approval-progress-cont .btn-wrap .btn-confirm {background-color: #02cbd3;}
#electro-approval-progress .approval-progress-cont .btn-wrap .btn-return {background-color: #f41100;}

/*전자결재 상세 - 휴가신청 취소 레이어 팝업*/
#electro-approval-cancel .layer-content {border-radius: 40px 40px 0px 0px;}
#electro-approval-cancel .approval-progress-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 1;}
#electro-approval-cancel .approval-progress-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
#electro-approval-cancel .approval-progress-header .close-btn {top: 13px;}
#electro-approval-cancel .approval-progress-cont {margin-top: 56px; padding: 15px 24px 20px;}
#electro-approval-cancel .approval-progress-cont .text-wrap {padding: 10px; margin-bottom: 15px; background-color: #f4f4f4; border: 1px solid #e2e2e2; border-radius: 5px;}
#electro-approval-cancel .approval-progress-cont .text-wrap textarea {max-height: 70px; height: 70px !important; font-size: 15px; background-color: transparent;}
#electro-approval-cancel .approval-progress-cont .text-wrap textarea::placeholder {font-size: 15px; font-weight: 400; color: #b2b2b2;}
#electro-approval-cancel .approval-progress-cont .btn-wrap {position: relative;}
#electro-approval-cancel .approval-progress-cont .btn-wrap a {display: block; height: 50px; line-height: 50px; font-size: 16px; font-weight: 700; color: #FFF; text-align: center; border-radius: 3px;}
#electro-approval-cancel .approval-progress-cont .btn-wrap a:active {font-size: 15px;}
#electro-approval-cancel .approval-progress-cont .btn-wrap .btn-confirm {background-color: #02cbd3;}
#electro-approval-cancel .approval-progress-cont .btn-wrap .btn-return {background-color: #f41100;}

/*전자결재 - 직원선택 레이어 팝업*/
.approval-member-select .layer-content {height: 90%; border-radius: 15px 15px 0px 0px;}
.approval-member-select .layer-content .work-group-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 1;}
.approval-member-select .layer-content .work-group-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
.approval-member-select .layer-content .work-group-header a {position: absolute; top: 14px; display: block;}
.approval-member-select .layer-content .cont-scroll {position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;}
.approval-member-select .layer-content .work-group-header .btn-confirm {left: auto; right: 10px; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -39px -252px; background-size: 200px auto;}
.approval-member-select .layer-content .work-group-header .btn-confirm:active {background-size: 180px auto; background-position: -34px -225px;}
.approval-member-select .layer-content .work-group-header .cancel-btn {left: 6px; width: auto; height: auto; padding: 5px 10px; font-size: 14px; font-weight: 500; color: #333; text-indent: inherit; background: none;}
.approval-member-select .layer-content .work-group-header .cancel-btn:active {font-size: 13px;}
.approval-member-select .layer-content .work-member-list {margin: 70px 24px 60px;}
.approval-member-select .layer-content .work-member-list .input-wrap .member-search {position: absolute; top: 25px; right: 0px; display: block; width: 24px; height: 24px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -169px -68px; background-size: 200px auto;}
.approval-member-select .layer-content .work-member-list .member-list {margin-top: 30px;}
.approval-member-select .layer-content .work-member-list .member-list li {position: relative;}
.approval-member-select .layer-content .work-member-list .member-list li a {position: relative; display: block; height: 54px; line-height: 54px; overflow: hidden; z-index: 1;}
.approval-member-select .layer-content .work-member-list .member-list li a span {position: absolute; top: 0px; display: block; height: 54px;}
.approval-member-select .layer-content .work-member-list .member-list li a .photo {top: 7px; width: 40px; height: 40px; overflow: hidden; border: 1px solid #eaebf0; border-radius: 100%; background-color: #f2f2f3;}
.approval-member-select .layer-content .work-member-list .member-list li a .name {left: 52px; font-size: 15px; color: #050505; font-weight: 500;}
.approval-member-select .layer-content .work-member-list .member-list li a .name .name-overlap {position: absolute; left: -50px; bottom: 0px;}
.approval-member-select .layer-content .work-member-list .member-list li .check {position: absolute; top: 50%; right: 0px; display: block; width: 22px; height: 22px; text-indent: -99999px; margin-top: -11px; border: 2px solid #b2b2b2; border-radius: 100%; z-index: 0;}
.approval-member-select .layer-content .work-member-list .member-list li.on .check {background: #02cbd3 url(../../static/images/icons.png) no-repeat -33px -34px; background-size: 200px auto; border: 0 none;}

/*전자결재 - 사업장 레이어 팝업*/
.approval-place-select .layer-content {height: 90%; border-radius: 15px 15px 0px 0px;}
.approval-place-select .layer-content .work-group-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 1;}
.approval-place-select .layer-content .work-group-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
.approval-place-select .layer-content .work-group-header a {position: absolute; top: 14px; display: block;}
.approval-place-select .layer-content .cont-scroll {position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;}
.approval-place-select .layer-content .work-group-header .btn-confirm {left: auto; right: 10px; width: 30px; height: 30px; text-indent: -99999px; background: url(../../static/images/icons.png) no-repeat -39px -252px; background-size: 200px auto;}
.approval-place-select .layer-content .work-group-header .btn-confirm:active {background-size: 180px auto; background-position: -34px -225px;}
.approval-place-select .layer-content .work-group-header .cancel-btn {left: 6px; width: auto; height: auto; padding: 5px 10px; font-size: 14px; font-weight: 500; color: #333; text-indent: inherit; background: none;}
.approval-place-select .layer-content .work-group-header .cancel-btn:active {font-size: 13px;}
.approval-place-select .layer-content .work-place-list {margin: 70px 24px 60px;}
.approval-place-select .layer-content .work-place-list .input-wrap .place-search {position: absolute; top: 25px; right: 0px; display: block; width: 24px; height: 24px; font: 0/0 a; background: url(../../static/images/icons.png) no-repeat -169px -68px; background-size: 200px auto;}
.approval-place-select .layer-content .work-place-list .place-list {margin-top: 30px;}
.approval-place-select .layer-content .work-place-list .place-list li {position: relative;}
.approval-place-select .layer-content .work-place-list .place-list li a {position: relative; display: block; height: 54px; line-height: 54px; overflow: hidden; z-index: 1;}
.approval-place-select .layer-content .work-place-list .place-list li a span {position: absolute; top: 0px; display: block; height: 54px;}
.approval-place-select .layer-content .work-place-list .place-list li a .name {left: 0; font-size: 15px; color: #050505; font-weight: 500;}
.approval-place-select .layer-content .work-place-list .place-list li .check {position: absolute; top: 50%; right: 0px; display: block; width: 22px; height: 22px; text-indent: -99999px; margin-top: -11px; border: 2px solid #b2b2b2; border-radius: 100%; z-index: 0;}
.approval-place-select .layer-content .work-place-list .place-list li.on .check {background: #02cbd3 url(../../static/images/icons.png) no-repeat -33px -34px; background-size: 200px auto; border: 0 none;}

/*알림 - 레이어팝업(공통)*/
#common-alert .layer-content,
#common-alert2 .layer-content,
#common-alert3 .layer-content,
#common-alert4 .layer-content,
#common-alert5 .layer-content,
#common-alert6 .layer-content,
#common-alert7 .layer-content,
#common-alert8 .layer-content,
#common-confirm .layer-content,
#common-confirm-main .layer-content,
#common-confirm-main1 .layer-content,
#common-confirm-main2 .layer-content {top: 50%; left: 8%; width: 84%; height: 230px; margin-top: -115px; border-radius: 10px; text-align: center;}
#common-alert .layer-content:before,
#common-alert2 .layer-content:before,
#common-alert3 .layer-content:before,
#common-alert4 .layer-content:before,
#common-alert5 .layer-content:before,
#common-alert6 .layer-content:before,
#common-alert7 .layer-content:before,
#common-alert8 .layer-content:before,
#common-confirm .layer-content:before,
#common-confirm-main .layer-content:before,
#common-confirm-main1 .layer-content:before,
#common-confirm-main2 .layer-content:before {content: ''; position: relative; display: inline-block; vertical-align: middle; width: 0px; height: 100%; font: 0/0 a;}
#common-alert .layer-content .alert-cont,
#common-alert3 .layer-content .alert-cont,
#common-alert4 .layer-content .alert-cont,
#common-alert5 .layer-content .alert-cont,
#common-alert6 .layer-content .alert-cont,
#common-alert7 .layer-content .alert-cont,
#common-confirm .layer-content .alert-cont,
#common-confirm-main .layer-content .alert-cont,
#common-confirm-main1 .layer-content .alert-cont,
#common-confirm-main2 .layer-content .alert-cont {display: inline-block; vertical-align: middle; width: 94%; margin-left: -4px;}
#common-alert .layer-content .alert-cont .text,
#common-alert3 .layer-content .alert-cont .text,
#common-alert4 .layer-content .alert-cont .text,
#common-alert5 .layer-content .alert-cont .text,
#common-alert6 .layer-content .alert-cont .text,
#common-alert7 .layer-content .alert-cont .text,
#common-confirm .layer-content .alert-cont .text,
#common-confirm-main .layer-content .alert-cont .text,
#common-confirm-main1 .layer-content .alert-cont .text,
#common-confirm-main2 .layer-content .alert-cont .text {margin-bottom: 30px; font-size: 18px; color: #050505; line-height: 30px;}
#common-alert .layer-content .alert-cont .btn a,
#common-alert3 .layer-content .alert-cont .btn a,
#common-alert4 .layer-content .alert-cont .btn a,
#common-alert5 .layer-content .alert-cont .btn a,
#common-alert6 .layer-content .alert-cont .btn a,
#common-alert7 .layer-content .alert-cont .btn a,
#common-confirm .layer-content .alert-cont .btn a,
#common-confirm-main .layer-content .alert-cont .btn a,
#common-confirm-main1 .layer-content .alert-cont .btn a,
#common-confirm-main2 .layer-content .alert-cont .btn a {display: inline-block; width: 120px; height: 50px; line-height: 50px; margin: 0px 3px; font-size: 16px; font-weight: 700; color: #FFF; border-radius: 5px;}
#common-alert .layer-content .alert-cont .btn a.sky,
#common-alert3 .layer-content .alert-cont .btn a.sky,
#common-alert4 .layer-content .alert-cont .btn a.sky,
#common-alert5 .layer-content .alert-cont .btn a.sky,
#common-alert6 .layer-content .alert-cont .btn a.sky,
#common-alert7 .layer-content .alert-cont .btn a.sky,
#common-confirm .layer-content .alert-cont .btn a.sky,
#common-confirm-main .layer-content .alert-cont .btn a.sky,
#common-confirm-main1 .layer-content .alert-cont .btn a.sky,
#common-confirm-main2 .layer-content .alert-cont .btn a.sky {background-color: #5fc4f1;}
#common-alert .layer-content .alert-cont .btn a.green,
#common-alert3 .layer-content .alert-cont .btn a.green,
#common-alert4 .layer-content .alert-cont .btn a.green,
#common-alert5 .layer-content .alert-cont .btn a.green,
#common-alert6 .layer-content .alert-cont .btn a.green,
#common-alert7 .layer-content .alert-cont .btn a.green,
#common-confirm .layer-content .alert-cont .btn a.green,
#common-confirm-main .layer-content .alert-cont .btn a.green,
#common-confirm-main1 .layer-content .alert-cont .btn a.green,
#common-confirm-main2 .layer-content .alert-cont .btn a.green {background-color: #58d8aa}
#common-alert .layer-content .alert-cont .btn a.sky-green,
#common-alert3 .layer-content .alert-cont .btn a.sky-green,
#common-alert4 .layer-content .alert-cont .btn a.sky-green,
#common-alert5 .layer-content .alert-cont .btn a.sky-green,
#common-alert6 .layer-content .alert-cont .btn a.sky-green,
#common-alert7 .layer-content .alert-cont .btn a.sky-green,
#common-confirm .layer-content .alert-cont .btn a.sky-green,
#common-confirm-main .layer-content .alert-cont .btn a.sky-green,
#common-confirm-main1 .layer-content .alert-cont .btn a.sky-green,
#common-confirm-main2 .layer-content .alert-cont .btn a.sky-green {background-color: #02cbd3;}
#common-alert .layer-content .alert-cont .btn a.gray,
#common-alert3 .layer-content .alert-cont .btn a.gray,
#common-alert4 .layer-content .alert-cont .btn a.gray,
#common-alert5 .layer-content .alert-cont .btn a.gray,
#common-alert6 .layer-content .alert-cont .btn a.gray,
#common-alert7 .layer-content .alert-cont .btn a.gray {background-color: #3d3c4a;}
#common-alert2 .layer-content,
#common-alert8 .layer-content {height: 270px; margin-top: -135px; background: none;}
#common-alert2 .layer-content .work,
#common-alert8 .layer-content .work {display: inline-block; vertical-align: middle; width: 270px; height: 270px; text-indent: -99999px; background-repeat: no-repeat; background-position:  50% 50%; background-size: 270px auto;}
#common-alert2 .layer-content .work.on,
#common-alert8 .layer-content .work.on {background-image: url(../../static/images/pop-work-img01.png);}
#common-alert2 .layer-content .work.off,
#common-alert8 .layer-content .work.off {background-image: url(../../static/images/pop-work-img02.png);}
#common-alert2 .layer-content .layer-close-btn,
#common-alert8 .layer-content .layer-close-btn {top: 0px; right: 0px; left: auto; background-image: url(../../static/images/icons2.png); background-position: -165px -125px;}
#common-alert2 .layer-content .layer-close-btn:active,
#common-alert8 .layer-content .layer-close-btn:active {background-size: 200px auto; background-position: -165px -125px;}
.layer-content .alert-cont .btn a.lightgray {background-color:#b2b2b2;}

/*근무그룹선택 -레이어팝업(공통)*/
#work-register-group-select .layer-content {height: 90%; border-radius: 15px 15px 0px 0px;}
#work-register-group-select .layer-content .work-group-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 10;}
#work-register-group-select .layer-content .work-group-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
#work-register-group-select .layer-content .cont-scroll {position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;}
#work-register-group-select .layer-content .work-group-list {margin: 60px 0px; border-top: 1px solid #e2e2e2;}
#work-register-group-select .layer-content .work-group-list li {position: relative; border-bottom: 1px solid #e2e2e2;}
#work-register-group-select .layer-content .work-group-list li:active {background-color: #f9f9f9;}
#work-register-group-select .layer-content .work-group-list li a {position: relative; display: block; padding: 24px; z-index: 1;}
#work-register-group-select .layer-content .work-group-list li .group-select span {font-size: 18px; font-weight: 500; color: #050505;}
#work-register-group-select .layer-content .work-group-list li .group-select span i {display: block; font-size: 13px; font-weight: 400; color: #555;}
#work-register-group-select .layer-content .work-group-list li .group-select span i u {display: inline-block; width: 1px; height: 10px; margin: 0 5px; font: 0/0 a; background-color: #666;}
#work-register-group-select .layer-content .work-group-list li .group-select:after {content: ''; position: absolute; top: 50%; right: 24px; display: block; width: 22px; height: 22px; margin-top: -11px; font: 0/0 a; border: 2px solid #b2b2b2; border-radius: 100%;}
#work-register-group-select .layer-content .work-group-list li .group-select.on:after {border: 0 none; background: #02cbd3 url(../../static/images/icons.png) no-repeat -33px -34px; background-size: 200px auto;}

/*메인- QR코드 레이어 팝업*/
#main-qrcode .layer-content {height: 350px; border-radius: 0px 0px 20px 20px;}
#main-qrcode .qrcode-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 1;}
#main-qrcode .qrcode-header h2 {height: 56px; line-height: 56px; font-size: 18px; color: #050505; text-align: center;}
#main-qrcode .qr-code-wrap {margin-top: 90px;}
#main-qrcode .qr-code-wrap p {text-align: center; font-size: 15px;}
#main-qrcode .qr-code-wrap .qrcode {width: 160px; height: 160px; margin: 0 auto 30px; font: 0/0 a; background: url(../../static/images/qr_code_img.png) no-repeat 50% 50%; background-size: 200px auto;}

/*급여 내역 상세 - 기타수당 입력 레이어 팝업*/
#pay-etc-layer .layer-content {height: 200px; border-radius: 40px 40px 0px 0px;}
#pay-etc-layer .pay-etc-layer-header {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #FFF; border-radius: 15px 15px 0px 0px; z-index: 1;}
#pay-etc-layer .pay-etc-layer-header h2 {height: 56px; line-height: 56px; font-size: 18px; font-weight: 700; color: #050505; text-align: center;}
#pay-etc-layer .pay-etc-layer-header .close-btn {top: 13px;}
#pay-etc-layer .pay-etc-layer-header .btn-confirm {top: 14px; left: auto; right: 6px; width: auto; height: auto; padding: 5px 10px; text-indent: inherit; background: none; font-size: 14px; font-weight: 500; color: #333;}
#pay-etc-layer .pay-etc-layer-cont {padding: 80px 24px 0px}
/*#pay-etc-layer .pay-etc-layer-cont .input-wrap label {font-size: 13px;}
#pay-etc-layer .pay-etc-layer-cont .input-wrap input {width: 15px; padding: 7px 0px 5px; display: inline-block;}
#pay-etc-layer .pay-etc-layer-cont .input-wrap .ui-input-text {display: inline-block;}
#pay-etc-layer .pay-etc-layer-cont .input-wrap .won {display: inline-block; font-size: 18px; color: #050505;}*/

/*삭제 및 취소 레이어 팝업*/
#layer-delete-wrap .layer-content {background-color: transparent;}
#layer-delete-wrap .delete-wrap {margin: 20px 10px;}
#layer-delete-wrap .delete-wrap a {display: block; height: 55px; line-height: 55px; text-align: center; font-size: 18px; color: #050505; background-color: #FFF;}
#layer-delete-wrap .delete-wrap a:active {font-size: 17px;}
#layer-delete-wrap .delete-wrap .delete {margin-bottom: 10px;}
#layer-delete-wrap .delete-wrap .delete li {margin-bottom: 1px;}
#layer-delete-wrap .delete-wrap .delete li a {background-color: #d0d0d0;}
#layer-delete-wrap .delete-wrap .delete .btn1 a {border-radius: 15px 15px 0px 0px;}
#layer-delete-wrap .delete-wrap .delete .btn2 a {border-radius: 0px 0px 15px 15px;}
#layer-delete-wrap .delete-wrap .cancel a {border-radius: 15px;}

/*급여 상세 레이어 팝업*/
.popup-payment .layer-content {top: 50%; left: 8%; width: 84%; height: 200px; margin-top: -100px; border-radius: 10px; text-align: center; background-color: #000;}
.popup-payment .layer-content:before {content: ''; position: relative; display: inline-block; vertical-align: middle; width: 0px; height: 100%; font: 0/0 a;}
.popup-payment .layer-content .alert-cont {display: inline-block; vertical-align: middle; width: 94%; margin-left: -4px;}
.popup-payment .layer-content .alert-cont .text {font-size: 16px; color: #fff; line-height: 30px;}
.popup-payment .layer-content .alert-cont .btn a {display: inline-block; width: 120px; height: 50px; line-height: 50px; margin: 0px 3px; font-size: 16px; font-weight: 700; color: #FFF; border-radius: 5px;}
.popup-payment .layer-content .layer-close-btn {top: 10px; right: 10px; left: auto; background-image: url(../../static/images/icons2.png); background-position: -165px -125px;}
.popup-payment .layer-content .layer-close-btn:active {background-size: 200px auto; background-position: -165px -125px;}
.popup-payment.layer-popup-wrap .layer-grayLayer {background:rgba(0,0,0,0.6);}
#common-confirm .layer-content .alert-cont .btn a.sky {background-color: #5fc4f1;}

/* 휴게시간 레이어 팝업 */
#layer-rest-time .layer-content,
#layer-rest-time2 .layer-content {top: 50%; left: 8%; width: 84%; border-radius: 10px; text-align: center;transform:translateY(-50%);}
#layer-rest-time .layer-content .alert-cont,
#layer-rest-time2 .layer-content .alert-cont {padding:40px 0;}
#layer-rest-time .layer-content .alert-cont .rest-time-wrap,
#layer-rest-time2 .layer-content .alert-cont .rest-time-wrap {padding: 0 30px; text-align: left;}
#layer-rest-time .layer-content .alert-cont .btn a,
#layer-rest-time2 .layer-content .alert-cont .btn a {display: inline-block; width: 120px; height: 50px; line-height: 50px; margin: 0px 3px; font-size: 16px; font-weight: 700; color: #FFF; border-radius: 5px;}
#layer-rest-time .layer-content .alert-cont .btn a.lightgray,
#layer-rest-time2 .layer-content .alert-cont .btn a.lightgray {background-color:#b2b2b2;}
#layer-rest-time .layer-content .alert-cont .btn a.sky,
#layer-rest-time2 .layer-content .alert-cont .btn a.sky {background-color: #5fc4f1;}
.rest-time-wrap .rest-time-title {margin-bottom:15px;font-weight:700;}
.rest-time-wrap .rest-time-title span {display:inline-block;margin-left:10px;}
.rest-time-wrap .input-wrap {padding: 0 0 15px 0; font-size: 0;}
.rest-time-wrap .input-wrap li {display: inline-block; vertical-align: middle; padding: 0; margin: 0 0 15px 0; font-size: 15px; color: #333;}
.rest-time-wrap .input-wrap .rest-title {width: 35%; height: 40px; line-height: 40px;}
.rest-time-wrap .input-wrap li:nth-child(even) {position: relative; width: 65%; text-align: right;}
.rest-time-wrap .input-wrap li label {display: none;}
.rest-time-wrap .input-wrap li .ui-input-text {display: inline-block; width: 110px;}
.rest-time-wrap .input-wrap li input {padding: 9px 5px 9px 5px; font-size: 15px; text-align:right; position: relative; z-index: 1;}
.rest-time-wrap .input-wrap li input::placeholder {font-size: 15px;}
.rest-time-wrap .input-wrap li .line {position: absolute; right: 0; bottom: 0; width: 75px;}
/* 20220214 추가 */
#layer-multi-rest-time .layer-content {top: 50%; left: 8%; width: 84%; border-radius: 10px; text-align: center;transform:translateY(-50%);}
#layer-multi-rest-time .layer-content .layer-close-btn {top:14px;right:12px;left:auto;}
#layer-multi-rest-time .layer-content .alert-cont {padding:60px 0 40px;}
#layer-multi-rest-time .layer-content .alert-cont .rest-time-wrap {padding: 0 30px 30px; text-align: left;}
#layer-multi-rest-time .layer-content .alert-cont .btn {padding:0 24px;}
#layer-multi-rest-time .layer-content .alert-cont .btn a {display: block; width: 100%; height: 50px; line-height: 50px; margin: 0; font-size: 16px; font-weight: 700; color: #FFF; border-radius: 5px;background-color:#02cbd3;}
#layer-multi-rest-time .layer-content .alert-cont .btn a.off {color: #afafb2; background-color: #f1f2f5;pointer-events:none;}
#layer-multi-rest-time .btn-time-add {display: inline-block; width: 24px; height: 24px; margin-left: 3px; text-indent: -99999px; background: url(../../static/images/btn-item-add.png) no-repeat center center; background-size: 20px auto;}
#layer-multi-rest-time .btn-time-del {display: inline-block; width: 24px; height: 24px; text-indent: -99999px; background: url(../../static/images/btn-item-del.png) no-repeat center center; background-size: 20px auto;}
.breaktime-list li {margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.breaktime-list li:last-of-type {margin-bottom:0;}
.breaktime-list .input-wrap {padding-bottom:0;}
.breaktime-list .input-wrap li {display:inline-block;width:initial !important;margin:0;padding:0;}
.rest-time-wrap .breaktime-list .input-wrap li .ui-input-text {width:86px;}
.rest-time-wrap .breaktime-list .input-wrap li .ui-input-text:before {content:':';position:absolute;right:26px;top:5px;}
.rest-time-wrap .breaktime-list .input-wrap li .ui-input-text input {text-align:left;padding:6px;}
.rest-time-wrap .breaktime-list .input-wrap li .line {width:100%;}
.rest-time-wrap .breaktime-list .input-wrap li.tilde {margin:0 6px;}
.rest-time-wrap .breaktime-list .input-wrap li.error .ui-input-text input,
.rest-time-wrap .breaktime-list .input-wrap li.error .ui-input-text:before {color:#f41100;}

/*사업장 등록 - 근무 스케줄 레이어 팝업*/
.popup-workschd .layer-content {top: 50%; left: 8%; width: 84%; height: auto; padding: 38px 0 30px; margin-top: -100px; border-radius: 10px; text-align: center; background-color: #000;}
.popup-workschd .layer-content:before {content: ''; position: relative; display: inline-block; vertical-align: middle; width: 0px; height: 100%; font: 0/0 a;}
.popup-workschd .layer-content .alert-cont {display: inline-block; vertical-align: middle; width: 94%; margin-left: -4px;}
.popup-workschd .layer-content .alert-cont .text {font-size: 16px; color: #fff; line-height: 30px;}
.popup-workschd .layer-content .alert-cont .btn a {display: inline-block; width: 120px; height: 50px; line-height: 50px; margin: 0px 3px; font-size: 16px; font-weight: 700; color: #FFF; border-radius: 5px;}
.popup-workschd .layer-content .layer-close-btn {top: 10px; right: 10px; left: auto; background-image: url(../../static/images/icons2.png); background-position: -165px -125px;}
.popup-workschd .layer-content .layer-close-btn:active {background-size: 200px auto; background-position: -165px -125px;}
.popup-workschd.layer-popup-wrap .layer-grayLayer {background:rgba(0,0,0,0.6);}

/* 전자서명 동의 레이어 팝업 */
#layer-electro-sign .layer-content {top: 50%; left: 8%; width: 84%; border-radius: 10px; text-align: center;transform:translateY(-50%);}
#layer-electro-sign .layer-content .alert-cont {padding: 50px 0 40px;}
#layer-electro-sign .layer-content .alert-cont .btn a {display: inline-block; width: 120px; height: 50px; line-height: 50px; margin: 0px 3px; font-size: 16px; font-weight: 700; color: #FFF; border-radius: 5px;}
#layer-electro-sign .layer-content .alert-cont .btn a.sky {background-color: #5fc4f1;}
#layer-electro-sign .layer-content .alert-cont .electro-sign-wrap {padding: 0 20px; margin-bottom: 30px;}
#layer-electro-sign .layer-content .alert-cont .electro-sign-wrap p {line-height: 2;}
#layer-electro-sign .layer-content .alert-cont .electro-sign-wrap .btn-electro-sign {display:inline-block;padding:2px 10px 2px 30px;margin:10px 6px 0 0;border:1px solid #ddd;border-radius:3px;color:#555;text-decoration:none;background-color:#f5f5f5;cursor:pointer;position:relative;}
#layer-electro-sign .layer-content .alert-cont .electro-sign-wrap .btn-electro-sign:before {content:'';display:block;width:25px;height:25px;background:url(../../static/images/icons.png) no-repeat -88px -32px;background-size:200px auto;position:absolute;left:5px;top:4px;}
#layer-electro-sign .layer-content .alert-cont .electro-sign-wrap .btn-electro-sign.active {border-color:#58d8aa;color:#fff;background-color:#58d8aa;}
#layer-electro-sign .layer-content .alert-cont .electro-sign-wrap .btn-electro-sign.active:before {background-position:-31px -32px;}
#layer-electro-sign .layer-content .alert-cont .btn a.off {color: #afafb2;background-color: #f1f2f5;pointer-events:none;}

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

/* common */
.mgt10 {margin-top: 10px !important;}
.tx12 {font-size: 12px !important;}

/*etc*/
.color-orange {color: #f41100;}
.blind {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0);}
.rolldate-container .rolldate-mask {z-index: 10000 !important;}
.rolldate-container .rolldate-panel {z-index: 10001 !important;}
.toast {position: fixed; display: block; bottom: 80px; left: 10%; width: 80%; padding: 15px; animation: fade 1.5s ease 2 alternate; background-color: #363d44; border-radius: 10px; font-size: 13px; line-height: 1.6; color: #FFF; text-align: center; opacity: 0; z-index: 10000; box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.3);}
.loading-workni {display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 100001; font-size: 0; text-align: center;}
.loading-workni.on {display: block;}
.loading-workni:before {content: ''; position: relative; display: inline-block; vertical-align: middle; width: 0px; height: 100%;}
.loading-workni span {display: inline-block; vertical-align: middle; width: 100px; height: 100px; border-radius: 100%; background: url(../../static/images/loading-img.gif); background-size: 100px auto;}
.name-overlap {display: block; width: 36px; height: 17px; line-height: 17px; text-align: center; font-size: 10px; font-weight: 700; color: #FFF; font-family: 'roboto'; background-color: #b2b2b2; border-radius: 3px;}

@keyframes footIconRotate {
	0% {transform: rotateY(0deg);}
	to {transform: rotateY(360deg);}
}

@keyframes widthSlide {
	0% {width: 0;}
	to {width: 100%;}
}

@keyframes fade {
	0% {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fadeUp {
	0% {opacity: 0; top: 20px;}
	to {opacity: 1; top: 0px;}
}

@keyframes fadeDown {
	0% {opacity: 0; top: 0px;}
	to {opacity: 1; top: 10px;}
}

@keyframes ContentFadeUp {
	0% {opacity: 0; padding-top: 20px;}
	to {opacity: 1; padding-top: 0px;}
}

@keyframes fadeLeft {
	0% {opacity: 0; left: -10px;}
	to {opacity: 1; left: 0px;}
}

@keyframes fadeRight {
	0% {opacity: 0; right: -10px;}
	to {opacity: 1; right: 0px;}
}

@keyframes graphBar {
	0% {width: 0;}
}

@keyframes graphBarVertical {
	0% {height: 0;}
}

@keyframes mainSliderLine1 {
	0% {top: -20px; left: -20px; opacity: 0; animation-timing-function: cubic-bezier(1,0,0.8,1);}
	to {top: -10px; left: -10px; opacity: 1;}
}

@keyframes mainSliderLine2 {
	0% {top: -20px; right: -20px; opacity: 0; animation-timing-function: cubic-bezier(1,0,0.8,1);}
	to {top: -10px; right: -10px; opacity: 1;}
}

@keyframes mainSliderLine3 {
	0% {bottom: -20px; left: -20px; opacity: 0; animation-timing-function: cubic-bezier(1,0,0.8,1);}
	to {bottom: -10px; left: -10px; opacity: 1;}
}

@keyframes mainSliderLine4 {
	0% {bottom: -20px; right: -20px; opacity: 0; animation-timing-function: cubic-bezier(1,0,0.8,1);}
	to {bottom: -10px; right: -10px; opacity: 1;}
}

@keyframes mainRestImg {
	0% {opacity: 0; top: 0px;}
	40% {opacity: 1; top: 13px;}
	60% {opacity: 1; top: 9px;}
	to {opacity: 1; top: 10px;}
}

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

@media screen and (orientation: landscape) {
	.business-top-bg {top: -920px; width: 1200px; height: 1200px; margin-left: -600px;}
}

@media screen and (orientation: portrait) {
	.ui-mobile .ui-page {min-height: 100%;}
}

@media screen and (min-width: 768px) {
	.business-top-bg {position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 200px; margin-left: 0px; border-radius: 0;}
}

@media screen and (min-width:411px) and (max-width:767px) {
	.office-time-content .time-info-all .office-time-icons li {padding-left: 20px;}
	.office-time-content .time-info-all .office-time-icons .step1 {padding-right: 20px;}
}

@media screen and (max-width: 320px) {
	#work-register-group1 .layer-content .layer-bottom-btn,
	#work-register-date .layer-content .layer-bottom-btn {bottom: 30px;}
	#work-register-date .layer-content .work-date-text {margin: 15px;}
	#work-register-date .layer-content .work-date-picker .datepicker td {height: 30px;}
	#work-register-date .layer-content .work-date-picker .datepicker td p {height: 30px; line-height: 30px;}
	#work-register-date .layer-content .work-date-picker .datepicker td p:after {top: 2px; width: 24px; height: 24px; margin-left: -12px;}
	.office-time-content .time-info-all .office-work-time li {float: left; width: 50%; padding: 15px 0px 13px 8%;}
	.office-time-content .time-info-all .office-time-icons li,
	.office-time-content .time-info-all .office-time-icons .step1 {width: 50%; padding: 0 0 0 10%; text-align: left;}
	.office-time-content .time-info-all .office-time-icons .step1:after {display: none;}
	.electro-approval-wrap .approval-view-cont .tab-cont .content .search-list li .item-wrap .date {left: 124px;}
	.main .main-group.slider-wrap .office-work-check .icon {padding: 0 10px;}
	.main .main-group.slider-wrap .office-work-check .time-select {padding: 0 10px;}
	.main .main-group.slider-wrap .office-work-time .st1 li .time {font-size: 13px;}
	.main .main-group.slider-wrap .office-work-time .st2 li .time {margin-left: 0px;}
	.main .main-group.work-contract-wrap .contract-btn-wrap li a span {font-size: 13px;}
	.main .main-group.graph-wrap .graph-cont .text-wrap {right: 0;}
	.work-register-wrap .work-group.group2 .member-work-wrap .member li .name {left: 45px;}
	.work-register-wrap .work-group.group2 .member-work-wrap .member li .time .select .ui-input-text {width: 67px;}
	.work-register-wrap .work-group.group2 .member-work-wrap .member li .time .select .ui-input-text:after {right: 16px;}
	.work-register-wrap .work-group.group2 .member-work-wrap .member li .time .select input {font-size: 14px;}
	.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .title {top: 23px;}
	.main .main-group.graph-wrap .graph-cont .percent-wrap li > div .percent {font-size: 18px;}
	.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap {width: 120px; background-size: 116px auto; background-position: 50% 70px;}
	.office-time-content .office-analysis-group.graph-wrap .graph-cont .img-wrap .number {top: 113px; font-size: 14px;}
    .main .header-fix .date-select .ui-input-text {padding-left:16px;}
    .main .header-fix .date-select .ui-input-text:after {right:12px;}
    .main .header-fix .date-select .weekday {right:52px;}
    .main .header-fix .note {right:16px;}
    .main .header-fix .qr-code {right:41px;}
    .main .header-fix .work-check-btn {right:70px;}

    .electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.cont dt {width:60px;}
    .item.tt-vacation.cont dd {width:calc(100% - 60px);}
    .electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date2 {height:auto;text-align:right;}
    .electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date2 > span {position:relative;}
    .electro-approval-wrap .electro-approval-content .approval-group .item.tt-vacation.date .v-date2 > span:before {content:'\A';white-space:pre;}
    .schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .name {line-height:40px;}
    .schedule-calendar-wrap .calendar-cont .schedule-list .item .member li .name .position {display:block;margin-left:0;margin-top:-9px;}
    .electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time li:nth-of-type(2) .cont,
    .electro-approval-wrap .approval-view-cont .tab-cont .content .cont-area .item .cont-list.tt-time li:nth-of-type(3) .cont {position:relative;float:none;bottom:auto;margin-top:10px;text-align:left;}
    .approval-group.tt-weekday .work-time-list .item .input-wrap {padding-left:22%;}
    .electro-approval-wrap .electro-approval-content .approval-group .item.overtime-set .modify .cont {position:relative;}

    #schedule-work-register-1 .work-register-wrap .work-group.group2 .member-work-wrap .member li .name {line-height:1;margin-top:11px;}
    #schedule-work-register-1 .work-register-wrap .work-group.group2 .member-work-wrap .member li .name .position {display:block;margin-top:4px;margin-left:0;}
    #schedule-work-register-1 .work-register-wrap .work-group.group2 .member-work-wrap .member li .name .name-overlap {left:-43px;top:26px;}

	#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .name {line-height:1;margin-top:11px;}
	#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .name .position {display:block;margin-top:4px;margin-left:0;}
	#work-register-group1 .layer-content .work-group-list .work-group-time .work-group-member .member li .name .name-overlap {left:-50px;top:26px;}

	.analysis-view-wrap .analysis-view-content .view-list li a .name {line-height:1;margin-top:11px;}
	.analysis-view-wrap .analysis-view-content .view-list li a .name .position {display:block;margin-top:4px;margin-left:0;}
	.analysis-view-wrap .analysis-view-content .view-list li a .name .name-overlap {left:2px;top:26px;}

	.pay-settlement-wrap.view-wrap .pay-settlement-header .name {font-size:20px;}
	#pay-settlement-view .pay-settlement-wrap.view-wrap .pay-settlement-header .input-wrap {padding:11px 6px;}
	#pay-settlement-view .pay-settlement-wrap .pay-settlement-header .input-wrap li .ui-input-text input {width:90px;font-size:20px;}
	#pay-settlement-view .pay-settlement-wrap .pay-settlement-header .input-wrap li .ui-input-text:after {top:24px;}
}
@media screen and (max-width: 360px) {
    .main .main-group.admin-wrap .graph-list-admin li.item2 .legend span {display: block; margin-top: 4px;}
}
@media screen and (min-width: 460chart-nodatapx) {
    .office-time-content .office-analysis-group.graph-wrap .graph-cont .chart-nodata.on {left:10%;}
}