@charset "UTF-8";
/* ==========================================================================
    basic color
   ========================================================================== */
/* 백그라운드(상단 검색창) */
/* 구분라인 */
/* 리스트 우측 화살표아이콘 */
/* 신청서 상세내역, histroy 코멘트, 알림조회, 설문조사, 근무스케쥴 배경 */
/* 카드 소타이틀, 타임라인 */
/* 설문조사(상태) */
/* 우측 클릭버튼 */
/* 캘린더 범례 휴일 표시 */
/* $basic7thColor:#f6f8fa;
$basic9thColor:#a9b8c8;
$basic10thColor:#dce4ec; 더보기 박스 컬러
$basic11thColor:#e2e8ef;
$basic12thColor:#e6eaef;
$basic13thColor:#a7acb4;
$basic14thColor:#a6a6a6;

$basic17thColor:#35383f; */
/* ==========================================================================
    main color
   ========================================================================== */
/* 메인컬러 */
/* ==========================================================================
    sub color
   ========================================================================== */
/* 메인-신청,결재,완료 */
/* 모든 텍스트 컬러 */
/* 신청서 결재라인 */
/* 각 기능버튼(사원검색) 및 아이콘 컬러, 더보기 텍스트 컬러 */
/* 설문조사 답변 넘버링 */
/* 화상조직도(하위부서), 설문조사(상태) 배경 */
/* 신청서 상세내역, histroy 코멘트, 알림조회, 설문조사, 근무스케쥴 배경 */
/* histroy 코멘트 */
/* 근태 */
/* $sub15thColor:#abbace;
$sub9thColor:#50587d;
$sub10thColor:#c4d1dc; */
/* 버튼 */
/* 변경, 삭제 */
/* 그라데이션 */
@font-face {
  font-family: "icomoon";
  src: url("/common/iconfont/icomoon.eot?vo54k5");
  src: url("/common/iconfont/icomoon.eot?vo54k5#iefix") format("embedded-opentype"), url("/common/iconfont/icomoon.ttf?vo54k5") format("truetype"), url("/common/iconfont/icomoon.woff?vo54k5") format("woff"), url("/common/iconfont/icomoon.svg?vo54k5#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 메뉴아이콘 --------------------------------------------- */
.icon-pas-search:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-pcm_pay:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-tam-work:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-tam-commute:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-orm:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-pas-timeline:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-sys-appl:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-pas-stat:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-pas-info:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-sys-alarm:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-tem_survey:before {
  content: "";
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-sys-notice:before {
  content: "";
  /* background: -webkit-linear-gradient(#009afa, #6e6cf6); */
  background: -webkit-linear-gradient(#ff4747, #ff4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 아이콘 --------------------------------------------- */
.icon-alim:before {
  content: "";
}

.icon-appl_end:before {
  content: "";
}

.icon-back:before {
  content: "";
}

.icon-close:before {
  content: "";
}

.icon-down_arrow:before {
  content: "";
}

.icon-ellipsis:before {
  content: "";
}

.icon-infoedit:before {
  content: "";
}

.icon-left_arrow:before {
  content: "";
}

.icon-logout:before {
  content: "";
}

.icon-logo:before {
  content: "";
}

.icon-select_arrow:before {
  content: "";
}

.icon-menu:before {
  content: "";
}

.icon-right_arrow:before {
  content: "";
}

.icon-search:before {
  content: "";
}

.icon-up_arrow:before {
  content: "";
}

.icon-email:before {
  content: "";
}

.icon-file:before {
  content: "";
}

.icon-eval:before {
  content: "";
}

.icon-info:before {
  content: "";
}

.icon-list_arrow:before {
  content: "";
}

.icon-goto_arrow:after {
  content: "";
}

/* 알림 - 신청서 -바로가기 버튼 */
.icon-list_select_arrow:before {
  content: "";
}

.icon-telephone:before {
  content: "";
}

.icon-move:before {
  content: "";
}

.icon-private:before {
  content: "";
}

.icon-return:before {
  content: "";
}

.icon-work:before {
  content: "";
}

.icon-ok:before {
  content: "";
}

.icon-school:before {
  content: "";
}

.icon-award:before {
  content: "";
}

.icon-add:before {
  content: "";
}

.icon-list:before {
  content: "";
}

.icon-write:before {
  content: "";
}

.icon-add-search:before {
  content: "";
}

.icon-calenda:before {
  content: "";
}

.icon-plus:before {
  content: "";
}

.icon-mobile:before {
  content: "";
}

.icon-camera:before {
  content: "";
}

.icon-no-private:before {
  content: "";
}

.icon-delete:before {
  content: "";
}

.icon-check:before {
  content: "";
}

.icon-star:before {
  content: "";
}

.icon-radio:before {
  content: "";
}

.icon-radio_on:before {
  content: "";
}

.icon-check_on:before {
  content: "";
}

.icon-delete2:before {
  content: "";
}

.icon-popup:before {
  content: "";
}

.icon-worktime-list:before {
  content: "";
}

.icon-refresh:before {
  content: "";
}

.icon-cancel:before {
  content: "";
}

.icon-message:before {
  content: "";
}

.icon-birth:before {
  content: "";
}

.icon-edu:before {
  content: "";
  color: #ff4747;
}

.icon-notice:before {
  content: "";
}

.h-login {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.h-login-body {
  background: #e7ecf1 url("/common/images/wallpaper/wallpaper.jpg") center center no-repeat !important;
  background-size: contain !important;
  min-height: 100vh !important;
}

.h-login-wrap {
  position: absolute;
  z-index: 100 !important;
}

.h-login-form {
  display: flex;
  justify-content: center;
  height: 100vh;
  color: #232323;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
}

.h-login-ci-box {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 123px 0 0 0;
}
.h-login-ci-box h1{
  width: 202px;
  height: 44px;
  font-size: 2.4rem;
  color: #748cd2;
  background: url("/common/images/login/logo.png") center center no-repeat;
  background-size: 100%;
}

.h_login_input {
  color: #454f63;
  background: #76cfdd;
}
.h_login_input::placeholder {
  color: #adbdcc;
}

.h-login-check-save-id {
  display: inline-block;
}
.h-login-check-save-id i.h-login-ico {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: transparent;
  font-size: 14px;
  background: url("/common/images/login/ico_radio.png") no-repeat;
  background-position: 0 0;
  background-size: 200%;
}
.h-login-check-save-id i.h-login-ico.on {
  background-position: -20px 0;
}
.h-login-check-save-id label {
  color: #868daa !important;
}

.h-login-save-txt {
  color: #868daa !important;
  vertical-align: middle;
}

.h-btn-login {
  height: 45px !important;
  color: #FFFFFF !important;
  padding: 0;
  border-radius: 30px !important;
  background: #da291c;
  font-size: 1.3rem !important;
  width: 100% !important;
}
.h-btn-login.v-btn {
  height: 45px !important;
  margin-top: 30px;
}

.h-login-leftImg {
  position: absolute;
  top: -130px;
  left: -190px;
  background: url(/common/images/login/bg_login_left.png) no-repeat 0 0;
  z-index: 0;
  background-size: 100%;
  width: 390px;
  height: 360px;
}

.h-login-rightImg_small {
  position: absolute;
  right: -15px;
  background: url(/common/images/login/bg_login_right.png) no-repeat 0 0;
  z-index: 0;
  top: calc(100% - -0px);
  /* bottom:20px; */
  background-size: contain;
  width: 52px;
  height: 52px;
}

.h-login-rightImg_big {
  position: absolute;
  right: -400px;
  background: url(/common/images/login/bg_login_right2.png) no-repeat 0 0;
  z-index: 0;
  top: calc(100% - 60px);
  background-size: 100%;
  width: 357px;
  height: 357px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .plr16 {
    padding: 0 167px !important;
  }

  .h-login-leftImg {
    position: absolute;
    top: 135px !important;
    left: -196px;
    background: url(/common/images/login/bg_login_left.png) no-repeat 0 0;
    z-index: 0;
    background-size: 100%;
    width: 390px;
    height: 370px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .plr16 {
    padding: 0 167px !important;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1365px) {
  .plr16 {
    padding: 0 167px !important;
  }
}
@media screen and (min-width: 1366px) and (max-width: 9000px) {
  .h-login-ci-box {
    margin: 60px 0 0 0 !important;
  }

  .plr16 {
    padding: 0 180px !important;
  }

  .h-login-leftImg {
    position: absolute;
    top: 100px;
    left: -30px;
    background: url(/common/images/login/bg_login_left.png) no-repeat 0 0;
    z-index: 0;
    background-size: 100%;
    width: 390px;
    height: 370px;
  }

  .h-login-rightImg_small {
    position: absolute;
    right: 190px;
    background: url(/common/images/login/bg_login_right.png) no-repeat 0 0;
    z-index: 0;
    top: calc(100% - 230px);
    /* bottom:20px; */
    background-size: 100%;
    width: 53px;
    height: 53px;
  }

  /* 	.h-login-rightImg_big {
  		position:absolute;right:-200px;background:url(/common/images/login/bg_login_right2.png) no-repeat 0 0;z-index:0;
  		top: calc(100% - 450px);
  		background-size:100%;
  		width:357px;height:357px;
  	}  */
}
/* ==========================================================================
    vuetify.min.css 
   ========================================================================== */
.h_login_select .theme--light.v-icon {
  display: inline-block;
  width: 35px !important;
  height: 25px !important;
  color: transparent !important;
}
.h_login_select .h_login_select .theme--light.v-select .v-select__selections {
  color: #adbdcc !important;
}
.h_login_select i.icon-login-select {
  background: url("/common/images/login/ico_select.png") 0 0 no-repeat;
  width: 32px !important;
  height: 25px !important;
}

.theme--light.v-text-field .v-input__slot:before {
  border-color: #ccd6df !important;
}

.theme--light.v-text-field:not(.v-input--has-state) .v-input__slot:hover:before {
  border-color: #ccd6df !important;
}

.theme--light.v-label {
  color: #adbdcc !important;
}

/* ==========================================================================
     interaction css
   ========================================================================== */
.spinimage {
  -webkit-animation: spin 8s infinite linear;
  -o-animation: spin 8s infinite linear;
  -moz-animation: spin 8s infinite linear;
  animation: spin 8s infinite linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.h-main-wrap {
  position: absolute;
  top: 0;
  left: 0;
}

/* header */
header {
  height: 50px !important;
  color: #454f63 !important;
  background: #FFFFFF;
}
header.shadow {
  box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.22);
}
header.main {
  /* background:#48bdb4; */
}
header.main i {
  color: #333 !important;
}
header.main hgroup h1.logo i {
  display: block;
  font-size: 1.5rem;
}
header.main .navbar-brand img {
  width: 143px;
}
header.main nav .h-navbar-btn .badge {
  color: #da291c !important;
  background: #FFFFFF !important;
  vertical-align: middle;
}
header hgroup h1.logo i {
  display: none;
}
header hgroup h1.menu i {
  position: absolute;
  top: -12px;
  left: -10px;
  display: block;
  font-size: 3rem;
}
header hgroup h1.menu-close i {
  position: absolute;
  top: -12px;
  left: -10px;
  display: block;
  font-size: 3rem;
}
header nav .h-navbar-btn li {
  display: inline-block;
  width: 2rem;
  text-align: center;
  color: #53586e;
}
header nav .h-navbar-btn li i {
  font-size: 2.7rem;
}
header nav .h-navbar-btn li .badge {
  position: absolute;
  right: 5.4rem;
  top: 0.3rem;
  display: flex;
  width: 1.3rem;
  height: 1.3rem;
  color: #FFFFFF !important;
  font-size: 0.8rem !important;
  font-family: Ariala;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 0rem !important;
  background: #da291c !important;
  border-radius: 1.3rem;
  z-index: 9;
}

/* menu */
.h-menu-icon-box {
  background: #ededed;
  /* , url('/common/images/menu/shape_s.png') center bottom no-repeat */
}
.h-menu-icon-box .h-menu-module {
  width: 80px;
  height: 120px;
  text-align: center;
  margin: auto;
}
.h-menu-icon-box .h-menu-module .h-menu-icons {
  height: 55px;
  padding: 0px;
}
.h-menu-icon-box .h-menu-module .h-menu-icons.on .h-menu-icon:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 75px;
  height: 75px;
  border-radius: 100%;
  left: -10px;
  top: -10px;
  border: 10px solid #d1d1d1;
  background: #fff;
  z-index: -1;
}
.h-menu-icon-box .h-menu-module .h-menu-icons.on .h-menu-icon20 {
  display: none;
}
.h-menu-icon-box .h-menu-module .h-menu-icons .h-menu-icon {
  position: relative;
  z-index: 2;
  width: 55px;
  height: 55px;
  line-height: 55px;
  background: #FFFFFF;
  border-radius: 100%;
  margin: 0 auto;
  box-shadow: 0px 0px 0px 0px;
  border: 1px solid #cbcbcb;
}
.h-menu-icon-box .h-menu-module .h-menu-icons .h-menu-icon i {
  font-size: 2.2rem;
}
.h-menu-icon-box .h-menu-module .h-menu-icons .h-menu-icon20 {
  position: relative;
  z-index: 1;
  left: 7px;
  top: -55px;
  width: 55px;
  height: 55px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 55px;
  margin: 0 auto;
}
.h-menu-icon-box .h-menu-module .h-menu-icons .h-menu-icon30 {
  display: none;
}
.h-menu-icon-box .h-menu-module .h-menu-icon-txt {
  display: block;
  width: 100%;
  text-align: center;
  color: #333;
  /* $basic1stColor */
  font-size: 1rem;
  margin: 10px 0 20px 0;
  font-weight: 600;
}

/* sub menu */
.h-menu-app {
  font-size: 0;
  padding: 20px 0 0 !important;
}
.h-menu-app > .h-menu-app-row {
  overflow: hidden;
  display: inline-block;
  height: 95px;
  padding: 10px;
  width: calc(100% / 3) !important;
  margin-bottom: 10px;
}
.h-menu-app li {
  overflow: hidden;
  display: inline-block;
  height: 95px;
  padding: 10px;
}
.h-menu-app li.h-sub-menu-container {
  display: none;
  width: 100%;
  padding: 0px;
  overflow: visible;
  height: auto;
}
.h-menu-app li.h-sub-menu-container .h-menu-sub-arrow {
  position: relative;
  left: 10px;
  top: 0;
  z-index: 1;
  height: 15px;
  width: 67px;
  background: url("/common/images/menu/menu_arrow.png") 0 0 no-repeat;
}
.h-menu-app li.h-sub-menu-container .h-menu-sub-app {
  padding: 10px 20px !important;
  margin: 0px;
  width: 100%;
  background: #a3a3a3;
  box-sizing: border-box;
}
.h-menu-app li.h-sub-menu-container .h-menu-sub-app .h-menu-sub-app-row {
  display: block;
  height: 45px;
  color: #FFFFFF;
  font-size: 1.1rem;
  text-align: left;
  vertical-align: middle;
  padding: 10px 0 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  margin: 0 20px;
  box-sizing: border-box;
  background: url("/common/images/menu/menu_sub_app_arrow.png") right center no-repeat;
}
.h-menu-app li.h-sub-menu-container .h-menu-sub-app .h-menu-sub-app-row:first-child {
  border-top: 0;
}

/* 신청서정보 */
ul.h-menu-apply-box li {
  display: inline-block;
  width: 70px;
  height: 70px;
  border-radius: 70px;
  font-size: 1rem;
  text-align: center;
  box-sizing: border-box;
  vertical-align: top;
}
ul.h-menu-apply-box li.appl {
  color: #4a4a4a;
  background: #fff;
  /* border:3px solid #209345; */
}
ul.h-menu-apply-box li.appr {
  color: #ce636a;
  background: #fff;
  /* border:3px solid #126fb5; */
}
ul.h-menu-apply-box li.comp {
  color: #28a745;
  background: #fff;
  /* border:3px solid #ff8e01; */
}
ul.h-menu-apply-box li.comp i {
  font-size: 4rem;
  vertical-align: top !important;
}
ul.h-menu-apply-box li.noAppl {
  width: 72px;
  height: 70px;
  line-height: 70px;
  color: #a8a8a8;
  background: #eff3f7;
  border: 1px solid #d9e2eb;
}
ul.h-menu-apply-box li .h-appl-count {
  font-size: 2rem;
  font-family: Arial;
  font-weight: 600;
  padding: 5px 0 0 0;
  margin: 0 auto;
}
ul.h-menu-apply-box li .h-end {
  height: 3.5rem;
  margin: 0 0 0 2px;
}
ul.h-menu-apply-box li:nth-child(even) {
  width: 20px !important;
  color: #bababa;
  font-size: 1.4rem;
  text-align: center;
  padding: 15px 0 0 0;
}

.icon-apply {
  width: 3.6rem;
  height: 3.6rem;
}

.icon-apply + span {
  width: 3.6rem;
  display: inline-block;
  text-align: center;
  margin-top: 0;
  position: relative;
  top: -5px;
  left: 3px;
}

dl.h-menu-apply-cnt {
  line-height: 1.9rem;
}

dl.h-menu-apply-cnt dt {
  display: inline-block;
  color: #000;
  font-size: 1.1rem;
  letter-spacing: -0.5px;
}

dl.h-menu-apply-cnt dd {
  float: right;
  color: #da291c;
  font-size: 1.6rem;
  font-family: Arial;
  font-weight: 600;
  text-align: right;
  vertical-align: top;
}

/* 연차정보 */
.h-main-bln-cnt {
  color: #ff4747;
  font-size: 1.9rem;
  font-weight: 600;
  font-family: Arial;
}

.h-main-gen-cnt {
  color: #a7a7a7;
  font-size: 1.2rem;
}

.h-holiday-btn {
  width: 90px;
  height: 35px;
  line-height: 35px;
  border-radius: 40px;
  color: #fff;
  background: #ff4747;
  text-align: center;
  font-size: 1rem;
}

/* 공지사항 */
ul.h-main-notice li {
  border-top: 1px solid #eaeaea;
  padding: 7px 0px;
}
ul.h-main-notice li .h-main-noti-title {
  color: #444;
  font-size: 1.2rem;
  font-weight: 600;
}
ul.h-main-notice li .h-main-noti-new {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  background: #da291c;
  line-height: 20px;
  vertical-align: top;
  font-size: 12px;
}
ul.h-main-notice li .h-main-noti-txt {
  color: #646464;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
ul.h-main-notice li i {
  color: #d5d5d5;
  font-size: 1.5rem;
  vertical-align: middle;
}
ul.h-main-notice li:first-child {
  border-top: 0;
}

.h-main-vac .h-main-noti-title {
  color: #444;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

/* 팀정보 */
.h-main-team-list > li {
  position: relative;
  padding: 8px 0;
  border-top: 1px dotted #eee;
}
.h-main-team-list > li .h-menu-photo-wrap {
  display: inline-block;
  color: #444;
  vertical-align: top;
}
.h-main-team-list > li .h-menu-photo-wrap .photo {
  border: 1px solid #c7d1d8;
  overflow: hidden;
}
.h-main-team-list > li .h-menu-photo-wrap .photo.photo-sm {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.h-main-team-list > li .h-menu-photo-wrap .photo .team-state {
  position: absolute;
  top: 10px;
  left: 35px;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  border: 2px solid #FFFFFF;
  box-sizing: border-box;
}
.h-main-team-list > li .h-menu-photo-wrap .photo .team-state.off {
  background: #df174b;
}
.h-main-team-list > li .h-menu-photo-wrap .photo .team-state.on {
  background: #12d646;
  border: 2px solid #fff;
}
.h-main-team-list > li .h-menu-photo-wrap .photo img {
  max-width: 100%;
  height: auto;
}
.h-main-team-list > li .h-menu-photo-wrap ul {
  display: inline-block;
  width: 82px;
  vertical-align: top;
  padding: 7px 0 0 10px !important;
}
.h-main-team-list > li .h-menu-photo-wrap ul li {
  line-height: 1.3rem;
}
.h-main-team-list > li .h-main-team-info {
  display: inline-block;
  vertical-align: top;
}
.h-main-team-list > li .h-main-team-info ul {
  display: inline-block;
  width: auto;
}
.h-main-team-list > li .h-main-team-info ul li {
  line-height: 1.3rem;
  color: #444;
  font-size: 1rem;
  padding: 7px 0 0 0 !important;
}
.h-main-team-list > li .h-main-team-info ul li span strong {
  font-size: 0.95rem;
}
.h-main-team-list > li:first-child {
  border-top: 0;
}

/* 메인화면이 메뉴가 될 시 투명 백그라운드 */
/*.h-menu-container-back {background:rgba(0,0,0,0.32);position:fixed !important;z-index:998;width:100%;height:100%;display:none;}*/
.h-menu-container-back {
  background: white;
  position: fixed !important;
  z-index: 998;
  width: 100%;
  height: 100%;
  display: none;
}

/* 메인컨텐츠 컨테이너 */
.h-menu-container {
  background: #e7ecf0;
  position: absolute;
  left: -105vw;
  top: 49px;
  z-index: 999;
  padding-bottom: 0;
}

/* 미디어쿼리 */
@media screen and (min-width: 320px) and (max-width: 374px) {
  section * h1.d-none {
    display: none !important;
  }

  .h-main-card-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* notice */
  ul.h-main-notice li {
    padding: 0 !important;
  }
  ul.h-main-notice li .h-main-noti-txt {
    display: none !important;
  }
  ul.h-main-notice li:nth-child(n+2) {
    display: none !important;
  }

  ul.h-menu-apply-box li:nth-child(even) {
    width: 19px !important;
    color: #bababa;
    font-size: 1.4rem;
    text-align: center;
    padding: 15px 0 0 0;
    margin-left: -2px;
    flex: 0 0 40px;
  }
}
@media screen and (min-width: 375px) and (max-width: 413px) {
  section * h1.d-none {
    display: none !important;
  }

  .h-main-card-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* notice */
  ul.h-main-notice li {
    padding: 0 !important;
  }
  ul.h-main-notice li .h-main-noti-txt {
    display: none !important;
  }
  ul.h-main-notice li:nth-child(n+2) {
    display: none !important;
  }
}
@media screen and (min-width: 414px) and (max-width: 767px) {
  section * h1.d-none {
    display: none !important;
  }

  .h-main-card-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* notice */
  ul.h-main-notice li {
    padding: 0 !important;
  }
  ul.h-main-notice li .h-main-noti-txt {
    display: none !important;
  }
  ul.h-main-notice li:nth-child(n+2) {
    display: none !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  header.main {
    /* background:linear-gradient(10deg, rgba(71,189,179,1.0) 100%, rgba(71,1189,179,1.0) 100%)  !important; */
  }
  header hgroup h1.menu i {
    position: absolute;
    top: -20px !important;
    left: -10px;
    display: block;
    font-size: 3rem;
  }
  header hgroup h1.menu-close i {
    position: absolute;
    top: -20px !important;
    left: -10px;
    display: block;
    font-size: 3rem;
  }

  section * h1.d-none {
    display: block !important;
    height: 125px;
    line-height: 125px;
    text-align: center;
  }
  section * h1.d-none i {
    color: #FFFFFF !important;
    font-size: 3rem !important;
  }

  .h-list-card {
    padding: 30px !important;
  }

  /* notice */
  ul.h-main-notice li i {
    display: none !important;
  }
  ul.h-main-notice li:nth-child(n+2) .h-main-noti-txt {
    display: none !important;
  }

  ul.h-menu-apply-box li:nth-child(even) {
    width: 17px !important;
    color: #bababa;
    font-size: 1.4rem;
    text-align: center;
    padding: 15px 0 0 0;
    margin-left: -2px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 9000px) {
  header.main {
    /* background:#48bdb4 */
  }
  header hgroup h1.menu i {
    position: absolute;
    top: -20px !important;
    left: -10px;
    display: block;
    font-size: 3rem;
  }
  header hgroup h1.menu-close i {
    position: absolute;
    top: -20px !important;
    left: -10px;
    display: block;
    font-size: 3rem;
  }

  section * h1.d-none {
    display: block !important;
    height: 125px;
    line-height: 125px;
    text-align: center;
  }
  section * h1.d-none i {
    color: #FFFFFF !important;
    font-size: 3rem !important;
  }

  .h-list-card {
    padding: 30px !important;
  }

  /* notice */
  ul.h-main-notice li i {
    display: none !important;
  }
  ul.h-main-notice li:nth-child(n+2) .h-main-noti-txt {
    display: none !important;
  }

  ul.h-menu-apply-box li:nth-child(even) {
    width: 20px !important;
    color: #bababa;
    font-size: 1.4rem;
    text-align: center;
    padding: 15px 0 0 0;
  }
}
.empInfo .v-input__slot {
  min-height: 40px;
}
.empInfo .v-input__slot * {
  font-size: 15px;
}
.empInfo .h-input.v-text-field--outline input {
  margin-top: 0 !important;
}
.empInfo .h-textarea {
  margin-top: -10px;
}

/* .h-menu-close {position:absolute;right:5px;top:5px;z-index:10;color:#aaaaad;display:none; } */
/* hr.h-menu-close-line {
	border-color:#91a0f9 !important;margin:0 !important;padding:0 !important;
}
.h-menu-close {
	position:absolute;bottom:0;height:30px;color:#fff;z-index:1050;
}

.h-menu-card {
  border-color:#EAEAEA;
  .card-header {background:$basic1stColor;padding:0.25rem;}
  .card-body   {background:$basic1stColor;padding:0.25rem;font-size:0.8rem;color:#888383}
  .card-footer {background:$basic1stColor;padding:0.25rem;color:#a2a1a1;}
}

.h-menu-card-title { display:inline-block;color:#a6a6a6;font-size:1rem;padding:0.5rem 0 0 1rem; }
.h-menu-card-refresh-box {width:1.5rem;height:1.5rem;text-align:center;border-radius:1rem;cursor:pointer;}
.h-menu-card-refresh {font-size:1rem; color:#3d76aa;}

.h-menu-row {background:#fff;padding:10px;}





.h-menu-appr-box { height:30px;color:#414141;font-size:1.4rem;
  .h-count { color:#0496f9; }
}


.imgMeuLoader {
	max-width:200px;max-height:200px;
} */
/* ==========================================================================
         신청서
   ========================================================================== */
/* 신청서 신규추가 버튼 */
.h-apply-add-btn {
  color: #FFFFFF;
  font-size: 1.5rem;
  text-align: center;
  padding: 30px 0;
  background: #ff4747 !important;
}

.h-apply-add-txt {
  font-size: 1.3rem;
}

/* 신청서 추가 버튼(레이어팝업) */
.h-appl-type {
  background: #FFFFFF;
}
.h-appl-type li {
  color: #454f63 !important;
  font-weight: 600;
  border: 1px solid #c7d1d8;
  padding: 20px;
  margin: 10px 0 0 0;
}
.h-appl-type li:first-child {
  margin: 0;
}
.h-appl-type li i.icon-list_arrow {
  float: right;
}

/* 신청서 리스트 (신청정보) */
ul.h-photo-info li {
  font-size: 1.3rem;
  line-height: 1.5rem;
  color: #454f63;
}
ul.h-photo-info .apply-item {
  color: #a9b8c8;
  font-size: 1rem;
}
ul.h-photo-info .apply-date {
  color: #a9b8c8;
  font-size: 1rem;
}

/* 신청서리스트 코멘트 박스 + 알림조회 대화박스 */
/* .h-apply-comment-wrap {position:relative;}
.h-apply-comment-arrow {position:absolute;width:14px;height:26px;background:url(/common/images/sub/bg_position.png) 0 10px no-repeat;background-size:50%;z-index:100;} 
.h-apply-comment-box {
	background:$basic5thColor;border:1px solid #96c2e7;color:#558dc6;font-size:1rem;line-height:1.2rem;padding:10px;border-radius:7px;margin:0 0 0 6px;word-break:break-all;
	&.alarm {display:-webkit-inline-box;}
} */
/* 신청서리스트 코멘트 박스 + 알림조회 대화박스 */
.h-comment-box {
  position: relative;
  background: #f4f4f4;
  border: 1px solid #e0e0e0;
  color: #747474;
  font-size: 1rem;
  line-height: 1.2rem;
  padding: 10px !important;
  border-radius: 7px;
  margin: 0 0 0 6px !important;
  word-break: break-all;
  /* 알림조회 - 대화박스 넓이 증가에 관한 용도(글자수에 따라 늘어나게 처리) */
}
.h-comment-box.alarm {
  display: -webkit-inline-box;
}
.h-comment-box.left {
  float: none !important;
  /* 부트스트랩 css float:left가 먹어서 초기화하기 위해 필요 */
}
.h-comment-box.left:before {
  top: 10px;
  bottom: auto;
  left: -7px;
  border-width: 5px 6px 5px 0;
  border-color: transparent #8abae8;
}
.h-comment-box.left:after {
  top: 11px;
  bottom: auto;
  left: -6px;
  border-width: 4px 6px 4px 0;
  border-color: transparent #fff1f4;
}
.h-comment-box:before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 40px;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #8abae8 transparent;
  display: block;
  width: 0;
}
.h-comment-box:after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 47px;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #fff1f4 transparent;
  display: block;
  width: 0;
}

/* 결재라인 */
.h-appr-line {
  padding: 20px 20px 0 20px;
  text-align: center;
  background: #fff;
  /* 승인내역 진행상태 문구 */
}
.h-appr-line .h-appr-line-selector {
  border: 0px;
  border-bottom: 1px solid #bfbfbf;
  color: #bcb9b9;
}
.h-appr-line .h-appr-combo {
  margin-top: 10px;
}
.h-appr-line .h-appr-combo i.icon-select_arrow {
  color: #454f63;
  font-size: 2rem;
}
.h-appr-line .h-appr-combo .v-input__slot {
  background: #FFFFFF !important;
  margin: 0 !important;
}
.h-appr-line .theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
  border-radius: 5px !important;
}
.h-appr-line .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.07), 0 1px 15px 0 rgba(0, 0, 0, 0.1) !important;
}
.h-appr-line .h-appr-status-txt {
  color: #454f63;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 20px 0 !important;
}

/* 결재라인 상태 */
.h-appr-line-status {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.h-appr-line-status li {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 70px;
  height: 30px;
  flex: 1;
}
.h-appr-line-status li .line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  background: #cad4dd;
  height: 2px;
}
.h-appr-line-status li:last-child .line {
  display: none;
}

.h-appr-line-status-icon {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  vertical-align: top;
  border-radius: 30px;
  background: #26c2d1;
  color: #FFFFFF;
  text-align: center;
  margin: 0 auto;
  z-index: 2;
  /* 반려 */
  /* 작성 */
  /* 완료 */
  /* 상태값 없을 경우 */
}
.h-appr-line-status-icon i {
  color: #FFFFFF;
  font-size: 1.5rem;
}
.h-appr-line-status-icon.return {
  background: #faa006 !important;
}
.h-appr-line-status-icon.write {
  background: #6e8093 !important;
}
.h-appr-line-status-icon.ok {
  background: #da291c !important;
}
.h-appr-line-status-icon.finish {
  background: url("/common/images/sub/ico_finish.png") center center no-repeat;
}

.h-appr-line-edit-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
}
.h-appr-line-edit-btn .h-appr-btn-set {
  height: 50px;
  color: #4c5155 !important;
  font-size: 1.1rem;
  border: 0px;
  overflow: hidden;
}
.h-appr-line-edit-btn .h-appr-btn-edit {
  height: 50px;
  color: #4c5155 !important;
  font-size: 1.1rem;
  border: 0px;
  overflow: hidden;
}

/* 기본 결재선 설정*/
.h-appr-line-setup {
  display: block;
  width: 100%;
  color: #454f63;
  font-size: 1.2rem;
  padding: 0 0 20px 0 !important;
}

.h-appr-line-question {
  color: #454f63;
  text-align: left;
  border-top: 1px solid #c7d1d8;
  border-bottom: 1px solid #c7d1d8;
  background: #f9f9f9;
  padding: 20px;
}

/* 신청서 하단 정보 */
dl.h-detail-info, p.h-detail-info, ul.h-detail-info, div.h-detail-info {
  padding: 20px !important;
  background: #fff1f4;
  border: 1px solid #ff4747;
  box-sizing: border-box;
  /* 우측 내용이 더 넓어야 하는 경우에 사용 - 콘도예약신청 */
  /* 설문조사 */
  /* 파일첨부 리스트 구분라인 */
}
dl.h-detail-info dt, p.h-detail-info dt, ul.h-detail-info dt, div.h-detail-info dt {
  display: inline-block;
  width: 45%;
  font-size: 1rem;
  text-align: left;
  box-sizing: border-box;
}
dl.h-detail-info dt:before, p.h-detail-info dt:before, ul.h-detail-info dt:before, div.h-detail-info dt:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  box-sizing: border-box;
  background: #949494;
  margin: 0 10px 5px 0;
}
dl.h-detail-info dd, p.h-detail-info dd, ul.h-detail-info dd, div.h-detail-info dd {
  display: inline-block;
  width: 50%;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  word-break: break-all;
}
dl.h-detail-info.wideR dt, p.h-detail-info.wideR dt, ul.h-detail-info.wideR dt, div.h-detail-info.wideR dt {
  width: 40% !important;
}
dl.h-detail-info.wideR dt.top, p.h-detail-info.wideR dt.top, ul.h-detail-info.wideR dt.top, div.h-detail-info.wideR dt.top {
  vertical-align: top;
}
dl.h-detail-info.wideR dd, p.h-detail-info.wideR dd, ul.h-detail-info.wideR dd, div.h-detail-info.wideR dd {
  width: 60% !important;
  text-align: left;
  vertical-align: top;
  /* 모바일에서 데이터가 길 경우 사용(예-신청내역 > 근태신청서 내역) */
}
dl.h-detail-info.wideR dd.dd-w, p.h-detail-info.wideR dd.dd-w, ul.h-detail-info.wideR dd.dd-w, div.h-detail-info.wideR dd.dd-w {
  display: block;
  width: 100% !important;
  padding: 5px 0 5px 14px !important;
}
dl.h-detail-info.wideR dd.dd-w p, p.h-detail-info.wideR dd.dd-w p, ul.h-detail-info.wideR dd.dd-w p, div.h-detail-info.wideR dd.dd-w p {
  font-size: 1.02rem;
}
dl.h-detail-info li:before, p.h-detail-info li:before, ul.h-detail-info li:before, div.h-detail-info li:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 1px;
  box-sizing: border-box;
  background: #4f5983;
  margin: 0 10px 5px 0;
}
dl.h-detail-info li .detail-list, p.h-detail-info li .detail-list, ul.h-detail-info li .detail-list, div.h-detail-info li .detail-list {
  display: inline-block;
  width: 94%;
  line-height: 1.3rem;
  white-space: pre-line;
  word-break: break-all;
  vertical-align: top;
  color: #4f5983;
}
dl.h-detail-info.h-survey-box, p.h-detail-info.h-survey-box, ul.h-detail-info.h-survey-box, div.h-detail-info.h-survey-box {
  margin: 20px 0 0 0;
  /* 설문조사 readonly 구분 - 활성화된 설문항목과 구분안된다 해서 추가 */
}
dl.h-detail-info.h-survey-box dt, p.h-detail-info.h-survey-box dt, ul.h-detail-info.h-survey-box dt, div.h-detail-info.h-survey-box dt {
  display: block;
  width: 100%;
}
dl.h-detail-info.h-survey-box dt:before, p.h-detail-info.h-survey-box dt:before, ul.h-detail-info.h-survey-box dt:before, div.h-detail-info.h-survey-box dt:before {
  display: none;
}
dl.h-detail-info.h-survey-box dt ul.h-survey-q, p.h-detail-info.h-survey-box dt ul.h-survey-q, ul.h-detail-info.h-survey-box dt ul.h-survey-q, div.h-detail-info.h-survey-box dt ul.h-survey-q {
  display: flex !important;
}
dl.h-detail-info.h-survey-box dt ul.h-survey-q li, p.h-detail-info.h-survey-box dt ul.h-survey-q li, ul.h-detail-info.h-survey-box dt ul.h-survey-q li, div.h-detail-info.h-survey-box dt ul.h-survey-q li {
  flex: 1;
}
dl.h-detail-info.h-survey-box dt ul.h-survey-q li:before, p.h-detail-info.h-survey-box dt ul.h-survey-q li:before, ul.h-detail-info.h-survey-box dt ul.h-survey-q li:before, div.h-detail-info.h-survey-box dt ul.h-survey-q li:before {
  display: none;
}
dl.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2), p.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2), ul.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2), div.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2) {
  flex: 9;
}
dl.h-detail-info.h-survey-box dd, p.h-detail-info.h-survey-box dd, ul.h-detail-info.h-survey-box dd, div.h-detail-info.h-survey-box dd {
  display: block;
  width: 100%;
}
dl.h-detail-info.h-survey-box dd li, p.h-detail-info.h-survey-box dd li, ul.h-detail-info.h-survey-box dd li, div.h-detail-info.h-survey-box dd li {
  display: block;
}
dl.h-detail-info.h-survey-box dd li:before, p.h-detail-info.h-survey-box dd li:before, ul.h-detail-info.h-survey-box dd li:before, div.h-detail-info.h-survey-box dd li:before {
  display: none;
}
dl.h-detail-info.h-survey-box.readonly, p.h-detail-info.h-survey-box.readonly, ul.h-detail-info.h-survey-box.readonly, div.h-detail-info.h-survey-box.readonly {
  background: #ecf8f8 !important;
  border: 1px solid #47beb2;
}
dl.h-detail-info.h-file-list-line li, p.h-detail-info.h-file-list-line li, ul.h-detail-info.h-file-list-line li, div.h-detail-info.h-file-list-line li {
  padding: 1px 0;
  /* border-top:1px solid #b5cde5; */
  vertical-align: top;
}
dl.h-detail-info.h-file-list-line li:first-child, p.h-detail-info.h-file-list-line li:first-child, ul.h-detail-info.h-file-list-line li:first-child, div.h-detail-info.h-file-list-line li:first-child {
  border-top: 0 !important;
}

/* 내역 표시 */
.h-detail-next {
  font-size: 1rem;
  text-align: center;
  padding: 10px 0 !important;
}

/* 편집하기 */
.h-appr-line-editor > {
  padding: 0px;
  margin: 0px;
  font-size: 0px;
}
.h-appr-line-editor > li {
  display: flex;
  font-size: 1rem;
  text-decoration: none;
  text-align: left;
  border-bottom: 1px dotted #c5d2de;
  vertical-align: middle;
  padding: 10px 0;
}
.h-appr-line-editor > li div {
  flex: 5;
  display: inline-block;
}
.h-appr-line-editor > li div ul {
  display: inline-block;
}
.h-appr-line-editor > li div:nth-child(2) {
  flex: 1;
}
.h-appr-line-editor > li:last-child {
  border-bottom: 0;
}

/* 신청서 history */
.h-apply-history > ul li {
  padding: 5px 0;
}
.h-apply-history > ul li .h-appr-line-status-txt {
  display: inline-block;
  padding: 4px 0 0 0;
}
.h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-date {
  display: inline-block;
  width: 80px;
  color: #787e8a;
  text-align: center;
  vertical-align: top;
}
.h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-info {
  display: inline-block;
  width: 110px;
  color: #454f63;
  font-size: 1.1rem;
  font-weight: 600;
}
.h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-status {
  color: #454f63;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0 0 0 20px;
  vertical-align: top;
}
.h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-status.point-note {
  color: #d7262e !important;
}
.h-apply-history > ul li .h-apply-history-note {
  position: relative;
  top: 0;
  left: 0px;
  display: inline-block;
  height: auto;
  width: 100%;
  z-index: 1;
  padding: 10px 0;
}
.h-apply-history > ul li:last-child {
  height: 30px;
  background: url("/common/images/sub/ico_finish.png") 7px center no-repeat;
}
.h-apply-history > ul.note-list {
  padding: 10px 0 !important;
}
.h-apply-history > ul.note-list li {
  padding: 0 !important;
  vertical-align: top;
}
.h-apply-history > ul.note-list li .bg-line {
  position: absolute;
  top: 10px;
  left: 14px;
  width: 2px;
  height: 100%;
  z-index: 0;
  background: #cad4dd;
  transform: rotate(-180deg);
}

/* 콘도리스트 */
.h-condo-list li {
  color: #454f63;
  font-size: 1.1rem;
  padding: 10px 0 !important;
  border-top: 1px solid #c7d1d8;
}
.h-condo-list li strong {
  color: #da291c;
  font-size: 1.15rem;
}
.h-condo-list li:last-child {
  border-bottom: 1px solid #c7d1d8;
}

/* 제증명신청 -  R&D 추가 */
.h-additional-info {
  font-size: 0.9em;
  color: #999;
}

/* ==========================================================================
        공지사항 + 알림조회
   ========================================================================== */
.h-notice-title {
  color: #454f63;
  font-size: 1.15rem;
  line-height: 1.2rem;
  margin-bottom: 0.83rem;
  font-weight: 600;
}

.h-info-nm {
  color: #868daa;
  font-size: 0.825rem;
}

.h-info-date {
  color: #868daa;
  font-size: 0.825rem;
}

.h-notice {
  position: relative;
}
.h-notice i.icon-file {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  line-height: 28px;
  color: #868daa;
  font-size: 1.42rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #c8d4df;
  border-radius: 30px;
}
.h-notice > div .icon-tam-commute {
  background: -webkit-linear-gradient(#868daa, #868daa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.h-alarm-area {
  margin: 20px 0;
}
.h-alarm-area:first-child {
  margin: 0 0 20px 0;
}
.h-alarm-area .h-alarm-time {
  position: relative;
  right: -5px;
  bottom: -30px;
  display: -webkit-inline-box;
  text-align: right;
  float: right;
}
.h-alarm-area .h-alarm-time i {
  color: #a9b8c8 !important;
}

.h-alim-badge {
  position: relative;
  top: 0px;
  left: 5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #FFFFFF !important;
  font-size: 0.8rem !important;
  font-family: Ariala;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 3px !important;
  background: #da291c !important;
  border-radius: 20px;
  z-index: 9;
}

.h-btn-goto {
  position: relative;
  top: 3px;
  left: 7px;
  color: #558dc6;
}

/* 바로가기 버튼 추가 */
.h-btn-goto span {
  text-decoration: underline;
}

/* ==========================================================================
         인사정보 & 화상조직도 & 임직원 찾기
   ========================================================================== */
/* 상단 개인정보(성명+직급+팀), 화상조직도 */
.h-info-box {
  color: #FFFFFF;
  padding-top: 20px;
  vertical-align: middle;
  /* 화상조직도 용도 */
  /* 임직원 찾기 */
  /* 임직원 찾기 - 레이어팝업 */
  /* 개인정보수정 */
}
.h-info-box dt {
  font-size: 1.5rem;
  font-weight: 600;
}
.h-info-box dt span {
  font-weight: normal;
}
.h-info-box dt strong {
  color: #454f63;
  font-size: 1.1rem !important;
}
.h-info-box dd {
  font-size: 1.3rem;
}
.h-info-box dd strong {
  color: #da291c;
  font-size: 1.7rem !important;
}
.h-info-box.org {
  position: relative;
  color: #454f63 !important;
  padding-top: 0px !important;
  margin: 0 0 0 15px !important;
}
.h-info-box.org span {
  padding: 0px !important;
}
.h-info-box.org .h-org-mgr-name {
  font-size: 1.25rem;
}
.h-info-box.org i {
  position: absolute;
  top: 5px;
  right: -10px;
}
.h-info-box.org dd {
  display: block;
  font-size: 1.1rem;
}
.h-info-box.org dd .h-org-total-member {
  float: left;
  padding: 5px 0 0 0 !important;
}
.h-info-box.org dd .h-org-total-count {
  float: right;
  width: auto;
  padding: 0 0 0 20px !important;
  text-align: right;
}
.h-info-box.staff-search {
  display: inline-block;
}
.h-info-box.staff-search dt {
  color: #454f63 !important;
  font-size: 1.1rem;
  line-height: 1.35rem;
}
.h-info-box.staff-search dt span {
  font-size: 1.2rem !important;
  padding: 0px !important;
  font-weight: 600;
}
.h-info-box.staff-search dd {
  color: #454f63 !important;
  font-size: 1.1rem !important;
}
.h-info-box.staff-search-popup {
  display: inline-block;
  vertical-align: middle;
  padding: 5px 0 0 0 !important;
}
.h-info-box.staff-search-popup dt {
  color: #454f63 !important;
  line-height: 1.35rem;
}
.h-info-box.staff-search-popup dt span {
  font-size: 1.2rem !important;
  padding: 0px !important;
  font-weight: 600;
}
.h-info-box.staff-search-popup dd {
  display: inline-block;
  color: #454f63 !important;
  font-size: 1.05rem;
  padding: 7px 0 0 0 !important;
}
.h-info-box.info-edit {
  padding: 20px 0 0 20px !important;
}
.h-info-box.info-edit dt {
  color: #454f63 !important;
  font-size: 1.5rem;
  font-weight: 600;
}
.h-info-box.info-edit dt span {
  font-size: 1.2rem !important;
  padding: 0px !important;
}

/* 상단 연락처 */
.h-contact-list {
  /* 임직원 찾기 사용 */
}
.h-contact-list li {
  color: #FFFFFF;
  font-size: 1.2rem;
  text-align: left;
}
.h-contact-list li i {
  margin: 0 10px 0 0;
  font-size: 1.5rem;
  font-weight: normal;
}
.h-contact-list li a {
  color: #FFFFFF !important;
}
.h-contact-list.common li {
  color: #454f63 !important;
}
.h-contact-list.common li i {
  color: #617b9c !important;
}
.h-contact-list.common li a {
  display: inline-block !important;
  color: #454f63 !important;
}

/* 직무이력 */
ul.h-work-list > li {
  padding: 10px 0 0 0 !important;
}
ul.h-work-list > li .h-chart-txt {
  font-size: 1.1rem;
}
ul.h-work-list > li .h-work-year {
  color: #454f63;
  font-size: 1.1rem;
  width: 80px;
  text-align: right;
}
ul.h-work-list > li .h-work-year strong {
  color: #da291c;
  font-weight: 600;
}

/* 공통 리스트(인사정보+타임라인) */
ul.h-info-list li, dl.h-info-list li {
  position: relative;
  color: #454f63;
  font-size: 1rem;
  line-height: 1.5rem;
}
ul.h-info-list li strong, dl.h-info-list li strong {
  color: #454f63;
  font-size: 1.2rem;
  font-weight: normal !important;
}
ul.h-info-list li strong.yearinfo, dl.h-info-list li strong.yearinfo {
  font-size: 0.95rem !important;
  padding: 2px 0 0 10px !important;
}
ul.h-info-list li strong.annual-salary, dl.h-info-list li strong.annual-salary {
  position: absolute;
  top: -25px;
  right: 0;
}
ul.h-info-list.timeline, dl.h-info-list.timeline {
  padding: 10px 0 10px 10px !important;
}
ul.h-info-list.timeline li, dl.h-info-list.timeline li {
  font-size: 1.2rem !important;
}
ul.h-info-list.timeline li .h-timeline-icon i, dl.h-info-list.timeline li .h-timeline-icon i {
  position: absolute;
  top: -3px;
  left: 0;
  color: #9aa1b4;
  font-size: 2.5rem;
}
ul.h-info-list.timeline li .h-timeline-period, dl.h-info-list.timeline li .h-timeline-period {
  color: #9b9b9b;
  font-size: 1rem;
  padding: 0 0 0 35px !important;
}
ul.h-info-list.timeline li .h-timeline-txt, dl.h-info-list.timeline li .h-timeline-txt {
  display: inline-block;
  color: #454f63;
  padding: 0 10px 0 35px !important;
}
ul.h-info-list.eval, dl.h-info-list.eval {
  border-right: 1px solid #c7d1d8;
  padding: 0 20px 0 0 !important;
  margin: 0 20px 0 0 !important;
}
ul.h-info-list.eval:last-child, dl.h-info-list.eval:last-child {
  border-right: 0;
  padding: 0 !important;
  margin: 0 !important;
}
ul.h-info-list.eval li, dl.h-info-list.eval li {
  color: #454f63;
  font-size: 1.15rem !important;
}
ul.h-info-list.eval li:nth-child(1), dl.h-info-list.eval li:nth-child(1) {
  float: left;
}
ul.h-info-list.eval li:nth-child(3), dl.h-info-list.eval li:nth-child(3) {
  display: none;
}
ul.h-info-list.eval li .h-info-evu-grade, dl.h-info-list.eval li .h-info-evu-grade {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  color: #FFFFFF;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 35px;
  background: #da291c;
}
ul.h-info-list.eval li i.icon-star, dl.h-info-list.eval li i.icon-star {
  color: #e1e1e1;
}
ul.h-info-list.eval li i.icon-star.on, dl.h-info-list.eval li i.icon-star.on {
  color: #ffba00;
}
ul.h-info-list dt strong, dl.h-info-list dt strong {
  color: #da291c !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
}
ul.h-info-list dd, dl.h-info-list dd {
  padding: 0 0 0 20px !important;
}

/* 개인정보 수정 레이어 팝업 */
.h-info-edit label {
  color: #454f63;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 20px 0 0 0;
}

/* 개인정보 수정 > 사진변경 팝업(크롭화면) */
.h-avatar-cropper .h-avatar-cropper-image {
  max-width: 100%;
  height: 300px;
}

.h-avatar .h-drop-active {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  z-index: 9999;
  opacity: 0.6;
  text-align: center;
  background: #000;
}

.h-avatar .h-drop-active h3 {
  margin: -0.5em 0 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 40px;
  color: #fff;
  padding: 0;
}

.h-avatar .h-photo-area {
  width: 150px;
  text-align: center;
  margin: 0 auto;
}

.h-avatar .h-photo-area .h-photo-wrap {
  position: relative;
  width: 150px;
  height: 150px;
}

.h-avatar .h-photo-area .h-photo {
  width: 150px;
  height: 150px;
  border-radius: 150px;
  border: 1px solid #c7d1d8;
  overflow: hidden;
}

.h-avatar .h-photo-area .h-photo img {
  width: 150px;
  height: auto;
}

.h-avatar .h-photo-area .h-search-btn {
  position: absolute;
  top: 107px;
  right: 0px;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 40px;
  background: #FFFFFF;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
}

.h-avatar .h-photo-area .h-search-btn i.icon-camera {
  color: #454f63;
  font-size: 2rem;
  margin-top: 3px;
}

.v-dialog .h-avatar-cropper div .h-button-positive1st {
  border-radius: 5px !important;
}

/* 주소찾기 레이어팝업 */
.h-address-list {
  padding: 20px;
  border: 1px solid #c7d1d8;
  box-sizing: border-box;
}
.h-address-list ul {
  margin: 0 20px;
}
.h-address-list ul li {
  line-height: 1rem;
  font-size: 1rem;
  border-top: 1px solid #c7d1d8;
  padding: 10px 0;
}
.h-address-list ul li:first-child {
  border-top: 0;
  padding: 0 0 5px 0;
}
.h-address-list ul li:nth-child(2) {
  border-top: 0;
}
.h-address-list ul li:nth-child(3) {
  border-top: 1px dotted #c7d1d8;
}

.h-select-addr {
  background: #dce4ec;
  color: #454f63;
}

/* 조직선택 레이어 팝업 */
.h-add-condition-status-bar {
  border: 1px solid #c7d1d8;
  border-left: 0px;
  border-right: 0px;
}

/* ==========================================================================
         타임라인
   ========================================================================== */
/* ==========================================================================
         화상조직도
   ========================================================================== */
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
     supported by Chrome and Opera */
}

dl.h-org-step {
  color: #454f63;
  text-align: left;
}
dl.h-org-step dt a {
  font-size: 1.2rem;
}
dl.h-org-step dd {
  font-size: 1.5rem;
  font-weight: 600;
}

.h-org-member {
  color: #454f63;
  font-size: 1.2rem;
  font-weight: 600;
  align-items: center;
  padding: 15px;
  margin: 10px 0 0 0;
  border-radius: 10px;
  border: 1px solid #f5b6b6;
  background: #f7e6e6;
  box-sizing: border-box;
}
.h-org-member i.icon-ellipsis {
  float: right;
  color: #bcc7cc;
  font-size: 1.5rem;
  transform: rotate(90deg);
}
.h-org-member.division {
  color: #454f63;
  font-size: 1.2rem;
  background: #e0dee0 !important;
  border: 0px !important;
  /* dd {color:$basic1stColor;} */
}

/* ==========================================================================
         급여명세서
   ========================================================================== */
.h-pay-total {
  position: relative;
  background: #818181;
}
.h-pay-total li {
  display: block;
  color: #FFFFFF;
  font-size: 2.5rem;
  font-weight: 400;
  font-family: Arial;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.h-pay-total li i.icon-private {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #bfd4e9;
  font-size: 1.5rem;
}
.h-pay-total li i.icon-no-private {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #bfd4e9;
  font-size: 1.5rem;
}
.h-pay-total li:nth-child(2), .h-pay-total li:nth-child(3) {
  display: inline-block;
  width: 49.3%;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 0;
}
.h-pay-total li:nth-child(2) dl dt, .h-pay-total li:nth-child(3) dl dt {
  font-size: 1.2rem;
  line-height: 1.5rem;
  text-align: left;
}
.h-pay-total li:nth-child(2) dl dd, .h-pay-total li:nth-child(3) dl dd {
  font-size: 1.7rem;
  font-weight: 400;
  font-family: Arial;
  text-align: right;
}
.h-pay-total li:last-child {
  border-right: 0;
  border-bottom: 0;
}

.h-pay-private {
  opacity: 0.2;
}

.h-pay-items {
  display: flex;
  font-size: 1.1rem;
}
.h-pay-items dt {
  flex: 1;
  color: #868daa;
  font-size: 1.1rem;
}
.h-pay-items dd {
  flex: 3;
  color: #454f63;
  text-align: right;
}

.h-pay-list li {
  line-height: 1.8rem !important;
}
.h-pay-list li .h-pay-items {
  font-size: 1.1rem !important;
  padding: 0 !important;
}
.h-pay-list li .h-pay-items dt {
  flex: 2;
  color: #454f63 !important;
  font-size: 1.1rem;
}
.h-pay-list li .h-pay-items dd {
  flex: 1;
  font-size: 1.1rem;
}
.h-pay-list li:first-child {
  color: #868daa !important;
  font-size: 1.1rem;
  padding: 0 0 10px 0;
}
.h-pay-list.border-right {
  padding: 20px 0 0 0 !important;
  border-right: 0 !important;
  box-sizing: border-box;
}

/* ==========================================================================
         임직원찾기
   ========================================================================== */
.h-staff-count {
  text-align: right;
  margin: 10px 10px 0 0;
  /* 인사정보 - 사원선택 레이어 팝업*/
  /* 인사정보-추가조건버튼 클릭 - 조직 돋보기버튼 클릭 - 조직선택 레이어팝업 */
}
.h-staff-count.popup {
  position: relative;
  text-align: left !important;
  margin: 0 !important;
  padding: 9px;
  border-top: 1px solid #c7d1d8;
  border-bottom: 1px solid #c7d1d8;
  box-sizing: border-box;
}
.h-staff-count.popup .btn-add-search {
  position: absolute;
  top: 0;
  right: 0;
}
.h-staff-count.org-select {
  text-align: left;
  margin: 0;
}

/* ==========================================================================
         설문조사
   ========================================================================== */
.h-survey-wrap {
  display: flex;
  align-items: center;
  padding: 0 10px 0 0 !important;
}
.h-survey-wrap li {
  flex: 1;
  text-align: left;
}
.h-survey-wrap li:nth-child(2) {
  flex: 4;
}
.h-survey-wrap li:nth-child(3) {
  flex: 1;
  text-align: right;
}

.h-survey-list dt {
  color: #5c6577;
  font-size: 1rem;
}
.h-survey-list dd {
  color: #454f63;
  font-size: 1.2rem;
}

.h-survey-state {
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  color: #FFFFFF;
  font-size: 0.8rem;
  text-align: center;
  align-items: center;
  border-radius: 45px;
  word-break: break-all;
  vertical-align: middle;
  margin: 0 10px 0 0;
  /* 설문전 */
  /* 설문중 */
  /* 설문완료 */
}
.h-survey-state.survey-before {
  background: #474747;
}
.h-survey-state.survey-ing {
  background: #da291c;
}
.h-survey-state.survey-end {
  background: #da291c;
}

.h-survey-txt {
  display: flex;
  color: #454f63;
  font-size: 1.1rem;
}
.h-survey-txt dt {
  flex: 2.5;
  vertical-align: top;
}
.h-survey-txt dd:nth-child(2) {
  flex: 0.5;
}
.h-survey-txt dd:nth-child(3) {
  flex: 7;
}

.h-preference > li {
  position: relative;
  display: block !important;
  padding: 0px !important;
  clear: both;
}
.h-preference > li div {
  float: left;
  width: 40%;
}
.h-preference > li span {
  position: absolute;
  left: 50px;
  color: #454f63 !important;
  font-weight: normal !important;
}
.h-preference > li .v-text-field--box > .v-input__control > .v-input__slot, .h-preference > li .v-text-field--full-width > .v-input__control > .v-input__slot, .h-preference > li .v-text-field--outline > .v-input__control > .v-input__slot {
  min-height: auto !important;
}
.h-preference > li .h-input.v-text-field--box input, .h-preference > li .h-input.v-text-field--outline input {
  margin: 0px !important;
}
.h-preference > li .v-text-field--box > .v-input__control > .v-input__slot {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

/* tm_que_110_m01.jgp R&D에서 추가 - 스크롤 때문에 만들어진 하단 여백조정 */
.h-survey-question label {
  margin-bottom: 0px;
}

/* ==========================================================================
         근무일정 + 출퇴근확인
   ========================================================================== */
.h-week-work-time > li ul {
  display: flex;
  color: #a0a4ac;
  font-size: 1rem;
  font-family: Arial;
}
.h-week-work-time > li ul li:nth-child(1) {
  flex: 3;
}
.h-week-work-time > li ul li:nth-child(2) {
  flex: 0.5;
  text-align: right;
}
.h-week-work-time > li ul li:nth-child(3) {
  flex: 1;
  text-align: right;
}
.h-week-work-time > li:nth-child(1) {
  margin: 10px 0 0 0;
  border-top: 1px solid #c7d1d8;
  /* #e6eaef */
}
.h-week-work-time > li:nth-child(1) .h-combo.theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
  border: 0px !important;
}
.h-week-work-time > li:nth-child(1) .theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
  background: #f6f8fa !important;
}
.h-week-work-time > li:nth-child(1) .h-combo i {
  font-size: 2rem;
}
.h-week-work-time > li:nth-child(2) {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #c7d1d8;
  /* .h-remarks-box {
  	position:relative;top:30px;left:-28px;
  	.h-remarks-arrow {
  	    position:absolute;top:-4px;left:21px;display:inline-block; width:0; height:0; border-style:solid; border-width:4px;z-index:5;
  	    &.remarks-top {border-color:transparent transparent #35383f transparent;}
       }
  	.h-remarks-state {
  	  position:absolute;top:4px;display:inline-block;width:50px;color:#29cd57;font-weight:600;text-align:center;padding:7px 10px 5px 10px;background:#35383f;border-radius:3px;box-shadow:0px 2px 2px rgba(50,50,50,0.22);
  	  &.h-warning {color:#ff3737;}
  	 }
  } */
}
.h-week-work-time > li:nth-child(2) .h-remarks-box {
  position: relative;
  top: 30px;
  left: -28px;
}
.h-week-work-time > li:nth-child(2) .h-remarks-box .h-remarks-state {
  position: absolute;
  top: 4px;
  display: inline-block;
  width: 50px;
  color: #5dbab2;
  font-weight: 600;
  text-align: center;
  padding: 7px 10px 5px 10px;
  background: #35383f;
  border-radius: 3px;
  box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.22);
}
.h-week-work-time > li:nth-child(2) .h-remarks-box .h-remarks-state .h-warning {
  color: #ff3737;
}
.h-week-work-time > li:nth-child(2) .h-remarks-box .h-remarks-state.top {
  float: none !important;
  /* 부트스트랩 css float:left가 먹어서 초기화하기 위해 필요 */
}
.h-week-work-time > li:nth-child(2) .h-remarks-box .h-remarks-state.top:after {
  top: -5px;
  right: 21px;
  bottom: auto;
  left: auto;
  border-width: 0 5px 5px;
  border-color: #35383f transparent;
}
.h-week-work-time > li:nth-child(2) .h-remarks-box .h-remarks-state:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50px;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #35383f transparent;
  display: block;
  width: 0;
}
.h-week-work-time > li:nth-child(3) {
  padding: 10px 0;
}
.h-week-work-time > li:nth-child(3) .h-add-work-graph {
  margin: 10px 0 0 0;
}

.h-work-time {
  float: right;
  color: #a7acb4;
  font-size: 1.3rem;
  font-family: Arial;
}
.h-work-time .hour {
  color: #5fbcb4;
}
.h-work-time .hour.add-work {
  color: #7cb5fc;
}

.h-timebg {
  background: #e2e8ef;
  height: 24px;
  border: 0px;
  border-radius: 3px;
  vertical-align: middle;
  margin: 0 3px 0 0;
}
.h-timebg.on {
  background: #5fbcb4;
}
.h-timebg.time40 {
  height: 31px;
}
.h-timebg .remarks {
  color: #a0a4ac;
}

.h-cal-month {
  display: inline-block;
  width: 100%;
  margin: 10px 0 0 0;
  white-space: normal;
  font-size: 0;
  border-top: 1px solid #e9edf2;
}
.h-cal-month .h-cal-weekday {
  display: inline-block;
  width: 14%;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  white-space: normal;
  padding: 10px;
  border-bottom: 1px solid #e9edf2;
  box-sizing: border-box;
}
.h-cal-month .h-cal-day {
  display: inline-block;
  width: 14.2%;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: normal;
  text-align: center;
  background: #fefefe;
  border-bottom: 1px solid #e9edf2;
  margin: 0px !important;
  padding: 5px 0px;
  box-sizing: border-box;
  vertical-align: top;
}
.h-cal-month .h-cal-day .h-cal-event {
  height: 15px;
  font-size: 0.7rem;
  overflow: hidden;
}
.h-cal-month .h-cal-sel-week {
  background-color: #e7ecf1;
}

.h-cal-work-type {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  /* 휴일 */
}
.h-cal-work-type.work-type00 {
  background: #bfcad7;
}
.h-cal-work-type.work-type01 {
  background: #33d1ff;
}
.h-cal-work-type.work-type02 {
  background: #ffae00;
}
.h-cal-work-type.work-type03 {
  background: #b073d3;
}

.h-work-system-box {
  background: #FFFFFF;
  border: 1px solid #b9c5ce;
  padding: 10px 30px 10px 10px;
  border-radius: 3px;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  /* 휴일 */
}
.h-work-system-box.work-type00 {
  border-left: 5px solid #fb6f6f;
}
.h-work-system-box.work-type01 {
  border-left: 5px solid #33d1ff;
}
.h-work-system-box.work-type02 {
  border-left: 5px solid #ffae00;
}
.h-work-system-box.work-type03 {
  border-left: 5px solid #b073d3;
}
.h-work-system-box .media-body {
  display: flex;
}
.h-work-system-box .media-body ul {
  flex: 1;
}
.h-work-system-box .media-body .h-work-system-list {
  flex: 0 0 60px;
  margin: 0 0 0 20px !important;
  padding-top: 10px;
}
.h-work-system-box .media-body .h-work-system-list li {
  font-size: 18px;
  color: #404040;
  font-weight: bold;
  top: 10px;
}
.h-work-system-box .media-body .workList {
  padding-top: 11px;
}
.h-work-system-box .media-body .workList li {
  padding-right: 30px;
}
.h-work-system-box .media-body .workList li a {
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}
.h-work-system-box .media-body .h-work-date {
  width: 30px;
  color: #8597a5;
  font-weight: 600;
  font-size: 2rem;
}
.h-work-system-box .media-body .h-work-event {
  display: inline-block;
  color: #da291c;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid #da291c;
  border-radius: 3px;
  text-align: center;
  padding: 3px 5px 1px 5px;
}
.h-work-system-box .popBtns {
  position: absolute;
  width: 30px;
  right: 0;
  top: 0;
  background: #cad3d7;
  height: 100%;
}
.h-work-system-box .popBtns ul {
  display: inline-block;
  height: 100%;
  width: 100%;
}
.h-work-system-box .popBtns li {
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0 !important;
}
.h-work-system-box .popBtns li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-indent: -999em;
}
.h-work-system-box .popBtns li .addList {
  background: url(/common/images/button/ico_btn_plus.png) center center no-repeat;
  background-size: 15px;
}
.h-work-system-box .popBtns li .delList {
  background: url(/common/images/button/ico_btn_minus.png) center center no-repeat;
  background-size: 15px;
}
.h-work-system-box .h-work-date {
  font-size: 30px;
  font-weight: bold;
  color: #404040;
}

.h-overtime-box {
  background: #eff5fb;
  border: 1px solid #bbd6f1;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 15px 20px;
  margin: 5px 0 0 0;
}
.h-overtime-box .overtime-period {
  text-align: center;
  width: 100%;
  color: #2ba3f9;
  font-size: 1.1rem;
}
.h-overtime-box ul {
  margin: 15px 0 0 0 !important;
}
.h-overtime-box ul li {
  display: inline-block;
  width: 49.2%;
  line-height: 1.5rem;
  text-align: center;
  border-right: 1px solid #ff4747;
  box-sizing: border-box;
}
.h-overtime-box ul li:last-child {
  border-right: 0;
}
.h-overtime-box ul li dl dt {
  display: inline-block;
  color: #454f63;
  font-size: 0.9rem;
  vertical-align: bottom;
}
.h-overtime-box ul li dl dd {
  display: inline-block;
  color: #738595;
  font-size: 2rem;
  font-family: Arial;
  font-weight: 600;
  padding: 0 0 0 20px !important;
  vertical-align: bottom;
}

/* 출퇴근확인 */
.h-map-area {
  height: 245px;
  margin: 10px 0 0 0;
}

.h-commute-area {
  display: flex;
}
.h-commute-area div {
  position: relative;
  z-index: 10 !important;
  min-height: auto !important;
}
.h-commute-area div:nth-child(1), .h-commute-area div:nth-child(3) {
  flex: 4;
}
.h-commute-area div:nth-child(1) .h-reason-area, .h-commute-area div:nth-child(3) .h-reason-area {
  position: relative;
  top: -25px;
  line-height: 1.3rem;
  background: #FFFFFF;
  border-radius: 5px;
  box-sizing: border-box;
  z-index: 0 !important;
}
.h-commute-area div:nth-child(1) .h-reason-area p, .h-commute-area div:nth-child(3) .h-reason-area p {
  color: #454f63;
  padding: 20px !important;
}
.h-commute-area div:nth-child(1) .h-reason-area p .late-time, .h-commute-area div:nth-child(3) .h-reason-area p .late-time {
  text-decoration: line-through;
  padding: 0 5px 0 0;
}
.h-commute-area div:nth-child(2) {
  flex: 0.3;
}

/* 출퇴근 히스토리 */
ul.h-commute-history > {
  padding: 0 !important;
}
ul.h-commute-history > li {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 100%;
  vertical-align: top;
}
ul.h-commute-history > li .bg-line {
  position: absolute;
  top: 10px;
  left: 7px;
  width: 2px;
  height: 100%;
  z-index: 0;
  background: #cad4dd;
  transform: rotate(-180deg);
}
ul.h-commute-history > li:last-child .bg-line {
  display: none;
}
ul.h-commute-history > li .icon-finish {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: url("/common/images/sub/ico_finish.png") left center no-repeat;
  z-index: 1;
}
ul.h-commute-history > li div {
  float: right;
  width: 89%;
}
ul.h-commute-history > li div ul {
  padding: 3px 0 0 0 !important;
}
ul.h-commute-history > li div ul li .commute-start {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: Arial;
  padding: 0 0 0 10px;
}
ul.h-commute-history > li div ul li .h-reason:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1px;
  box-sizing: border-box;
  background: #949494;
  margin: 0 10px 5px 0;
}
ul.h-commute-history > li div ul li .h-reason .late-reason {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: normal;
  padding: 0;
}
ul.h-commute-history > li div ul li .h-reason .late-reason .late-time {
  text-decoration: line-through;
  padding: 0 5px 0 0;
}

/* 출퇴근기록보기 - 팝업 */
.h-commute-record > {
  background: #FFFFFF;
}
.h-commute-record > li {
  color: #454f63 !important;
  border: 1px solid #c7d1d8;
  padding: 20px;
  margin: 10px 0 0 0;
}
.h-commute-record > li:first-child {
  margin: 0;
}
.h-commute-record > li .h-record {
  font-weight: 600;
  padding: 0 0 10px 0;
}
.h-commute-record > li .h-record .record-date {
  font-size: 1rem;
}
.h-commute-record > li .h-record .record-state {
  color: #da291c !important;
  font-size: 1.1rem !important;
  text-align: right;
}

/* 출근확인 - 팝업*/
.h-commute-pop {
  border: 1px solid #c7d1d8;
  padding: 0 20px 20px 20px;
  margin: 10px 0 20px 0;
}
.h-commute-pop .h-commute-time {
  position: relative;
  top: -23px !important;
  width: 130px;
  color: #a7acb4;
  font-size: 1.7rem;
  font-weight: 600;
  font-family: Verdana;
  text-align: center;
  padding: 5px;
  background: #FFFFFF;
  margin: 0 auto;
}
.h-commute-pop .h-commute-box {
  margin: -20px 0 0 0;
}
.h-commute-pop .h-commute-box figure {
  width: 30%;
}
.h-commute-pop .h-commute-box dt {
  color: #454f63;
  font-size: 1.1rem;
}
.h-commute-pop .h-commute-box dd {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 600;
  font-family: Arial;
  padding: 5px 0 0 0 !important;
}
.h-commute-pop .h-commute-box dd .time-start {
  color: #a7acb4;
}
.h-commute-pop .h-commute-box dd .time-start-cancel {
  color: #a7acb4;
  text-decoration: line-through;
}
.h-commute-pop .h-commute-box dd .icon-back {
  display: inline-block;
  color: #454f63;
  font-size: 1.3rem !important;
  transform: rotate(-180deg);
  vertical-align: middle !important;
  margin: 0 0 5px 0;
}
.h-commute-pop .h-commute-box dd .time-edit {
  color: #5fbcb4;
}

/* ==========================================================================
         미디어쿼리
   ========================================================================== */
@media screen and (min-width: 375px) and (max-width: 413px) {
  .h-survey-txt {
    display: flex;
    color: #454f63;
    font-size: 1.1rem;
  }
  .h-survey-txt dt {
    flex: 2.2;
    vertical-align: top;
  }
  .h-survey-txt dd:nth-child(2) {
    flex: 0.5;
  }
  .h-survey-txt dd:nth-child(3) {
    flex: 7;
  }

  /* 신청서 history */
  .h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-date {
    width: 100px;
  }
  .h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-info {
    width: 140px;
  }
}
@media screen and (min-width: 414px) and (max-width: 767px) {
  .h-survey-txt dt {
    flex: 2;
    vertical-align: top;
  }
  .h-survey-txt dd:nth-child(2) {
    flex: 0.4;
  }
  .h-survey-txt dd:nth-child(3) {
    flex: 7.5;
  }

  /* 신청서 history */
  .h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-date {
    width: 100px;
  }
  .h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-info {
    width: 140px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 인사기본 */
  .h-info-box {
    width: auto;
    text-align: left;
    margin: 0 !important;
    padding: 0 0 0 30px !important;
    vertical-align: middle;
  }
  .h-info-box dd {
    display: inline-block;
  }
  .h-info-box.org {
    width: 100% !important;
  }
  .h-info-box.staff-search {
    width: 100% !important;
    margin: 0px !important;
  }
  .h-info-box.staff-search dd {
    color: #454f63 !important;
  }

  /* 공통 리스트(인사정보+타임라인) */
  ul.h-info-list.eval li, dl.h-info-list.eval li {
    color: #454f63;
    font-size: 1.15rem !important;
  }
  ul.h-info-list.eval li:nth-child(1), dl.h-info-list.eval li:nth-child(1) {
    float: left;
  }
  ul.h-info-list.eval li:nth-child(3), dl.h-info-list.eval li:nth-child(3) {
    display: block;
  }
  ul.h-info-list.eval li .h-info-evu-grade, dl.h-info-list.eval li .h-info-evu-grade {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    color: #FFFFFF;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 35px;
    background: #da291c;
  }

  /* 화상조직도 */
  .h-org-member {
    margin: 10px;
  }

  /* 신청서 */
  dl.h-detail-info, p.h-detail-info, ul.h-detail-info, div.h-detail-info {
    /* 설문조사 */
  }
  dl.h-detail-info dt, p.h-detail-info dt, ul.h-detail-info dt, div.h-detail-info dt {
    width: 40%;
    vertical-align: top;
  }
  dl.h-detail-info dd, p.h-detail-info dd, ul.h-detail-info dd, div.h-detail-info dd {
    width: 58%;
  }
  dl.h-detail-info.wideR dt, p.h-detail-info.wideR dt, ul.h-detail-info.wideR dt, div.h-detail-info.wideR dt {
    width: 30% !important;
  }
  dl.h-detail-info.wideR dd, p.h-detail-info.wideR dd, ul.h-detail-info.wideR dd, div.h-detail-info.wideR dd {
    width: 69% !important;
  }
  dl.h-detail-info.wideR dd.dd-w, p.h-detail-info.wideR dd.dd-w, ul.h-detail-info.wideR dd.dd-w, div.h-detail-info.wideR dd.dd-w {
    display: inline-block;
    width: 65% !important;
    text-align: left;
    padding: 0 !important;
  }
  dl.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2), p.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2), ul.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2), div.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2) {
    flex: 13;
  }

  /* 급여명세서 */
  .h-pay-list {
    padding: 20px 20px 20px 20px !important;
  }
  .h-pay-list.border-right {
    padding: 20px 20px 20px 0 !important;
    border-right: 1px solid #c7d1d8 !important;
    box-sizing: border-box;
  }

  /* 타임라인(상단여백) */
  .timeline-wrap {
    margin: 20px 0 0 0 !important;
  }

  /* 임직원찾기 */
  .h-staff-count {
    text-align: right;
    margin: 20px 10px 0 0;
  }

  /* 설문조사 */
  .h-survey-wrap {
    padding: 0px !important;
  }
  .h-survey-wrap li:nth-child(2) {
    flex: 5;
  }
  .h-survey-wrap li:nth-child(3) {
    flex: 2;
  }

  .h-survey-txt dt {
    flex: 1.5;
    vertical-align: top;
  }
  .h-survey-txt dd:nth-child(2) {
    flex: 0.4;
  }
  .h-survey-txt dd:nth-child(3) {
    flex: 7.6;
  }

  /* 신청서 history */
  .h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-date {
    width: 120px;
  }
  .h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-info {
    width: 200px;
  }

  /* 출퇴근 확인 history */
  ul.h-commute-history > li div {
    width: 92%;
  }

  .h-appr-line {
    padding: 20px 20px 6px 20px !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 9000px) {
  /* 인사기본 */
  .h-info-box {
    width: auto !important;
    text-align: left;
    margin: 0 !important;
    padding-top: 0px !important;
    vertical-align: middle;
  }
  .h-info-box dd {
    display: inline-block;
  }
  .h-info-box.org {
    width: 100% !important;
  }
  .h-info-box.staff-search {
    width: 100% !important;
    margin: 0px !important;
  }
  .h-info-box.staff-search dd {
    color: #454f63 !important;
  }

  /* 공통 리스트(인사정보+타임라인) */
  ul.h-info-list.eval li, dl.h-info-list.eval li {
    color: #454f63;
    font-size: 1.15rem !important;
  }
  ul.h-info-list.eval li:nth-child(1), dl.h-info-list.eval li:nth-child(1) {
    float: left;
  }
  ul.h-info-list.eval li:nth-child(3), dl.h-info-list.eval li:nth-child(3) {
    display: block;
  }
  ul.h-info-list.eval li .h-info-evu-grade, dl.h-info-list.eval li .h-info-evu-grade {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    color: #FFFFFF;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 35px;
    background: #da291c;
  }

  /* 화상조직도 */
  .h-org-member {
    margin: 10px;
  }

  /* 신청서 */
  dl.h-detail-info, p.h-detail-info, ul.h-detail-info, div.h-detail-info {
    /* 설문조사 */
    /* 출퇴근확인 */
  }
  dl.h-detail-info dt, p.h-detail-info dt, ul.h-detail-info dt, div.h-detail-info dt {
    width: 40%;
    vertical-align: top;
  }
  dl.h-detail-info dd, p.h-detail-info dd, ul.h-detail-info dd, div.h-detail-info dd {
    width: 58%;
  }
  dl.h-detail-info.wideR dt, p.h-detail-info.wideR dt, ul.h-detail-info.wideR dt, div.h-detail-info.wideR dt {
    width: 30% !important;
  }
  dl.h-detail-info.wideR dd, p.h-detail-info.wideR dd, ul.h-detail-info.wideR dd, div.h-detail-info.wideR dd {
    width: 69% !important;
  }
  dl.h-detail-info.wideR dd.dd-w, p.h-detail-info.wideR dd.dd-w, ul.h-detail-info.wideR dd.dd-w, div.h-detail-info.wideR dd.dd-w {
    display: inline-block;
    width: 65% !important;
    text-align: left;
    padding: 0 !important;
  }
  dl.h-detail-info.h-survey-box dt ul.h-survey-q li, p.h-detail-info.h-survey-box dt ul.h-survey-q li, ul.h-detail-info.h-survey-box dt ul.h-survey-q li, div.h-detail-info.h-survey-box dt ul.h-survey-q li {
    flex: 0.5;
  }
  dl.h-detail-info.h-survey-box dt ul.h-survey-q li:before, p.h-detail-info.h-survey-box dt ul.h-survey-q li:before, ul.h-detail-info.h-survey-box dt ul.h-survey-q li:before, div.h-detail-info.h-survey-box dt ul.h-survey-q li:before {
    display: none;
  }
  dl.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2), p.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2), ul.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2), div.h-detail-info.h-survey-box dt ul.h-survey-q li:nth-child(2) {
    flex: 13 !important;
  }

  /* 급여명세서 */
  .h-pay-list {
    padding: 20px 0 20px 20px !important;
  }
  .h-pay-list.border-right {
    padding: 20px 20px 20px 0 !important;
    border-right: 1px solid #c7d1d8 !important;
    box-sizing: border-box;
  }

  /* 타임라인(상단여백) */
  .timeline-wrap {
    margin: 20px 0 0 0 !important;
  }

  /* 임직원찾기 */
  .h-staff-count {
    text-align: right;
    margin: 20px 10px 0 0;
  }

  /* 설문조사 */
  .h-survey-wrap {
    padding: 0px !important;
  }
  .h-survey-wrap li:nth-child(2) {
    flex: 5;
  }
  .h-survey-wrap li:nth-child(3) {
    flex: 2;
  }

  .h-survey-txt dt {
    flex: 1;
    vertical-align: top;
  }
  .h-survey-txt dd:nth-child(2) {
    flex: 0.2;
  }
  .h-survey-txt dd:nth-child(3) {
    flex: 8;
  }

  /* 신청서 history */
  .h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-date {
    width: 120px;
  }
  .h-apply-history > ul li .h-appr-line-status-txt .h-apply-history-info {
    width: 300px;
  }

  /* 파일명 */
  .h-file-list-name {
    float: right;
    width: 97% !important;
  }

  /* 출퇴근 확인 history */
  ul.h-commute-history > li div {
    width: 92%;
  }

  .h-appr-line {
    padding: 20px 20px 6px 20px !important;
  }
}
.h-perInfo {
  align-items: center;
}
.h-perInfo .per-list {
  text-align: left;
  color: #fff;
  font-size: 1.2rem;
  padding-left: 10px;
}
.h-perInfo .per-list li {
  padding: 5px 0;
}
.h-perInfo .per-list li p {
  opacity: 0.85;
}

.h-info-card-wrap {
  background: #ededed;
  margin: 0 -15px 0 -15px;
}
.h-info-card-wrap .h-info-card ul li {
  color: #9b9b9b;
  font-size: 1.1rem;
}
.h-info-card-wrap .h-info-card .media {
  position: relative;
}
.h-info-card-wrap .h-info-card .media .icon-ellipsis {
  position: absolute;
  right: 0;
  top: 3px;
  transform: rotate(90deg);
}
.h-info-card-wrap .h-info-card .media * {
  flex: 1;
  text-align: left;
}
.h-info-card-wrap .h-info-card .media strong {
  color: #666;
  font-size: 1.2rem;
}
.h-info-card-wrap .h-info-card .media strong span {
  font-size: 1.1rem;
  color: #9b9b9b;
  font-weight: normal;
}
.h-info-card-wrap .h-info-card .media p {
  color: #9b9b9b;
  font-size: 1.1rem;
}

html {
  height: 100% !important;
}

body {
  margin: 0px;
  padding: 0px;
  opacity: 0;
  /* background:$basic2ndColor !important */
  text-align: left !important;
  letter-spacing: -0.3px !important;
  /* ios iframe 버그 보정(v-dialog 위치, 모멘텀스크롤 관련) */
  height: 100% !important;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch !important;
  /*position:absolute !important;*/
}

.theme--light.application {
  background: transparent !important;
}

form {
  margin: 0px;
  padding: 0px;
  background: transparent !important;
}

h1, h2, h3 {
  margin: 0px !important;
  padding: 0px !important;
}

/* h2에 사용 - sub 상단 타이틀 */
.h-title {
  position: relative;
  padding: 0;
  text-align: center;
  background: #FFFFFF;
  /* 하단 컨텐츠가 배경이 아닌 컨텐츠가 올 경우, 타이틀 위의 여백조정 용도(ex.급여명세서) */
}
.h-title h2 {
  height: 35px;
  line-height: 35px;
  color: #454f63;
  font-size: 1.5rem;
  font-weight: 600;
  vertical-align: middle;
  margin: 0px !important;
  padding: 0px !important;
}
.h-title h2 span {
  display: inline-block;
}
.h-title p {
  color: #454f63;
  font-weight: 600;
}
.h-title.gradient {
  width: 100%;
  padding: 20px 0 !important;
  margin: 0px !important;
}
.h-title.only-search {
  padding: 0 0 20px 0 !important;
}
.h-title.only-title {
  padding: 0 !important;
}
.h-title.h-pay {
  width: 100%;
  padding: 20px 0 0 0 !important;
  margin: 0px !important;
}

/* h3에 사용 */
.h-sub-title {
  color: #454f63;
  font-size: 1.5rem;
  font-weight: 600;
  /* 하단 신청내역 타이틀 */
  /* h4에 사용(h3, h4 같이 사용될 경우) */
}
.h-sub-title.apply-detail {
  font-size: 1.1rem;
  font-weight: normal !important;
}
.h-sub-title.apply-detail span {
  color: #da291c;
}
.h-sub-title.card-title {
  color: #9b9b9b;
  font-size: 1.1rem;
  line-height: 2rem;
  font-weight: 600 !important;
}
.h-sub-title.content-title {
  color: #454f63;
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 600 !important;
}
.h-sub-title.content-sub-title {
  color: #454f63;
  font-size: 1.15rem;
  line-height: 2rem;
  font-weight: 600 !important;
}

ul, ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

dl, dt, dd, p, figure {
  margin: 0px;
  padding: 0px;
}

dt {
  font-weight: normal;
}

i {
  display: inline-block;
  line-height: normal;
  vertical-align: middle !important;
}

:after, :before {
  text-decoration: none !important;
  vertical-align: initial !important;
}

hr {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

a {
  color: #454f63 !important;
}

input, textarea {
  -webkit-transform: translateZ(0px);
  /* ios safari 텍스트입력시 렌더링버그수정*/
}

.txtList {
  padding: 0 20px !important;
}

.txtList li {
  font-size: 16px;
  color: #454f63;
}

.txtList.square li {
  list-style: square;
}

.w-48 {
  width: 48% !important;
}

.w-90 {
  width: 90% !important;
}

.h-bg-white {
  background: #FFFFFF !important;
}

.h-bg-gray {
  background: #e7ecf0 !important;
}

.hidden {
  font-size: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  visibility: hidden;
  width: 0;
}

/* padding */
.pl0 {
  padding-left: 0 !important;
}

.pr0 {
  padding-right: 0 !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.pt0 {
  padding-top: 0 !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pt60 {
  padding-top: 50px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.plr16 {
  padding: 0 16px;
}

/* margin */
.mb0 {
  margin-bottom: 0 !important;
}

.container-fluid.mb0 {
  margin-bottom: 0 !important;
}

.m5 {
  margin: 5px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mlr-20 {
  margin: 0 -20px;
}

/* 화상조직도(조직) 여백에 사용 */
.flex {
  display: flex;
}

/* 폰트강조 */
.bold-txt {
  color: #da291c;
  font-weight: 600;
}

/* px size */
.wx40 {
  width: 40px !important;
}

.wx60 {
  width: 60px !important;
}

.wx75 {
  width: 75px !important;
}

.hx5 {
  height: 5px !important;
}

/* % size */
.wp20 {
  width: 20% !important;
}

.wp47 {
  width: 47% !important;
}

.wp50 {
  width: 50% !important;
}

.wp80 {
  width: 80% !important;
}

.wp85 {
  width: 85% !important;
}

.wp89 {
  width: 89% !important;
}

.wp90 {
  width: 90% !important;
}

.wp94 {
  width: 94% !important;
}

.wp97 {
  width: 97% !important;
}

.wp100 {
  width: 100% !important;
}

.hp100 {
  height: 100% !important;
}

/* vw size */
.vw100 {
  width: 100vw !important;
}

/* vh size */
.vh100 {
  height: 100vh !important;
}

/* line, bullet */
.divide-right-line {
  color: #acbac5;
}

/* ==========================================================================
    공통
   ========================================================================== */
.main-c {
  color: #da291c;
}

/* 버튼 */
.h-btn {
  display: inline-block;
  width: 100%;
  height: 40px;
  padding: 9px;
}
.h-btn.full {
  text-align: center;
  font-size: 16px;
  color: #fff !important;
}

/* 박스 쉐도우 */
.h-shadow {
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
}

.h-shadow-sm {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

/* 데이터 없을 경우 */
.h-nodata {
  color: #454f63;
  font-size: 1.2rem;
  text-align: center;
  align-items: center;
}
.h-nodata .ico-nodata {
  position: relative;
  width: 120px;
  height: 120px;
  line-height: 120px;
  color: #617b9c;
  font-size: 5rem;
  border: 1px solid #617b9c;
  border-radius: 120px;
  margin: 15% auto 0 auto !important;
}
.h-nodata .nodata-txt {
  color: #617b9c;
  font-size: 1.1rem;
  margin: 20px 0 0 0 !important;
}

.h-nodata-content {
  color: #454f63;
  font-size: 0.9rem;
  text-align: center;
  align-items: center;
}
.h-nodata-content .ico-nodata {
  position: relative;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #7ab6f5;
  font-size: 1.5rem;
  border: 1px solid #7ab6f5;
  border-radius: 120px;
  margin: 0 auto !important;
}
.h-nodata-content .nodata-txt {
  color: #7ab6f5;
  font-size: 0.9rem;
  margin: 10px 0 0 0 !important;
}

/* 공통 카드형태 */
.h-list-card {
  padding: 20px;
  background: #FFFFFF;
  box-sizing: border-box;
  min-height: 100%;
  /* 타임라인 */
  /* 맨 위에 여백 없애야 할 경우 사용 */
  /* 카드 높이 동일하게 맞추기 위해 사용 */
  /* 출퇴근 확인 */
}
.h-list-card i.icon-add {
  font-size: 3.7rem;
  vertical-align: top;
  opacity: 0.7;
}
.h-list-card i.icon-ellipsis {
  color: #bcc7cc;
  font-size: 1.5rem;
}
.h-list-card i.icon-list_arrow {
  color: #b9b9b9;
  font-size: 1.5rem;
  margin: 20px 0 0 0;
}
.h-list-card .h-menu-apply-box {
  display: flex;
  justify-content: center;
}
.h-list-card .h-menu-apply-box li {
  flex: 0 0 70px;
}
.h-list-card.timeline {
  position: relative;
  /* 타임라인 용도 배경라인 */
}
.h-list-card.timeline .time-icon-bg {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: #FFFFFF;
  border-radius: 25px;
}
.h-list-card.timeline .time-icon-bg i.icon-tam-commute {
  color: #da291c !important;
  font-size: 1.8rem;
  margin: 0 0 5px 3px;
}
.h-list-card.timeline .time-icon-bg i.icon-tam-commute:after {
  content: "";
  position: absolute;
  top: 18px;
  left: 26px;
  width: 30px;
  height: 2px;
  background: #da291c;
  transform: rotate(-180deg);
}
.h-list-card.timeline .time-icon-bg i.icon-tam-commute:before {
  background: -webkit-linear-gradient(#da291c, #da291c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h-list-card.timeline i.icon-ellipsis {
  position: absolute;
  top: 0;
  right: -10px;
}
.h-list-card.timeline .h-timeline-year {
  color: #da291c;
  font-size: 1.8rem;
  font-family: Arial;
  padding: 0 0 0 32px;
}
.h-list-card.timeline:before {
  content: "";
  position: absolute;
  top: 0;
  left: 35px;
  width: 2px;
  height: 100%;
  background: #e7ecf1;
  transform: rotate(-180deg);
}
.h-list-card.org {
  background: #e7ecf1;
  margin: 20px 0 0 0 !important;
}
.h-list-card.top {
  margin: 0px !important;
}
.h-list-card.min-height {
  min-height: 100%;
}
.h-list-card.popup-card-border {
  border: 1px solid #c7d1d8;
}
.h-list-card.tam {
  /* 근무제 카드 리스트 */
}
.h-list-card.tam ul > li {
  margin: 10px 0 0 0;
}
.h-list-card.tam ul > li:first-child {
  margin: 0;
}
.h-list-card.commute {
  border-radius: 5px;
  padding: 20px 10px !important;
  margin: 20px 0 !important;
}
.h-list-card.commute dl {
  text-align: center;
  padding: 5px 0 0 0 !important;
}
.h-list-card.commute dl dt {
  color: #454f63;
  font-size: 1rem;
  font-weight: 600;
}
.h-list-card.commute dl dt span {
  font-size: 0.9rem;
  font-weight: normal;
}
.h-list-card.commute dl dd {
  color: #a7acb4;
  font-size: 1.3rem;
  font-weight: 600;
  font-family: Arial;
}
.h-list-card.commute dl dd.on {
  color: #5fbcb4;
}

/* 여백 - 다단일 경우(근무일정) */
.h-list-card-space:not(:first-child) {
  padding: 0 !important;
  margin: 10px 0 0 0 !important;
}

#vmMenu .h-list-card-space:last-child .h-list-card {
  border: none !important;
}

#vmMenu #divMenuContainer {
  padding-bottom: 0;
}

/* 여백 - 카드만 사용될 경우 */
.h-list-card-only {
  margin: 10px 0 0 0 !important;
}

/* 공통 서브 컨텐츠 박스 - 작은 카드형태 아닌 박스 형태(신청서) */
.h-content {
  background: #FFFFFF;
  padding: 20px;
  margin-top: 10px;
  /* 파일첨부 용도(하단에 버튼 또는 카드가 붙을 경우 사용) - 위의 여백이 없어야 할 경우 사용 */
  /* 카드처럼 띄우고,하단 여백이 없어야 할 경우 사용 (예- 학자금신청서),  */
}
.h-content.bottom {
  margin-top: 0;
  padding: 0px 20px;
}
.h-content.content-bottom {
  padding: 20px 20px 0px 20px !important;
}
.h-content label {
  color: #454f63;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  position: relative;
}
.h-content label.h-req:before {
  content: "*";
  width: 5px;
  height: 5px;
  display: inline-block;
  color: #ff4747;
  position: absolute;
  left: 3px;
}
.h-content.org-part {
  background: transparent !important;
}

/* 공통 서브 헤더박스 */
.h-header {
  margin: 0px;
  width: 100% !important;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 20px 10px 10px;
  vertical-align: middle;
  background: #FFFFFF;
  /* 헤더에 검색창만 있을 경우 */
  /* 헤더의 하단에 여백을 없애야 할 경우 */
  /* 급여명세서 용도*/
}
.h-header.gradient {
  background: #e0dee0;
}
.h-header.gradient .h-info-box,
.h-header.gradient .per-list,
.h-header.gradient .h-contact-list li a {
  color: #454f63 !important;
}
.h-header.only-search {
  padding: 20px 20px 2px 20px !important;
}
.h-header.bottom {
  padding: 20px 20px 0 20px !important;
}
.h-header.h-pay {
  border-radius: 10px;
  padding: 0 !important;
}

/* 공통 사진(인사정보, 신청서리스트) */
.h-photo-area {
  position: relative;
  width: 90px;
  text-align: center;
  margin: 0 auto;
  /* 인사정보 */
  /* 결재라인 용도  */
  /* 결재라인 - 편집하기 용도  */
}
.h-photo-area .photo {
  border: 1px solid #c7d1d8;
  overflow: hidden;
}
.h-photo-area .photo.photo-sm {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.h-photo-area .photo.photo-md {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  /* 신청서 결재라인 센터정렬(ex 경조금신청서) */
}
.h-photo-area .photo.photo-md.photo-center {
  position: relative;
  margin: 0 auto !important;
}
.h-photo-area .photo.photo-lg {
  width: 90px;
  height: 90px;
  border-radius: 90px;
}
.h-photo-area .photo img {
  max-width: 100%;
  height: auto;
}
.h-photo-area.photo-left {
  display: inline-block;
  width: 60px !important;
  text-align: left;
  margin: 0;
}
.h-photo-area .badge {
  display: inline-block;
  /* 신청서리스트 */
}
.h-photo-area .badge.applList {
  position: absolute;
  top: 20px;
  left: -15px;
  width: 30px;
  height: 30px;
  text-align: center;
  background: #da291c;
  border-radius: 35px;
  border: 1px solid #FFFFFF;
  z-index: 2;
  /* 반려 */
  /* 작성 */
  /* 완료 */
}
.h-photo-area .badge.applList i {
  color: #FFFFFF !important;
  font-size: 1.5rem;
  vertical-align: top;
}
.h-photo-area .badge.applList i.icon-ellipsis {
  transform: rotate(-180deg) !important;
}
.h-photo-area .badge.applList i.icon-tam-commute:before {
  content: "";
  background: #fff;
  font-weight: bold;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.4rem;
}
.h-photo-area .badge.applList.return {
  background: #faa006 !important;
}
.h-photo-area .badge.applList.write {
  background: #868daa !important;
}
.h-photo-area .badge.applList.ok {
  background: #7ab6f5 !important;
}
.h-photo-area .h-search-btn {
  position: absolute;
  top: 60px;
  right: -9px;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 30px;
  background: #FFFFFF;
  padding-top: 3px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
}
.h-photo-area .h-search-btn i.icon-search {
  color: #454f63;
  font-size: 1.7rem;
}
.h-photo-area .h-search-btn i.icon-camera {
  color: #454f63;
  font-size: 1.5rem;
  margin-bottom: 3px;
}
.h-photo-area.h-personal-info {
  color: #FFFFFF;
  font-size: 0.9rem;
}
.h-photo-area.appr-line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: auto;
  align-items: center;
}
.h-photo-area.appr-line li {
  width: 70px;
  height: 70px;
  text-align: center;
  margin: 0 auto;
  align-items: center;
}
.h-photo-area.appr-line-edit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: auto;
  align-items: center;
}
.h-photo-area.appr-line-edit li:nth-child(1) {
  flex: 1;
  width: 60px;
  height: 60px;
  margin: 0 10px 0 0;
}
.h-photo-area.appr-line-edit li:nth-child(2) {
  flex: 3;
  text-align: left;
  align-items: center;
}

/* chart */
.h-chart div {
  height: 5px !important;
  border-radius: 5px !important;
  margin: 10px 0 0 0;
}

/* 인사정보 */
/* 상세 레이어(인사정보) */
.h-detail-layer {
  position: absolute;
  z-index: 100;
  max-width: 300px;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #e7ecf1;
  background: #FFFFFF;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
}
.h-detail-layer .h-detail-layer-content {
  position: relative;
}
.h-detail-layer .h-detail-layer-content .h-layer-arrow {
  float: right;
}
.h-detail-layer .h-detail-layer-content .h-layer-arrow i.icon-close {
  color: #454f63;
  font-size: 1.25rem;
}
.h-detail-layer .h-detail-layer-content dl {
  margin-left: 13px;
}
.h-detail-layer .h-detail-layer-content dl dt {
  color: #454f63;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0 0 10px 0 !important;
}
.h-detail-layer .h-detail-layer-content dl dd {
  color: #454f63;
  font-size: 1rem;
}

/* list count - 설문조사, 알림조회에서 사용 */
.h-count {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #FFFFFF;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  background: #868daa;
  border-radius: 20px;
  margin: 0 10px 3px 0;
}
.h-count.survey {
  background: #868daa;
}
.h-count.alarm-new {
  font-size: 0.95rem;
  background: #da291c;
}

/* 도움말 */
a.h-help, span.h-help {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #FFFFFF !important;
  text-align: center;
  vertical-align: middle;
  background: #868daa;
  border-radius: 20px;
  text-decoration: none;
}
a.h-help i.icon-worktime-list, span.h-help i.icon-worktime-list {
  margin-bottom: 2px;
}

/* 코멘트 */
.h-comment {
  display: block;
  margin: 10px 0 0 0 !important;
}
.h-comment li:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1px;
  box-sizing: border-box;
  background: #949494;
  margin: 0 10px 5px 0;
}
.h-comment li span {
  display: inline-block;
  width: 94%;
  vertical-align: top;
}

/* 그래프 */
.h-graph {
  position: relative;
  top: 0;
  left: 0;
  background: #e3e7f0;
  height: 5px;
  border-radius: 3px;
  z-index: 1;
}
.h-graph .graph-on {
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  border-radius: 3px;
  background: #ff9900;
  z-index: 2;
}
.h-graph .graph-pointer {
  position: absolute;
  top: -6px;
  right: -9px;
  display: inline-block;
  width: 17px;
  height: 17px;
  background: #7cb5fc;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 17px;
  box-sizing: border-box;
  z-index: 3;
}

/* 파일첨부(신청서) */
.h-file-area {
  margin: 0 0 10px 0;
}
.h-file-area:last-child {
  margin: 0;
}

.h-file {
  vertical-align: middle;
}
.h-file i.icon-file {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  color: #ff4747;
  font-size: 1.42rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #c8d4df;
  border-radius: 30px;
}

.h-upload-list {
  position: relative;
  display: inline-block;
  width: 94%;
}
.h-upload-list .media-body {
  width: 30px !important;
}
.h-upload-list i.icon-delete {
  position: absolute !important;
  top: -13px !important;
  right: 8px !important;
  color: #454f63;
  font-size: 1.7rem;
}

.h-file-list-btn {
  padding: 10px;
  border: 1px solid #EAEAEA;
  borer-radius: 10px;
  box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.22);
  margin-bottom: 25px;
}

.h-apply-file-list {
  display: none;
  margin: 20px 5px;
}

/* 파일뷰어 */
.h-viewer-wrap {
  text-align: center;
  overflow: auto;
}

/* loading */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 102px;
  tansform: translate(-50%, -50%);
  height: 102px;
  line-height: 102px;
  z-index: 10000;
}
.loading img {
  width: 102px;
}

/* ==========================================================================
        공통 - vuetify.min.css 수정
   ========================================================================== */
i.icon-logo:before {
  vertical-align: baseline !important;
}

/* v-btn에 공통으로 잡혀 있는  box-shadow 다 없앰 */
.v-btn:not(.v-btn--depressed):not(.v-btn--flat) {
  box-shadow: none !important;
}

/* .v-btn {height:auto !important;} 달력아이콘 때문에 없앰 */
/* 달력 타이틀 짤리는 문제 해결(overflow:hidden 속성 때문에 추가)*/
.v-date-picker-title__date {
  padding-top: 5px;
}

/* main search */
.h-contents-search {
  margin: 25px 0 0 0 !important;
}
.h-contents-search .theme--light.v-label {
  color: #757575 !important;
  font-size: 1.1rem !important;
  padding: 0 0 0 10px;
}
.h-contents-search.theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
  border-radius: 30px !important;
  background: #f7f8f9 !important;
}
.h-contents-search i.icon-search:before {
  font-size: 2.2rem;
  margin: 0;
  background: -webkit-linear-gradient(#009afa, #50587d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* team/list search, 급여명세서, 근무일정 셀렉트박스 */
.h-search {
  padding: 0 !important;
  margin: 0 !important;
  /* 급여명세서, 근무일정 셀렉트박스 */
}
.h-search.no-round .v-input__slot {
  border-radius: 0 !important;
  border: 1px solid #c7d1d8 !important;
}
.h-search .v-input__slot {
  background: #f7f7f7 !important;
  border-radius: 5.5rem !important;
  min-height: 40px !important;
}
.h-search .v-input__slot:before {
  border-style: none !important;
}
.h-search .v-text-field.v-text-field--solo .v-input__control .v-input__slot .v-input__append-inner {
  display: none !important;
}
.h-search .theme--light.v-label {
  color: #757575 !important;
  font-size: 1rem !important;
  padding: 0 0 0 5px;
  height: 40px !important;
  line-height: 40px !important;
}
.h-search .theme--light.v-input:not(.v-input--is-disabled) input {
  padding: 0 0 0 1rem !important;
}
.h-search .v-input__control .v-input__slot .v-text-field__slot input {
  padding: 20px 0 !important;
}
.h-search .v-input__control .v-input__slot .v-text-field__slot input {
  margin-top: 0 !important;
}
.h-search .v-label.theme--light {
  top: 0 !important;
}
.h-search.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot {
  box-shadow: none;
}
.h-search i.icon-search {
  color: #868daa;
  font-size: 2.2rem;
  margin: 0;
}
.h-search.h-pay-select .v-input__slot, .h-search.h-work-select .v-input__slot, .h-search.h-worktime-select .v-input__slot {
  background: #FFFFFF !important;
  border-radius: 4px !important;
}
.h-search.h-pay-select .theme--light.v-label, .h-search.h-work-select .theme--light.v-label, .h-search.h-worktime-select .theme--light.v-label {
  color: #454f63 !important;
}
.h-search.h-pay-select.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot, .h-search.h-work-select.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot, .h-search.h-worktime-select.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot {
  box-shadow: 0 !important;
}
.h-search.h-pay-select i.icon-select_arrow, .h-search.h-pay-select i.icon-calenda, .h-search.h-pay-select i.icon-popup, .h-search.h-work-select i.icon-select_arrow, .h-search.h-work-select i.icon-calenda, .h-search.h-work-select i.icon-popup, .h-search.h-worktime-select i.icon-select_arrow, .h-search.h-worktime-select i.icon-calenda, .h-search.h-worktime-select i.icon-popup {
  color: #454f63 !important;
  font-size: 2rem;
  margin: 0 0 4px 0 !important;
}

/* 리스트 버튼 */
.h-list-btn {
  display: inline-block;
  background: #e7ecf1 !important;
  width: 35px;
  height: 35px !important;
  line-height: 35px;
  border-radius: 35px !important;
  min-width: 35px !important;
}
.h-list-btn i {
  font-size: 2rem;
  vertical-align: text-top;
}
.h-list-btn.v-btn {
  padding: 0 !important;
  margin: 0 0 3px 0 !important;
  min-width: auto !important;
}

/* tab */
.h-tab .v-tabs a:not([href]):not([tabindex]) {
  color: #000 !important;
  font-size: 1.1rem !important;
  font-weight: 600;
}
.h-tab .v-tabs .v-tabs__item:not(.v-tabs__item--active) {
  opacity: 0.5 !important;
}
.h-tab .v-tabs__slider {
  height: 3px !important;
  background: #ff4747 !important;
}

/* more */
.h-more-btn {
  color: #617b9c;
  font-size: 1.3rem;
  text-align: center;
  background: #dce4ec;
  border: 1px solid #abbace;
  border-left: 0;
  border-right: 0;
}
.h-more-btn .theme--light.v-btn:not(.v-btn--icon):not(.v-btn--flat) {
  background: none !important;
}
.h-more-btn .v-btn {
  padding: 0 !important;
  margin: 0 !important;
  min-width: auto !important;
}

/* input, select, textarea, button, radio, checkbox */
.h-combo {
  /* solo type */
  /* 	&.v-list__tile {height:35px !important;}
  	&.primary--text {color:#009afa !important;caret-color:#009afa !important;} */
}
.h-combo.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
  border: 1px solid #c7d1d8 !important;
}
.h-combo.v-select.v-text-field--enclosed:not(.v-text-field--single-line) .v-select__selections {
  padding-top: 0px !important;
}
.h-combo.theme--light.v-select .v-select__selections {
  color: #454f63 !important;
}
.h-combo.v-text-field--outline > .v-input__control > .v-input__slot {
  min-height: 45px !important;
}
.h-combo.v-text-field.v-text-field--enclosed .v-input__append-inner {
  margin-top: 0px !important;
}
.h-combo.v-text-field--outline .v-label {
  top: 5px !important;
}
.h-combo.v-text-field .v-label {
  text-overflow: clip !important;
}
.h-combo i {
  font-size: 2.5rem;
  margin-top: 3px;
}
.h-combo.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot {
  box-shadow: none !important;
}
.h-combo.theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
  border: 1px solid #c7d1d8 !important;
}
.h-combo.v-text-field .v-input__append-inner {
  padding: 0 !important;
}
.h-combo.v-text-field .v-label {
  max-width: none !important;
  position: relative !important;
}
.h-combo.v-text-field.v-text-field--solo .v-label {
  top: 5px !important;
  overflow: visible !important;
}
.h-combo.theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
  border-radius: 4px !important;
}
.h-combo.v-text-field--solo > .v-input__control > .v-input__slot {
  min-height: 45px !important;
}

.h-input {
  /* outline일 때, 밑으로 떨어지는 문제있어서, 혹시 몰라 solo타입도 생성해 둠 */
  /* ex) input 텍스트 밑으로 떨어짐 - 개인정보수정 */
  /* v-text-field 가운데정렬 스타일(숫자입력 등) */
  /* v-text-field 우측정렬 스타일(숫자입력 등) */
  /* 조회용도 - 임의로 만듬 */
  /* disable일 때 */
}
.h-input.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
  border: 1px solid #c7d1d8 !important;
}
.h-input.v-text-field--box input {
  margin-top: 7px !important;
}
.h-input.v-text-field--solo input {
  margin-top: 7px !important;
}
.h-input.v-text-field--outline input {
  margin-top: 7px !important;
}
.h-input.v-text-field input {
  padding: 0 !important;
}
.h-input.v-text-field.h-align-center input {
  text-align: center !important;
}
.h-input.v-text-field.h-align-right input {
  text-align: right !important;
}
.h-input.theme--light.v-input:not(.v-input--is-disabled) input {
  color: #474747 !important;
}
.h-input.v-text-field--outline > .v-input__control > .v-input__slot {
  min-height: 45px !important;
  display: flex;
  align-items: center;
}
.h-input.v-text-field.v-text-field--enclosed .v-input__append-inner {
  margin-top: 5px !important;
  align-self: unset;
}
.h-input.v-text-field--outline input[type=Number] {
  margin-top: 7px !important;
}
.h-input.v-text-field--outline .v-label {
  top: 12px !important;
}
.h-input i {
  font-size: 2.5rem;
  margin-top: -2px;
}
.h-input i.icon-calenda {
  font-size: 1.9rem;
}
.h-input label {
  color: #454f63;
}
.h-input.v-text-field > .v-input__control > .v-input__slot:before {
  border-style: none !important;
  border-width: 0px !important;
}
.h-input.theme--light.v-text-field > .v-input__control > .v-input__slot:before {
  border-color: transparents !important;
}
.h-input.theme--light.v-text-field.v-input--is-disabled > .v-input__control > .v-input__slot:before {
  border-image: none !important;
}
.h-input i.material-icons {
  display: none !important;
}
.h-input.disable.theme--light.v-text-field--box > .v-input__control > .v-input__slot {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid #c7d1d8;
}
.h-input.v-text-field--box > .v-input__control > .v-input__slot {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  min-height: 45px !important;
}

.h-input-info {
  color: #454f63;
  font-size: 0.9rem;
  font-weight: normal !important;
}

.h-textarea {
  /* 입력용도 */
  /* 조회용도 */
}
.h-textarea.theme--light.v-text-field--box > .v-input__control > .v-input__slot {
  background: white;
  border: 1px solid #c7d1d8 !important;
}
.h-textarea.theme--light.v-text-field.v-input--is-disabled > .v-input__control > .v-input__slot:before {
  border-image: none !important;
}
.h-textarea.theme--light.v-text-field > .v-input__control > .v-input__slot::before {
  border-color: none !important;
}
.h-textarea.v-text-field--box > .v-input__control > .v-input__slot::before, .h-textarea .v-text-field > .v-input__control > .v-input__slot::before {
  border-style: none !important;
  border-width: 0px !important;
}
.h-textarea.v-text-field--box > .v-input__control > .v-input__slot {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}
.h-textarea.v-textarea.v-text-field--box textarea, .h-textarea .v-textarea.v-text-field--enclosed textarea {
  margin-top: 0px !important;
}
.h-textarea.theme--light.v-input--is-disabled textarea {
  color: #454f63 !important;
  font-weight: normal !important;
  font-size: 1rem;
}
.h-textarea.v-text-field.v-text-field--enclosed .v-text-field__details, .h-textarea .v-text-field.v-text-field--enclosed > .v-input__control > .v-input__slot {
  padding: 0px !important;
}
.h-textarea.v-text-field.v-text-field--enclosed .v-text-field__details {
  margin-bottom: 0px !important;
}
.h-textarea.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
  border: 1px solid #c7d1d8 !important;
  border-radius: 0;
  background: #fff !important;
}
.h-textarea.v-textarea.v-text-field--enclosed textarea {
  margin-top: 0px !important;
  color: #474747;
}
.h-textarea.disable.theme--light.v-text-field--box > .v-input__control > .v-input__slot {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid #c7d1d8 !important;
}

.h-date-select, .h-period-input {
  position: relative;
}
.h-date-select i.icon-calenda, .h-period-input i.icon-calenda {
  position: absolute;
  top: 7px;
  right: 10px;
  color: #454f63;
  font-size: 2.1rem;
}

.h-checkbox-area {
  display: inline-block;
  width: 30px;
  margin: 10px 0 0 0;
}
.h-checkbox-area .h-checkbox.theme--light.v-input:not(.v-input--is-disabled) input {
  color: #c7d1d8 !important;
}
.h-checkbox-area .h-checkbox.v-input--selection-controls {
  margin-top: 16px !important;
  padding: 0px !important;
}

/* 신청서 전체선택, 선택결제 (결재내역, 승인내역 페이지) */
.h-all-checkbox-area {
  height: 50px;
  padding: 10px 5px 0 5px;
}
.h-all-checkbox-area .h-checkbox {
  width: 30px;
}
.h-all-checkbox-area .h-checkbox.v-input {
  flex: 0 !important;
  display: inline-block;
}
.h-all-checkbox-area .h-all-select {
  flex: 4;
  margin: 10px 0 0 0;
}
.h-all-checkbox-area .h-all-select .v-btn {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem;
}
.h-all-checkbox-area .h-all-select .v-btn .v-btn__content {
  justify-content: left !important;
}
.h-all-checkbox-area .h-all-select .v-btn i.icon-ok {
  color: #454f63 !important;
  font-size: 1.4rem;
  padding: 0 5px 0 0;
}
.h-all-checkbox-area .h-all-select .v-btn i.icon-cancel {
  color: #454f63 !important;
  font-size: 1.2rem;
  padding: 0 5px 0 0;
}
.h-all-checkbox-area .media-body {
  flex: 0.3 !important;
}

.h-radio label {
  margin-bottom: 0px !important;
}
.h-radio.theme--light.v-radio--is-disabled label {
  color: #454f63 !important;
  font-weight: normal !important;
  font-size: 1rem;
}
.h-radio.v-radio {
  align-items: stretch !important;
}
.h-radio.accent--text {
  color: #454f63 !important;
  caret-color: #454f63 !important;
}
.h-radio .theme--light.v-label {
  color: #454f63 !important;
  font-weight: 400;
}
.h-radio .theme--light.v-icon {
  color: #c7d1d8 !important;
}
.h-radio .theme--light.v-icon.accent--text {
  color: #5fbcb4 !important;
}
.h-radio.theme--light.v-radio--is-disabled .v-icon {
  color: rgba(110, 128, 147, 0.26) !important;
}

.h-checkbox.v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
  margin-bottom: 0px !important;
}
.h-checkbox.v-input__slot {
  margin-bottom: 0px !important;
}
.h-checkbox.v-input--selection-controls {
  margin: 0px !important;
  padding: 0px !important;
}
.h-checkbox.theme--light.v-input--is-disabled .v-label {
  color: #454f63 !important;
  font-weight: normal !important;
}
.h-checkbox.v-label {
  margin-bottom: 0px !important;
}
.h-checkbox label {
  margin-bottom: 0px !important;
}
.h-checkbox .theme--light.v-label {
  color: #454f63 !important;
}
.h-checkbox .accent--text {
  color: #454f63 !important;
  caret-color: #454f63 !important;
}
.h-checkbox .theme--light.v-icon {
  color: #6e8093 !important;
}
.h-checkbox.theme--light.v-radio--is-disabled .v-icon {
  color: rgba(110, 128, 147, 0.26) !important;
}

/* 영역 구분라인 */
.theme--light.v-divider {
  border-color: #c7d1d8 !important;
  /* 그라데이션bg 카드에 투명도 라인 사용할 경우 */
  /* 컨텐츠 제일 마지막 하단 구분라인 */
  /* 타임라인 컨텐츠 구분라인 */
}
.theme--light.v-divider.content-line {
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.theme--light.v-divider.last {
  border-width: 2px 0 0 !important;
}
.theme--light.v-divider.timeline {
  width: 90%;
  border-color: #e7ecf1 !important;
  margin: 0 0 0 40px !important;
}
.theme--light.v-divider.orgline {
  margin: 10px 0 !important;
}
.theme--light.v-divider.orgline2 {
  display: none;
}
.theme--light.v-divider.staffline {
  margin: 7px 0 9px 0 !important;
}
.theme--light.v-divider.payline-top {
  float: left;
  width: 100%;
  margin: 10px 0 10px 0 !important;
}
.theme--light.v-divider.payline-bottom {
  float: left;
  width: 100%;
  margin: 0 !important;
}

/* 결재선 변경 - input 클릭 시 하단 컬러 변경 */
.h-input-line.primary--text {
  color: #da291c !important;
  caret-color: #da291c !important;
}

.v-input.primary--text, div .primary--text {
  color: #da291c !important;
  caret-color: #da291c !important;
}

/* 페이지 하단버튼 */
.h-bottom-button-area {
  background: #e7ecf1;
}
.h-bottom-button-area .h-bottom-button-group {
  padding: 20px;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.h-button-positive1st {
  background: #ff4747;
  color: #FFFFFF !important;
  height: 40px !important;
  flex: 1 !important;
}
.h-button-positive1st.v-btn {
  border-radius: 0px !important;
  margin: 0 5px 0 0 !important;
}
.h-button-positive1st.v-btn:last-child {
  margin: 0 !important;
}

.h-button-positive2nd {
  background: #333;
  color: #FFFFFF !important;
  height: 40px !important;
  flex: 1 !important;
}
.h-button-positive2nd.v-btn {
  border-radius: 0px !important;
  margin: 0 5px 0 0 !important;
}
.h-button-positive2nd.v-btn:last-child {
  margin: 0 !important;
}

/* 다른신청서 함께 신청하기 버튼, 신청서추가하기 버튼, 파일첨부 버튼 */
.h-button-positive3rd {
  background: #617b9c !important;
  color: #FFFFFF !important;
  height: 40px !important;
  flex: 1 !important;
}
.h-button-positive3rd.v-btn {
  border-radius: 3px !important;
  margin: 0 5px 0 0 !important;
}
.h-button-positive3rd.v-btn:last-child {
  margin: 0 !important;
}
.h-button-positive3rd i.icon-plus {
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 7px 0 0;
}

.h-button-negative1st {
  background: #474747;
  color: #FFFFFF !important;
  height: 40px !important;
  flex: 1 !important;
}
.h-button-negative1st.v-btn {
  border-radius: 0px !important;
  margin: 0 5px 0 0 !important;
}
.h-button-negative1st.v-btn:last-child {
  margin: 0 !important;
}

/* 스몰용 버튼(신청서>편집하기레이어팝업>변경,삭제버튼) */
.h-button-negative2nd {
  width: auto;
  height: 25px !important;
  background: #76a8d3 !important;
  color: #FFFFFF !important;
}
.h-button-negative2nd.v-btn {
  border-radius: 5px !important;
  min-width: auto !important;
  padding: 0 10px !important;
  margin: 0 0 5px 0 !important;
}
.h-button-negative2nd.v-btn:last-child {
  margin: 0 !important;
}

/* 임직원 찾기 - 추가검색 버튼 */
.btn-add-search {
  height: 40px !important;
  padding: 0 10px !important;
  background: #5b5f5e !important;
}
.btn-add-search span {
  color: #da291c;
}
.btn-add-search.v-btn {
  border-radius: 0px !important;
  min-width: auto !important;
  color: #FFFFFF !important;
  margin: 0px !important;
}
.btn-add-search i {
  font-size: 1.3rem;
  padding: 0 5px 0 0;
}

.bg-add-search {
  background: #617b9c;
}

/* 폼양식 readonly, disabled 처리 */
.v-input--is-readonly .v-input__control .v-input__slot, .v-input--is-disabled .v-input__control .v-input__slot {
  background: #f3f8fc !important;
}

/* 모달팝업 하단버튼 */
.v-dialog .h-button-positive1st.v-btn {
  border-radius: 0 0 0 5px !important;
  margin: 0px !important;
}
.v-dialog .h-button-positive2nd.v-btn {
  border-radius: 0px !important;
  margin: 0px !important;
}
.v-dialog .h-button-negative1st.v-btn {
  border-radius: 0 0 5px 0 !important;
  margin: 0px !important;
  /* 단독으로 쓰일 경우 */
}
.v-dialog .h-button-negative1st.v-btn:first-child {
  border-radius: 0 0 5px 5px !important;
}
.v-dialog .h-button-private {
  color: #454f63;
  font-size: 1rem;
  text-align: center;
  padding: 7px 17px;
  background: #e7ecf1;
  border-radius: 3px;
}
.v-dialog .h-button-private.on {
  color: #FFFFFF !important;
  background: #76a8d3;
}
.v-dialog .h-button-private.on i {
  color: #FFFFFF;
}
.v-dialog .h-button-private i {
  font-size: 2rem;
}
.v-dialog .h-button-positive3rd.v-btn:first-child {
  border-radius: 5px !important;
  margin: 0px !important;
}

/* 모달팝업 */
.v-dialog {
  margin: 10px !important;
}
.v-dialog .v-sheet {
  border-radius: 5px !important;
}
.v-dialog .v-card__title {
  display: block !important;
  padding: 15px 16px !important;
}
.v-dialog .v-card__title .h-popup-header h1 {
  color: #454f63;
  font-size: 1.2rem;
  font-weight: 600;
  vertical-align: middle;
}
.v-dialog .v-card__title .h-popup-header h1 span {
  display: inline-block;
  padding: 4px 0 0 0;
}
.v-dialog .v-card__title .h-popup-header h1 .h-popup-close-btn {
  float: right;
  background: none !important;
}
.v-dialog .v-card__title .h-popup-header h1 .h-popup-close-btn i.icon-close {
  color: #454f63;
  font-size: 3rem;
}
.v-dialog .v-card__title .h-popup-header h1 .h-popup-close-btn.v-btn {
  margin: -6px -5px 0 0 !important;
  min-width: auto !important;
  padding: 0 !important;
}
.v-dialog .v-card__text {
  padding: 20px !important;
  /* h3에 사용 - 출퇴근확인 팝업 작은 타이틀로 사용 */
}
.v-dialog .v-card__text.appr-line {
  padding: 20px 20px 0px 20px !important;
}
.v-dialog .v-card__text.h-popup-content {
  /* 급여명세서 프라이빗 버튼 선택*/
}
.v-dialog .v-card__text.h-popup-content .h-select-column {
  display: flex;
}
.v-dialog .v-card__text.h-popup-content .h-select-column .h-column1 {
  flex: 1;
}
.v-dialog .v-card__text.h-popup-content .h-select-column .h-column1:last-child {
  flex: 2;
  margin: 0 0 0 4px;
}
.v-dialog .v-card__text.h-popup-content .h-select-column-only {
  position: relative;
  display: block !important;
}
.v-dialog .v-card__text.h-popup-content .h-select-column-only i.icon-select_arrow {
  position: absolute;
  top: 5px;
  right: 5px;
}
.v-dialog .v-card__text.h-popup-content ul.h-private-area > li {
  display: inline-block;
  width: 46.5%;
}
.v-dialog .v-card__text.h-popup-content ul.h-private-area > li a {
  display: block;
}
.v-dialog .v-card__text.h-popup-content ul.h-private-area > li a:hover {
  text-decoration: none;
}
.v-dialog .v-card__text.h-popup-content ul.h-private-area > li:last-child {
  width: 52%;
}
.v-dialog .v-card__text label {
  color: #868daa;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
}
.v-dialog .v-card__text .h-sub-title.content-title {
  color: #454f63;
  font-size: 1.1rem;
  line-height: 1.28rem;
  font-weight: 600 !important;
}
.v-dialog .v-card__text i.icon-mobile, .v-dialog .v-card__text i.icon-email {
  font-size: 1.8rem;
}
.v-dialog .v-card__text .v-list {
  padding: 0 !important;
}
.v-dialog .v-card__actions {
  padding: 0;
}

/* 모달팝업 하단여백 - ios safari UI 감춰지지 않는 현상을 위함*/
.v-dialog__content {
  padding-bottom: 85px;
}

/* ==========================================================================
         공통 - 미디어쿼리 
    ========================================================================== */
@media screen and (min-width: 320px) and (max-width: 374px) {
  .h-shadow {
    box-shadow: none !important;
  }

  .h-list-card.timeline.media {
    display: block !important;
  }

  /* 급여명세서 지급항목+공제항목 */
  .h-content .wp50 {
    width: 100% !important;
  }

  /* 구분라인 */
  .theme--light.v-divider {
    /* 급여명세서 라인 */
  }
  .theme--light.v-divider.payline-bottom {
    display: none !important;
  }
}
@media screen and (min-width: 375px) and (max-width: 413px) {
  .h-shadow {
    box-shadow: none !important;
  }

  .h-list-card.timeline.media {
    display: block !important;
  }

  /* 급여명세서 지급항목+공제항목 */
  .h-content .wp50 {
    width: 100% !important;
  }

  /* 구분라인 */
  .theme--light.v-divider {
    /* 급여명세서 라인 */
  }
  .theme--light.v-divider.payline-bottom {
    display: none !important;
  }
}
@media screen and (min-width: 414px) and (max-width: 767px) {
  .h-shadow {
    box-shadow: none !important;
  }

  .h-list-card.timeline.media {
    display: block !important;
  }

  /* 급여명세서 지급항목+공제항목 */
  .h-content .wp50 {
    width: 100% !important;
  }

  /* 구분라인 */
  .theme--light.v-divider {
    /* 급여명세서 라인 */
  }
  .theme--light.v-divider.payline-bottom {
    display: none !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  hr {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }

  /* 타이틀 */
  .h-title h2 {
    height: 70px;
    line-height: 70px;
    font-size: 2em;
  }

  /* 신청서 리스트 버튼 */
  .h-list-btn {
    width: 3.5rem !important;
    height: 3.5rem !important;
    line-height: 3rem !important;
  }
  .h-list-btn i {
    font-size: 2.5rem !important;
    vertical-align: text-top;
  }

  /* 공통 카드 */
  .h-list-card {
    padding: 30px;
    /* 타임라인 박스 여백 */
    /* 출퇴근 확인 */
  }
  .h-list-card.timeline {
    margin: 0px !important;
    /* 타임라인 용도 배경라인 */
  }
  .h-list-card.timeline:before {
    content: "";
    position: absolute;
    top: 0;
    left: 45px;
    width: 2px;
    height: 100%;
    background: #e7ecf1;
    transform: rotate(-180deg);
  }
  .h-list-card.org {
    background: #FFFFFF;
    margin: 0 !important;
  }
  .h-list-card.tam {
    background: #FFFFFF;
  }
  .h-list-card.work {
    margin: 20px 20px 0 0 !important;
  }
  .h-list-card.commute {
    padding: 30px !important;
  }

  /* 여백 */
  .h-list-card-space {
    padding: 0 10px !important;
    margin: 20px 0 0 0 !important;
    /* 카드가 다단으로 배치될 경우 사용(ex-근무일정) */
  }
  .h-list-card-space.timeline {
    margin: 0px !important;
  }

  /* 여백 - 카드만 사용될 경우 */
  .h-list-card-only {
    margin: 20px -5px 0 -5px !important;
  }

  /* 검색 */
  .h-search.h-worktime-select {
    margin: 0 !important;
  }

  /* 서브 헤더박스 */
  .h-header {
    padding: 30px !important;
    /* 급여명세서 용도*/
  }
  .h-header.h-pay {
    border-radius: 10px;
    padding: 0 !important;
  }

  /* 서브 컨텐츠 박스 */
  .h-content {
    margin-top: 20px !important;
    padding: 30px 40px !important;
    /* 파일첨부 용도(하단에 버튼 또는 카드가 붙을 경우 사용) */
  }
  .h-content.top {
    margin-top: 0 !important;
  }
  .h-content.bottom {
    margin-top: 0 !important;
    padding: 0px 40px !important;
  }
  .h-content.content-bottom {
    padding: 30px 30px 0px 30px !important;
  }
  .h-content label {
    text-align: right;
    padding: 10px 0 0 0;
  }
  .h-content .h-input-line {
    padding: 0 !important;
  }
  .h-content .h-input-line.v-input .v-label {
    height: 35px !important;
    line-height: 35px !important;
  }
  .h-content .h-input-line.v-text-field input {
    padding: 0 !important;
    line-height: 35px !important;
  }
  .h-content .h-input-line.v-text-field .v-label {
    top: -15px !important;
  }
  .h-content .h-survey-box label {
    padding: 0 !important;
  }
  .h-content.org-part {
    background: transparent !important;
    padding: 0px !important;
  }

  /* 인사기본 */
  .theme--light.v-divider {
    /* 그라데이션bg 카드에 투명도 라인 사용할 경우 */
  }
  .theme--light.v-divider.content-line {
    border-color: rgba(255, 255, 255, 0.2) !important;
    display: inline-block;
    width: 10%;
    transform: rotate(90deg);
  }
  .theme--light.v-divider.orgline2 {
    display: block;
  }

  /* 모달팝업 하단버튼 */
  .v-dialog .h-button-positive1st.v-btn {
    border-radius: 0px !important;
    margin: 0 5px 0 0 !important;
  }
  .v-dialog .h-button-positive1st.v-btn:last-child {
    margin: 0 !important;
  }
  .v-dialog .h-button-positive2nd.v-btn {
    border-radius: 0px !important;
    margin: 0 5px 0 0 !important;
  }
  .v-dialog .h-button-positive2nd.v-btn:last-child {
    margin: 0 !important;
  }
  .v-dialog .h-button-negative1st.v-btn {
    border-radius: 0px !important;
    margin: 0 5px 0 0 !important;
  }
  .v-dialog .h-button-negative1st.v-btn:last-child {
    margin: 0 !important;
  }
  .v-dialog .v-card__title {
    display: block !important;
    padding: 20px !important;
  }
  .v-dialog .h-popup-header h1 {
    color: #454f63;
    font-size: 1.3rem;
    vertical-align: middle;
  }
  .v-dialog .h-popup-header h1 .h-popup-close-btn {
    float: right;
    background: none !important;
  }
  .v-dialog .h-popup-header h1 .h-popup-close-btn i.icon-close {
    color: #454f63;
    font-size: 3rem;
  }
  .v-dialog .h-popup-header h1 .h-popup-close-btn.v-btn {
    margin: -10px -5px 0 0 !important;
    min-width: auto !important;
    padding: 0 !important;
  }
  .v-dialog .v-card__text {
    padding: 30px !important;
  }
  .v-dialog .v-card__text.appr-line {
    padding: 30px 30px 0px 30px !important;
  }
  .v-dialog .v-card__text.h-popup-content {
    /* 급여명세서 프라이빗 버튼 선택*/
  }
  .v-dialog .v-card__text.h-popup-content ul.h-private-area li {
    width: 49.5%;
  }
  .v-dialog .v-card__text.h-popup-content ul.h-private-area li:last-child {
    width: 49.5%;
  }
  .v-dialog .v-card__actions {
    padding: 0 30px 30px 30px !important;
  }

  /* 신청서 전체선택, 선택결제 (결재내역, 승인내역 페이지) */
  .h-all-checkbox-area {
    padding: 20px 0 0 0;
  }
  .h-all-checkbox-area .h-all-select {
    margin: 10px 0 0 -20px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
  /* 신청서 전체선택, 선택결제 (결재내역, 승인내역 페이지) */
  .h-all-checkbox-area {
    padding: 20px 10px 0 0;
  }

  /* 서브 헤더박스 */
  .h-header {
    padding: 30px !important;
    /* 급여명세서 용도*/
  }
  .h-header.h-pay {
    border-radius: 10px;
    padding: 0 !important;
  }
}
@media screen and (min-width: 1200px) and (max-width: 9000px) {
  /* 공통 카드 */
  .h-list-card {
    padding: 30px;
    /* 타임라인 박스 여백 */
  }
  .h-list-card.timeline {
    margin: 0px !important;
    /* 타임라인 용도 배경라인 */
  }
  .h-list-card.timeline:before {
    content: "";
    position: absolute;
    top: 0;
    left: 45px;
    width: 2px;
    height: 100%;
    background: #e7ecf1;
    transform: rotate(-180deg);
  }
  .h-list-card.org {
    background: #FFFFFF;
    margin: 0 !important;
  }
  .h-list-card.tam {
    background: #FFFFFF;
  }

  /* 여백 */
  .h-list-card-space {
    padding: 0 10px !important;
    margin: 20px 0 0 0 !important;
    /* 카드가 다단으로 배치될 경우 사용 */
  }
  .h-list-card-space.timeline {
    margin: 0px !important;
  }

  /* 여백 - 카드만 사용될 경우 */
  .h-list-card-only {
    margin: 20px -5px 0 -5px !important;
  }

  .h-content {
    margin-top: 20px !important;
    padding: 30px 40px !important;
  }
  .h-content.top {
    margin-top: 0 !important;
  }
  .h-content.org-part {
    background: transparent !important;
    padding: 0px !important;
  }

  /* 인사기본 */
  .theme--light.v-divider {
    /* 그라데이션bg 카드에 투명도 라인 사용할 경우 */
  }
  .theme--light.v-divider.content-line {
    border-color: rgba(255, 255, 255, 0.2) !important;
    display: inline-block;
    width: 10%;
    transform: rotate(90deg);
  }
  .theme--light.v-divider.orgline2 {
    display: block;
  }

  /* 신청서 전체선택, 선택결제 (결재내역, 승인내역 페이지) */
  .h-all-checkbox-area {
    padding: 20px 10px 0 0;
  }
  .h-all-checkbox-area .h-all-select {
    margin: 10px 0 0 -20px;
  }

  /* 서브 헤더박스 */
  .h-header {
    padding: 30px !important;
    /* 급여명세서 용도*/
  }
  .h-header.h-pay {
    border-radius: 10px;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
  }
}
/* ==========================================================================
   hunel.jsp 설정 - 메인프레임
   ========================================================================== */
.h-wrap {
  border: 0px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
}
.h-wrap .h-v-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.h-wrap .h-main-frame {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 100% !important;
  height: 100% !important;
  padding: 0px;
  margin: 0px;
  text-align: center;
}
.h-wrap .h-common-loading {
  background: none;
  width: 100px;
  height: 100px;
  border: 0px;
  border-radius: 100px;
}
.h-wrap .h-iframe {
  border: 0px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   menu.jsp wrap(vuetify와 좌표충돌 방지를 위함)
   ========================================================================== */
.h-menu-wrap {
  position: relative;
}

/* ==========================================================================
        공통 - bootstrap.css 수정
   ========================================================================== */
.container-fluid {
  /* ios iframe 스크롤 예외로 인해 툴바 숨겨지지 않는 현상 대처 */
  margin-bottom: 100px !important;
}

/* ----------------------------------------------*/
/* boot chart */
.point-border {
  border-top: 5px solid #ebebeb;
}

.chart-wrap {
  position: relative;
  width: 85%;
  margin: auto;
}
.chart-wrap #chart01 {
  position: relative;
  z-index: 1;
}
.chart-wrap .chartSub {
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.chart-wrap .chartSub .chartSubTxt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.chart-wrap .chartSub .chartSubTxt span {
  font-size: 16px;
  color: #888;
}
.chart-wrap .chartSub .chartSubTxt p {
  font-size: 42px;
  color: #3d3d3d;
}

.chart-details .dot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 0 10px 25px !important;
  border-bottom: 1px solid #c7d1d8;
  font-size: 12px;
}
.chart-details .dot li {
  flex: 1;
  letter-spacing: -0.5px;
  text-align: center;
}
.chart-details .dot li:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  margin-right: 2px;
  position: relative;
  top: 1px;
}
.chart-details .dot li.d1:before {
  background: #7cd018;
}
.chart-details .dot li.d2:before {
  background: #ff6161;
}
.chart-details .dot li.d3:before {
  background: #8592c9;
}
.chart-details .dot li.d4:before {
  background: #404040;
}
.chart-details .txt {
  padding: 25px 0 0 15px;
}
.chart-details .txt p + p {
  margin-top: 5px;
}

/* 메인 차트 */
.main-bd {
  border-color: #ff4747;
}

.chart-content .progress {
  width: 150px;
  height: 150px;
  background: none;
  position: relative;
  top: -10px;
}
.chart-content .progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #cdced3;
  position: absolute;
  top: 0;
  left: 0;
}
.chart-content .progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.chart-content .progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 6px;
  border-style: solid;
  position: absolute;
  top: 0;
  transition: all 2s;
}
.chart-content .progress .progress-left {
  left: 0;
}
.chart-content .progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.chart-content .progress .progress-right {
  right: 0;
}
.chart-content .progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.chart-content .progress .progress-value {
  position: absolute;
  top: 0;
  left: 0;
}
.chart-content .progress .progress-value li {
  width: 55px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  padding: 2px 0;
}
.chart-content .progress .progress-value li + li {
  border-top: 1px solid #ddd;
}
.chart-content .progress .progress-value .total {
  color: #000;
}

.donut-chart-box {
  display: inline-block;
  width: 100%;
}
.donut-chart-box .chart-unit {
  width: 100%;
  clear: both;
  display: inline-block;
}
.donut-chart-box .chart-unit > div {
  width: 45%;
  float: left;
}
.donut-chart-box .chart-unit .chart-txt strong {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.3;
  color: #7680B5;
  margin-bottom: 10px;
  display: inline-block;
}
.donut-chart-box .chart-unit .chart-txt p {
  font-size: 16px;
  font-weight: bold;
}
.donut-chart-box .chart-unit + .chart-unit {
  padding-top: 40px;
  margin-top: 20px;
  border-top: 1px solid #ddd;
}

.ai-center {
  align-items: center;
}

.content-foot-btns {
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
}

/* 신청내역 */
.card-border-box h4.tit {
  font-size: 17px;
  font-weight: bold;
}
.card-border-box .inner {
  border: 1px solid #c7d1d8;
  padding: 10px;
}
.card-border-box .inner h5 {
  font-size: 14px;
  margin: 10px 0 0;
  font-weight: bold;
}
.card-border-box .inner p {
  font-size: 13px;
}
.card-border-box .inner + .inner {
  margin-top: 15px;
}

table.tbl01 {
  text-align: center;
}
table.tbl01 th {
  border-bottom: 1px solid #eae9e9;
  padding: 8px 5px;
  word-break: keep-all;
}
table.tbl01 th:not(:first-child) {
  text-align: right;
}
table.tbl01 td {
  text-align: right;
  padding: 8px 5px;
  border-bottom: 1px solid #eae9e9;
  color: #777;
}
table.tbl01 thead {
  background: #ffd5d5;
}
table.tbl01 tfoot {
  font-weight: bold;
}
table.tbl01 tfoot td, table.tbl01 tfoot th {
  border-bottom: none;
  color: #ff4747;
}

.application-wrap {
  min-height: 100%;
}