@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; */
/* 버튼 */
/* 변경, 삭제 */
/* 그라데이션 */
html { overflow: hidden; }

@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: "\e91f"; background: -webkit-linear-gradient(#394552, #394552); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

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

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

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

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

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

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

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

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

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

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

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

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

.icon-appl_end:before { content: "\e901"; }

.icon-back:before { content: "\e90b"; }

.icon-close:before { content: "\e90c"; }

.icon-down_arrow:before { content: "\e90d"; }

.icon-ellipsis:before { content: "\e90e"; }

.icon-infoedit:before { content: "\e90f"; }

.icon-left_arrow:before { content: "\e910"; }

.icon-logout:before { content: "\e912"; }

.icon-logo:before { content: "\e928"; }

.icon-select_arrow:before { content: "\e917"; }

.icon-menu:before { content: "\e913"; }

.icon-right_arrow:before { content: "\e91c"; }

.icon-search:before { content: "\e919"; }

.icon-up_arrow:before { content: "\e91e"; }

.icon-email:before { content: "\e904"; }

.icon-file:before { content: "\e906"; }

.icon-eval:before { content: "\e905"; }

.icon-info:before { content: "\e907"; }

.icon-list_arrow:before { content: "\e908"; }

.icon-goto_arrow:after { content: "\e908"; }

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

.icon-telephone:before { content: "\e90a"; }

.icon-move:before { content: "\e911"; }

.icon-private:before { content: "\e914"; }

.icon-return:before { content: "\e915"; }

.icon-work:before { content: "\e91a"; }

.icon-ok:before { content: "\e902"; }

.icon-school:before { content: "\e916"; }

.icon-award:before { content: "\e903"; }

.icon-add:before { content: "\e92a"; }

.icon-list:before { content: "\e927"; }

.icon-write:before { content: "\e91b"; }

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

.icon-calenda:before { content: "\e91d"; }

.icon-plus:before { content: "\e92b"; }

.icon-mobile:before { content: "\e930"; }

.icon-camera:before { content: "\e931"; }

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

.icon-delete:before { content: "\e933"; }

.icon-check:before { content: "\e934"; }

.icon-star:before { content: "\e935"; }

.icon-radio:before { content: "\e936"; }

.icon-radio_on:before { content: "\e937"; }

.icon-check_on:before { content: "\e938"; }

.icon-delete2:before { content: "\e934"; }

.icon-popup:before { content: "\e936"; }

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

.icon-refresh:before { content: "\e929"; }

.icon-cancel:before { content: "\e937"; }

@font-face { font-family: "menuicon"; src: url("/common/iconfont/menuicon.ttf?geb67o") format("truetype"), url("/common/iconfont/menuicon.woff?geb67o") format("woff"), url("/common/iconfont/menuicon.svg?geb67o#menuicon") format("svg"); font-weight: normal; font-style: normal; font-display: block; }
.menu-icon { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "menuicon" !important; speak: never; 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; }

.menu-icon10:before { content: ""; }

.menu-icon0:before { content: ""; }

.menu-icon1:before { content: ""; }

.menu-icon2:before { content: ""; }

.menu-icon3:before { content: ""; }

.menu-icon4:before { content: ""; }

.menu-icon5:before { content: ""; }

.menu-icon6:before { content: ""; }

.menu-icon7:before { content: ""; }

.menu-icon8:before { content: ""; }

.menu-icon9:before { content: ""; }

.home:before { content: ""; }

.menu-icon11: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: 140px; height: 50px; font-size: 2.4rem; color: #1d3782; background: url("/common/images/login/logo.png") center center no-repeat; background-size: auto 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: #009fe2; 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: 70px !important; color: #454f63 !important; background: #ffffff; }
header.shadow { box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.22); }
header.main hgroup h1.logo i { display: block; margin-top: 6px; font-size: 1.5rem; }
header hgroup { height: 100%; }
header hgroup h1.menu { height: 100%; }
header hgroup .menu-icon.home { display: flex; align-items: center; height: 100%; font-size: 23px; color: #050708; }
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; position: relative; width: 2rem; text-align: center; color: #050708; }
header nav .h-navbar-btn li i { font-size: 2.7rem; }
header nav .h-navbar-btn li .badge { position: absolute; right: -8px; top: 0; display: flex; width: 18px; height: 18px; color: #fff; font-family: Arial; text-align: center; align-items: center; justify-content: center; padding: 0rem !important; background: #009fe2; border-radius: 18px; 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; }
.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 { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2); }
.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: 55px; margin: 0 auto; border: 1px solid #cacaca; box-shadow: 0px 0px 0px 0px; }
.h-menu-icon-box .h-menu-module .h-menu-icons .h-menu-icon i { font-size: 2.5rem; }
.h-menu-icon-box .h-menu-module .h-menu-icons .h-menu-icon i::before { background: none; -webkit-text-fill-color: #39b4e9; }
.h-menu-icon-box .h-menu-module .h-menu-icons .h-menu-icon i.menu-icon2 { font-size: 2.3rem; }
.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: #333333; font-size: 1rem; margin: 10px 0 20px 0; font-weight: 600; }

/* sub menu */
.h-menu-app { font-size: 0; }
.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: #b5b5b5; 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; 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: #a5ce4e; background: white; border: 3px solid #a5ce4e; }
ul.h-menu-apply-box li.appr { color: #009fe3; background: white; border: 3px solid #009fe3; }
ul.h-menu-apply-box li.comp { color: #f87d1a; background: white; border: 3px solid #f87d1a; }
ul.h-menu-apply-box li.comp i { font-size: 3.5rem; 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: 1.5rem; font-family: Arial; font-weight: 600; padding: 5px 0 0 0; margin: 0 auto; }
ul.h-menu-apply-box li .h-end { height: 2.7rem; margin: 0 0 0 2px; }
ul.h-menu-apply-box li .icon-ellipsis { width: auto !important; padding-left: 8px; padding-right: 8px; transform: none; }
ul.h-menu-apply-box li:nth-child(even) { width: auto !important; color: #bababa; font-size: 1.4rem; text-align: center; padding: 15px 0 0 0; }

.icon-apply { flex: 0 0 auto !important; width: 3.6rem; height: 3.6rem; }

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

dl.h-menu-apply-cnt dt { display: block; color: #444; font-size: 16px; font-weight: bold; text-align: center; }

dl.h-menu-apply-cnt.other dd { color: #f87d1a; }
dl.h-menu-apply-cnt dd { display: block; color: #009fe2; margin-top: 8px; font-size: 25px; font-family: Arial; font-weight: 600; text-align: right; text-align: center; }

/* 연차정보 */
.h-main-bln-cnt { color: #009fe2; font-size: 20px; font-family: Arial; color: #f87d1a; }

.h-main-gen-cnt { color: #7cb600; font-size: 20px; }

.h-main-las-cnt { color: #009fe3; font-size: 20px; }

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

/* 공지사항 */
ul.h-main-notice li, ul.h-main-notice .h-notice-list-item, .h-notice-list li, .h-notice-list .h-notice-list-item { border-top: 1px solid #eaeaea; padding: 7px 0px; }
ul.h-main-notice li.h-notice-list-item, ul.h-main-notice .h-notice-list-item.h-notice-list-item, .h-notice-list li.h-notice-list-item, .h-notice-list .h-notice-list-item.h-notice-list-item { display: block; padding: 20px 40px 20px 20px; }
ul.h-main-notice li.h-notice-list-item .h-notice-list-wrap, ul.h-main-notice .h-notice-list-item.h-notice-list-item .h-notice-list-wrap, .h-notice-list li.h-notice-list-item .h-notice-list-wrap, .h-notice-list .h-notice-list-item.h-notice-list-item .h-notice-list-wrap { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 6px; }
ul.h-main-notice li.h-notice-list-item .notice-title, ul.h-main-notice .h-notice-list-item.h-notice-list-item .notice-title, .h-notice-list li.h-notice-list-item .notice-title, .h-notice-list .h-notice-list-item.h-notice-list-item .notice-title { font-weight: bold; color: #454f63; font-size: 1.15rem; }
ul.h-main-notice li.h-notice-list-item .icon-file, ul.h-main-notice .h-notice-list-item.h-notice-list-item .icon-file, .h-notice-list li.h-notice-list-item .icon-file, .h-notice-list .h-notice-list-item.h-notice-list-item .icon-file { position: absolute; top: 50%; right: 20px; 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; transform: translateY(-50%); }
ul.h-main-notice li.h-notice-list-item .icon-tam-commute, ul.h-main-notice .h-notice-list-item.h-notice-list-item .icon-tam-commute, .h-notice-list li.h-notice-list-item .icon-tam-commute, .h-notice-list .h-notice-list-item.h-notice-list-item .icon-tam-commute { font-size: 13px; }
ul.h-main-notice li.type-green .notice-type, ul.h-main-notice .h-notice-list-item.type-green .notice-type, .h-notice-list li.type-green .notice-type, .h-notice-list .h-notice-list-item.type-green .notice-type { background-color: #f5ffdf; border-color: #def5ad; color: #83ba0e; }
ul.h-main-notice li.type-blue .notice-type, ul.h-main-notice .h-notice-list-item.type-blue .notice-type, .h-notice-list li.type-blue .notice-type, .h-notice-list .h-notice-list-item.type-blue .notice-type { background-color: #e0f5ff; border-color: #c2ebff; color: #019ee3; }
ul.h-main-notice li .notice-type, ul.h-main-notice .h-notice-list-item .notice-type, .h-notice-list li .notice-type, .h-notice-list .h-notice-list-item .notice-type { flex: 0 0 70px; width: 70px; border: 1px solid #e5e5e5; border-radius: 25px; text-align: center; }
ul.h-main-notice li .notice-title, ul.h-main-notice .h-notice-list-item .notice-title, .h-notice-list li .notice-title, .h-notice-list .h-notice-list-item .notice-title { overflow: hidden; flex: 1 1 auto; width: auto; margin-left: 6px; margin-right: 6px; white-space: nowrap; text-overflow: ellipsis; }
ul.h-main-notice li .h-main-noti-new, ul.h-main-notice .h-notice-list-item .h-main-noti-new, .h-notice-list li .h-main-noti-new, .h-notice-list .h-notice-list-item .h-main-noti-new { flex: 0 0 20px; display: inline-block; width: 20px; height: 20px; color: #fff; text-align: center; border-radius: 20px; background: #009fe2; line-height: 20px; vertical-align: baseline; font-size: 12px; }
ul.h-main-notice li .h-main-noti-txt, ul.h-main-notice .h-notice-list-item .h-main-noti-txt, .h-notice-list li .h-main-noti-txt, .h-notice-list .h-notice-list-item .h-main-noti-txt { color: #646464; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.h-main-notice li a, ul.h-main-notice .h-notice-list-item a, .h-notice-list li a, .h-notice-list .h-notice-list-item a { display: flex; align-items: center; justify-content: flex-start; }
ul.h-main-notice li i, ul.h-main-notice .h-notice-list-item i, .h-notice-list li i, .h-notice-list .h-notice-list-item i { color: #d5d5d5; font-size: 1.5rem; vertical-align: middle; }
ul.h-main-notice li:first-child, .h-notice-list li:first-child { border-top: 0; }

.h-main-card-title { display: flex; align-items: center; margin-bottom: 6px; font-size: 18px; font-weight: bold; }
.h-main-card-title i { margin-left: auto; font-size: 30px; color: #d5d5d5; }

.h-main-notice-wrap { height: 100%; }
.h-main-notice-wrap.hide .h-main-notice { display: none; }
.h-main-notice-wrap.hide .h-card-title { margin-bottom: 0; }

/* 팀정보 */
.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: 10px; height: 10px; border-radius: 6px; border: 1px 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: #fb9c80; 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: 99; width: 100%; height: 100vh; display: none; }

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

/* 미디어쿼리 */
@media screen and (min-width: 320px) and (max-width: 374px) { #navbar { flex-wrap: nowrap; }
  #navbar > hgroup { max-width: 90px; }
  #navbar > hgroup img { max-width: 100%; }
  #navbar .support-call span { display: none !important; }
  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: auto !important; color: #bababa; font-size: 1.4rem; text-align: center; padding: 15px 0 0 0; margin-left: -2px; }
  ul.h-menu-apply-box li:nth-child(even) .icon-ellipsis { padding-left: 0; padding-right: 0; transform: rotate(90deg); } }
@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 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; }
  .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: auto !important; color: #bababa; font-size: 1.4rem; text-align: center; padding: 15px 0 0 0; margin-left: -2px; }
  ul.h-menu-apply-box li:nth-child(even) .icon-ellipsis { padding-left: 0; padding-right: 0; transform: rotate(90deg); } }
@media screen and (min-width: 1024px) and (max-width: 9000px) { 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; }
  .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: auto !important; color: #bababa; font-size: 1.4rem; text-align: center; padding: 15px 0 0 0; } }
#navbar nav { flex: 1 1 auto; }
#navbar .h-navbar-btn { display: flex; align-items: center; justify-content: space-between; padding-left: 20px !important; }
#navbar .support-connection { width: auto; font-weight: bold; color: #050708; }
#navbar .support-connection button { line-height: 1; }
#navbar .support-call { width: auto; color: #050708; }
#navbar .support-call span { display: block; font-size: 12px; }
@media screen and (max-width: 424px) { #navbar { flex-wrap: nowrap; }
  #navbar .support-call span { display: none; } }

@media screen and (max-width: 320px) { .h-main-photo-list.h-main-team-work .h-menu-photo-wrap { flex-wrap: wrap; }
  .h-main-photo-list.h-main-team-work .h-menu-photo-wrap .photo-name { width: calc(100% - 62px); }
  .h-main-photo-list.h-main-team-work .h-menu-photo-wrap .normal-work { margin-left: auto; } }
.h-main-photo-list .h-menu-photo-wrap { display: flex; align-items: center; justify-content: flex-start; padding-top: 8px; padding-bottom: 8px; font-size: 15px; font-weight: bold; }
.h-main-photo-list .photo { position: relative; }
.h-main-photo-list .photo img { width: 48px; height: 48px; border-radius: 48px; border: 1px solid #d0d0d0; object-fit: cover; }
.h-main-photo-list .photo .team-state.on { position: absolute; right: 2px; top: -2px; width: 10px; height: 10px; border-radius: 10px; border: 2px solid #fff; background-color: #009fe2; }
.h-main-photo-list .photo-name { margin-left: 14px; margin-right: auto; }
.h-main-photo-list .normal-work, .h-main-photo-list .overtime-work { position: relative; padding-left: 16px; }
.h-main-photo-list .normal-work::before, .h-main-photo-list .overtime-work::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 10px; background-color: #ff2a2a; }
.h-main-photo-list .normal-work { margin-right: 10px; }
.h-main-photo-list .normal-work::before { background-color: #a5ce4e; }
.h-main-photo-list li + li { border-top: 1px solid #eeeeee; }

/* .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;
} */
.work-circle-box { display: flex; justify-content: center; align-items: center; }
.work-circle-box .work-circle { position: relative; margin-left: 14px; margin-right: 14px; padding-left: 8px; font-size: 16px; }
.work-circle-box .work-circle::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 4px; transform: translate(0, -50%); background: currentColor; }
.work-circle-box .work-circle.used { color: #f87d1a; }
.work-circle-box .work-circle.apply { color: #7cb600; }
.work-circle-box .work-circle.residual { color: #009fe3; }

.work-progress-bar { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 6px; border-radius: 6px; background-color: #f2f2f2; }
.work-progress-bar span { display: block; position: relative; height: 100%; }
.work-progress-bar span.used { background-color: #fa994b; }
.work-progress-bar span.used::after { content: ""; position: absolute; right: -1px; top: -1px; width: 8px; height: 8px; border-radius: 8px; background-color: #f87d1a; z-index: 2; }
.work-progress-bar span.apply { background-color: #9fe900; }
.work-progress-bar span.apply::after { content: ""; position: absolute; right: -1px; top: -1px; width: 8px; height: 8px; border-radius: 8px; background-color: #7cb600; z-index: 2; }
.work-progress-bar span.residual { background-color: #17baff; }
.work-progress-bar span.residual::after { content: ""; position: absolute; right: -1px; top: -1px; width: 8px; height: 8px; border-radius: 8px; background-color: #009fe3; z-index: 2; }
.work-progress-bar span:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.work-progress-bar span:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.work-progress-bar span:last-child::after { display: none; }

/* ========================================================================== 신청서 ========================================================================== */
/* 신청서 신규추가 버튼 */
.h-apply-add-btn { color: #ffffff; font-size: 1.5rem; text-align: center; padding: 30px 0; background: #009fe2 !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: #e5f7ff; border: 1px solid #009fe2; color: #868daa; 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 #ecf8f8; }
.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: #ecf8f8 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: #009fe2; 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: #009fe2 !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: #e5f7ff; border: 1px solid #009fe2; 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: block; width: 100%; 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: 100%; padding-left: 13px !important; font-size: 1.1rem; font-weight: 600; text-align: left; word-break: break-all; }
dl.h-detail-info dd + dt, p.h-detail-info dd + dt, ul.h-detail-info dd + dt, div.h-detail-info dd + dt { margin-top: 10px !important; }
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: 100% !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: 100% !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; }
.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: #009fe2; 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-notice-text { margin-top: 8px; margin-bottom: 10px; font-size: 0.95rem; font-weight: 600; line-height: 1.1rem; color: #454f63; }

.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: #009fe2 !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.info-edit dd { color: #303030; }
.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: #009fe2; 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: #009fe2; 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: #009fe2; }
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: #009fe2 !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 #47beb2; background: #ecf8f8; 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: #ffffff; font-size: 1.2rem; background: #009fe2 !important; border: 0px !important; /* dd {color:$basic1stColor;} */ }

/* ========================================================================== 급여명세서 ========================================================================== */
.h-pay-total { position: relative; }
.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.2rem; }
.h-pay-items dt { flex: 0 0 auto; color: #868daa; font-size: 1.3rem; }
.h-pay-items dd { flex: 1 1 auto; 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; }
@media screen and (min-width: 426px) { .h-pay-list li .h-pay-items { margin-bottom: 20px !important; padding-bottom: 10px; }
  .single .h-pay-items { padding-top: 10px !important; padding-bottom: 10px !important; }
  .single .h-pay-items dt { padding-left: 10px !important; }
  .single .h-pay-items dd { padding-right: 10px !important; } }
.h-pay-list li .h-pay-items dt { color: #454f63 !important; font-size: 1.2rem; }
.h-pay-list li .h-pay-items dd { flex: 1; }
.h-pay-list li:first-child { color: #868daa !important; font-size: 1.3rem; 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: #50587d; }
.h-survey-state.survey-ing { background: #009fe2; }
.h-survey-state.survey-end { background: #009fe2; }

.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: #009fe2; }
.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: #009fe2; }
.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; border-radius: 3px; box-sizing: border-box; align-items: center; vertical-align: middle; /* 휴일 */ }
.h-work-system-box.work-type00 { border-left: 5px solid #bfcad7; }
.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 .h-work-system-list { margin: 0 0 0 20px !important; }
.h-work-system-box .h-work-system-list li { line-height: 1.3rem; margin: 0 !important; }
.h-work-system-box .h-work-system-list li:nth-child(1) { font-size: 1.1rem; }
.h-work-system-box .h-work-system-list li:nth-child(2) { font-size: 0.9rem; }
.h-work-system-box .h-work-date { width: 30px; color: #8597a5; font-weight: 600; font-size: 2rem; }
.h-work-system-box .h-work-event { display: inline-block; color: #009fe2; font-size: 0.85rem; font-weight: 500; border: 1px solid #009fe2; border-radius: 3px; text-align: center; padding: 3px 5px 1px 5px; }

.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 #009fe2; 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: #009fe2 !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: #009fe2; }

/* ========================================================================== 미디어쿼리 ========================================================================== */
@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: #009fe2; }
  /* 화상조직도 */
  .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 10px !important; }
  /* 타임라인(상단여백) */
  .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: #009fe2; }
  /* 화상조직도 */
  .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-apply-history-note { display: flex !important; }
.h-apply-history-note .h-appr-line-status-icon { flex: 0 0 30px; }
.h-apply-history-note .h-appr-line-status-txt { display: flex !important; flex: 1 1 auto; flex-wrap: wrap; }
.h-apply-history-note .h-appr-line-status-txt .h-apply-history-info { width: auto !important; flex: 1 1 auto; margin: 0 auto; text-align: center; }
.h-apply-history-note .h-apply-history-comment { width: 100%; }

dl.h-detail-info.short { display: flex; flex-wrap: wrap; line-height: 24px; }
dl.h-detail-info.short dt { flex: 0 0 35%; width: auto !important; }
dl.h-detail-info.short dd { flex: 1 1 65%; width: auto !important; }
dl.h-detail-info.short dd + dt { margin-top: 0 !important; }

html { height: 100% !important; }

body { margin: 0px; padding: 0px; opacity: 0; background: #e7ecf1 !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.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: #009fe2; }
.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 !important; padding: 0px !important; }

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

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 텍스트입력시 렌더링버그수정*/ }

.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 */
.pt50 { padding-top: 50px !important; }

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

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

.plr16 { padding: 0 16px; }

/* margin */
.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; }

/* 화상조직도(조직) 여백에 사용 */
/* 폰트강조 */
.bold-txt { color: #009fe2; 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; }

/* ========================================================================== 공통 ========================================================================== */
/* 박스 쉐도우 */
.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; transform: rotate(90deg); }
.h-list-card i.icon-list_arrow { color: #4f5983; font-size: 1.5rem; margin: 20px 0 0 0; }
.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: #009fe2 !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: #009fe2; transform: rotate(-180deg); }
.h-list-card.timeline .time-icon-bg i.icon-tam-commute:before { background: -webkit-linear-gradient(#009fe2, #009fe2); -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: #009fe2; 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 { background: #e7ecf1; /* 근무제 카드 리스트 */ }
.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: #009fe2; }

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

/* 여백 - 카드만 사용될 경우 */
.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; }
.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; vertical-align: middle; background: #ffffff; /* 헤더에 검색창만 있을 경우 */ /* 헤더의 하단에 여백을 없애야 할 경우 */ /* 급여명세서 용도*/ }
.h-header.gradient { background: #009fe2; }
.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: #009fe2; 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.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: 30px; 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: #009fe2; }

/* 도움말 */
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: #009fe2; 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; border-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: 0px; left: 0px; width: 102px; height: 102px; line-height: 102px; text-align: center; vertical-align: middle; align-items: center; justify-content: center; background: #fff; border-radius: 102px; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); z-index: 10000; }

/* ========================================================================== 공통 - 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 .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 3px 1px -10px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.14), 0 5px 5px 0 rgba(0, 0, 0, 0.1) !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; }

/* 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: #50587d !important; }
.h-input.v-text-field--outline > .v-input__control > .v-input__slot { min-height: 45px !important; }
.h-input.v-text-field.v-text-field--enclosed .v-input__append-inner { margin-top: 5px !important; }
.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 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: #50587d; }
.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 0 0 !important; }
.theme--light.v-divider.payline-bottom { float: left; width: 100%; margin: 0 !important; }

/* 결재선 변경 - input 클릭 시 하단 컬러 변경 */
.h-input-line.primary--text { color: #009fe2 !important; caret-color: #009fe2 !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: #48bdb3; 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: #009fe3; 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: #50587d; 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: #009fe2 !important; }
.btn-add-search span { color: #009fe2; }
.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 감춰지지 않는 현상을 위함*/
/* ========================================================================== 공통 - 미디어쿼리  ========================================================================== */
@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: static; left: 0px; top: 0px; z-index: 100; width: 100% !important; height: 100% !important; padding: 0px; margin: 0px; text-align: center; }
.h-wrap .h-common-loading { background: #ffffff; 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 스크롤 예외로 인해 툴바 숨겨지지 않는 현상 대처 */ }

/* ----------------------------------------------*/
.h-wrap { overflow: hidden; }

.v-tabs__slider { background-color: #009fe2 !important; }

.menu-opened { overflow: hidden; }
.menu-opened .h-menu-wrap, .menu-opened #divMenuVapp, .menu-opened .h-main-wrap { height: 100%; }
.menu-opened .h-main-wrap { overflow: auto; z-index: 100; }

:root .primary--text { color: #009fe2 !important; caret-color: #009fe2 !important; }

.about-color { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-top: 10px; margin-bottom: 10px; padding: 10px; background-color: #f3f3f3; }
.about-color span { flex: 0 0 30%; display: block; position: relative; padding-left: 22px; padding-right: 6px; padding-top: 6px; white-space: nowrap; }
.about-color span::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; }
.about-color span.day::before { background-color: #00ff00; }
.fixed-col .day { background-color: #00ff00; }
.about-color span.night::before { background-color: #ffff00; }
.fixed-col .night { background-color: #ffff00; }
.about-color span.overtime::before { background-color: #fa2727; }
.fixed-col .overtime { background-color: #fa2727; }
.about-color span.overtime.ing::before { background-color: #f7c1b2; }
.fixed-col .overtime.ing { background-color: #f7c1b2; }
.about-color span.education::before { background-color: #c2e7e8; }
.fixed-col .education { background-color: #c2e7e8; }
.about-color span.vacation::before { background-color: #1654e1; }
.fixed-col .vacation { background-color: #1654e1; }
.about-color span.vacation.ing::before { background-color: #7a95e5; }
.fixed-col .vacation.ing { background-color: #7a95e5; }

.table.fixed-col { overflow: auto; max-height: 241px; border-left: 1px solid #c7d1d8; border-right: 1px solid #c7d1d8; border-top: 1px solid #c7d1d8; border-bottom: 1px solid #c7d1d8; }
.table.fixed-col table { min-width: 100%; table-layout: fixed; }
.table.fixed-col tbody tr:nth-child(1) th:first-child { color: transparent; }
.table.fixed-col tbody tr:nth-child(1) th, .table.fixed-col tbody tr:nth-child(1) td { position: sticky; top: 0px; z-index: 2; }
.table.fixed-col tbody tr:nth-child(2) th, .table.fixed-col tbody tr:nth-child(2) td { position: sticky; top: 20px; z-index: 2; }
.table.fixed-col tbody tr:nth-child(3) th, .table.fixed-col tbody tr:nth-child(3) td { position: sticky; top: 40px; z-index: 2; }
.table.fixed-col tbody tr:nth-child(4) th, .table.fixed-col tbody tr:nth-child(4) td { position: sticky; top: 60px; z-index: 2; }
.table.fixed-col tbody tr:last-child th span, .table.fixed-col tbody tr:last-child td span { border-bottom: none; }
.table.fixed-col tbody tr th.strongBorder span, .table.fixed-col tbody tr td.strongBorder span { border-right: 1px solid #888; }
.table.fixed-col tbody tr th:last-child, .table.fixed-col tbody tr td:last-child { border-right: none; }
.table.fixed-col tbody tr th span, .table.fixed-col tbody tr td span { display: block; width: 100%; height: 20px; border-right: 1px solid #c7d1d8; border-bottom: 1px solid #c7d1d8; }
.table.fixed-col th, .table.fixed-col td { padding: 0; border: none; text-align: center; white-space: nowrap; word-break: break-all; font-size: 13px; }
.table.fixed-col th { position: sticky; width: 60px; height: 20px; background-color: #f3f3f3; }
.table.fixed-col td { width: 14px; }
.table.fixed-col .sat { color: #1d4ada; }
.table.fixed-col .sun { color: #f11919; }

.table-week-navigation { display: flex; align-items: center; justify-content: center; margin-top: 20px; margin-bottom: 20px; }
.table-week-navigation .button { display: block; width: 100px; font-size: 16px; }
.table-week-prev { margin-right: 10px; padding-left: 20px; background: url(/common/images/sub/table_week_prev.png) no-repeat left center; }
.table-week-next { margin-left: 10px; padding-right: 20px; background: url(/common/images/sub/table_week_next.png) no-repeat right center; }

.select-day-title { height: 24px; margin-top: 10px !important; margin-bottom: 4px !important; font-size: 16px; }
.select-day-title + .row [class*="col"] { padding-left: 5px; padding-right: 5px; }
.select-day-title + .row [class*="col"] + [class*="col"] { margin-top: 10px; }
.select-day-title + .row [class*="col"] .h-combo i { margin-top: 10px; font-size: 20px; }
.select-day-title + .row [class*="col"] .v-btn { height: 40px; }

.modal-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); }

.gray-box { padding: 10px; background-color: #f3f3f3; }
.gray-box.type2 { padding: 20px; }
.gray-box dl { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; font-size: 15px; line-height: 22px; }
.gray-box dl + dl { margin-top: 8px !important; }
.gray-box dl a { color: inherit !important; }
.gray-box dt { flex: 0 0 80px; font-size: 16px; font-weight: bold; line-height: 24px; }
.gray-box dt:nth-of-type(2n) { margin-top: 10px !important; }
.gray-box dd { flex: 1 1 auto; width: calc(100% - 80px); line-height: 22px; }
.gray-box dd:nth-of-type(2n) { margin-top: 10px !important; }
.gray-box dd ul { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; }
.gray-box dd ul li[class] { padding-left: 20px; }
.gray-box dd ul li.email { background: url(/common/images/icon_email.png) no-repeat left center; }
.gray-box dd ul li.telephone { background: url(/common/images/icon_tel.png) no-repeat left center; }

.file-added-title { position: relative; padding-top: 10px; padding-bottom: 10px; padding-left: 40px; font-size: 14px; line-height: 30px; font-weight: 500; }
.file-added-title::before { content: ""; position: absolute; left: 0; top: 10px; width: 30px; height: 30px; border-radius: 30px; border: 1px solid #dfe6ed; background: url(/common/images/sub/icon_file.png) no-repeat center; }
.file-added-title span { color: #009fe2; }
.file-added-list { margin-bottom: 14px; padding: 10px; border: 1px solid #009fe2; background-color: #e5f7ff; }
.file-added-item { position: relative; padding-left: 4px; padding-right: 18px; line-height: 24px; }
.file-added-item::before { content: ""; position: absolute; left: 0; top: 10px; width: 2px; height: 2px; border-radius: 2px; background-color: black; }
.file-added-item .icon-close { position: absolute; right: 0; top: 2px; font-size: 16px; color: black; }

.error-page { display: flex; align-items: center; justify-content: center; width: 100%; height: -wekbit-fill-available; height: 100%; text-align: center; background-color: #fff; }
.error-page a { display: inline-block; margin-top: 40px; padding: 0 10px; text-decoration: none; color: white !important; background-color: #009fe2; }
.error-title { font-size: 30px; font-weight: bold; color: #009fe2; }
.error-title span { position: relative; display: block; margin-top: 20px; margin-bottom: 40px; }
.error-title span::after { content: ""; position: absolute; left: calc(50% - 20px); bottom: -19px; width: 40px; height: 1px; background-color: #009fe2; }
.error-text { font-size: 18px; line-height: 26px; }

.medical-icon { display: inline-block; width: 20px; height: 20px; margin-left: 4px; vertical-align: top; background: url(/common/images/sub/icon_info.png) no-repeat 0 0; }
.medical-info { padding: 20px; border: 1px solid #009fe2; background-color: #e5f7ff; font-size: 15px; line-height: 22px; color: #444; }
.medical-text { margin-top: 10px; }
.medical-text.bold { font-weight: bold; }
.medical-list { position: relative; padding-left: 10px; }
.medical-list::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 1px; background-color: currentColor; }

.added-type .icon-search.h-button-positive2nd { margin-left: 6px !important; height: 30px !important; border-radius: 14px !important; }
.added-type .h-input.theme--light.v-text-field--outline > .v-input__control > .v-input__slot { padding: 0; background: none !important; border: none !important; }
.added-type .h-input.theme--light.v-input:not(.v-input--is-disabled) input { margin-top: 6px !important; }
.added-type .added-type-remove-button { max-width: 45px; max-height: 25px; margin: 10px 0 0; background-color: #76a8d3; border-radius: 6px; color: #fff; }

.annual-list { margin-top: 10px; border-top: 1px solid #c7d1d8; }
.annual-list > .col-6 { padding: 5px 10px; font-size: 16px; line-height: 22px; color: #444444; border-bottom: 1px solid #c7d1d8; }
.annual-list > .col-6:nth-child(even) { border-left: 1px solid #c7d1d8; }
.annual-text { padding-left: 0; padding-right: 0; font-size: 16px; line-height: 22px; color: #444444; }
.annual-box { margin-top: 10px; padding: 20px; border: 1px solid #66c5ee; background-color: #e5f7ff; font-size: 16px; line-height: 22px; }
.annual-row [class*="col-"] + .h-sub-title { margin-top: 20px !important; }

.direct-link { height: 100%; }
.direct-link a { position: relative; display: inline-block; max-width: 100%; padding-left: 6px; padding-right: 6px; font-size: 15px; font-weight: bold; vertical-align: top; }
.direct-link a::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 2px; border-radius: 2px; background: currentColor; }

.install-page { overflow-x: hidden; overflow-y: auto; display: flex; align-items: flex-start; align-content: flex-start; justify-content: flex-start; flex-direction: column; height: 100%; padding: 20px 20px 50px; }
.install-page h1 { position: relative; width: 100%; margin-top: 50px !important; margin-bottom: 60px !important; color: #009fe2; font-size: 32px; font-weight: bold; text-align: center; }
.install-page h1::after { content: ""; position: absolute; left: 50%; bottom: -19px; width: 30px; height: 1px; transform: translateX(-50%); background: #009fe2; }
.install-page p { width: 100%; margin: 0 auto 50px !important; text-align: center; font-size: 20px; line-height: 32px; }
.install-page .donwload-button { display: block; width: 90%; height: 60px; margin: 0 auto; text-align: center; font-weight: bold; font-size: 20px; line-height: 60px; border-radius: 20px; background: #303030; color: white !important; }
.install-page .donwload-button + .donwload-button { margin-top: 20px; margin-bottom: auto; }
.install-page .download-help { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin-top: 30px; }
.install-page .download-help a { display: block; flex: 0 0 auto; font-size: 18px; color: #009fe2 !important; text-decoration: underline; }

.h-point { color: #faa006; font-size: 14px; line-height: 1; vertical-align: baseline; display: inline; }
.h-point::before { content: "*"; }

.view-picture { display: block; width: 205px; height: 242px; margin: 30px auto; object-fit: cover; }
.view-picture-button { width: 140px; height: 40px; margin: 20px auto 10px; background-color: white; color: #009fe3; border-radius: 40px; font-size: 16px; }
.view-picture-info { text-align: center; }
.view-picture-org { font-size: 18px; color: #727171; }
.view-picture-name { margin-top: 20px !important; color: #6d6d6d; font-size: 16px; line-height: 1; }
.view-picture-name span { display: block; margin-bottom: 6px; font-size: 28px; font-weight: bold; color: #333; }
.view-picture-text { margin-top: 60px !important; color: #009fe3; font-size: 20px; line-height: 26px; font-weight: bold; }
.view-picture-text span { display: block; font-weight: normal; font-size: 15px; }

.height-full { height: 100%; }

@media screen and (max-width: 767px) { .border-top { border-top: none !important; }
  .border-right { border-right: none !important; }
  .border-bottom { border-bottom: none !important; }
  .one-line .h-pay-list .h-pay-items { flex-wrap: wrap; }
  .one-line .h-pay-list .h-pay-items dt { flex: 1 1 100%; font-weight: bold; }
  .one-line .h-pay-list .h-pay-items dd { flex: 1 1 100%; text-align: left; padding-bottom: 15px !important; } }
.h-textarea.theme--light.v-text-field--outline.v-input--is-readonly > .v-input__control > .v-input__slot { background: #f3f8fc !important; }
.h-textarea.theme--light.v-text-field--outline.v-input--is-readonly > .v-input__control > .v-input__slot textarea { resize: none; }

.d-flex.file-type .flex-fill { flex: 1 1 0% !important; }
.d-flex.file-type .flex-fill[class*="h-button"], .d-flex.file-type .flex-fill [class*="h-button"] { padding: 0 !important; border-radius: 3px !important; }
.d-flex.file-type .flex-fill + [class*="h-button"] { margin-left: 10px !important; }