@charset "utf-8";

.w100{width:100%}

.floatR {float:right;}
.floatL {float:left;}

.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt20{margin-top:20px !important}
.mt30{margin-top:30px !important}
.mt80{margin-top:80px !important}
.mr10{margin-right:10px !important;}
.mr20{margin-right:20px !important}
.mb5{margin-bottom:5px !important}
.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important;}
.ml20{margin-left:20px !important}
.ml30{margin-left:30px !important}
.txtCenter{text-align:center !important}

/* text_color */
.colorBlue{color:#039ddf}
.colorGray{color:#94a5b3}
.colorPink{color:#e61874}
.fwBold{font-weight:700}
.ok{background-color:#09426d}
.bgColor02{background-color:#ffccdd;}

/* button */
.btns{height:28px;margin-left:5px;padding:0 12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#fff;font-size:12px}
.btns:before{content:"";display:inline-block;position:relative;width:12px;height:12px;margin-right:6px;background:url(/resources/img/icon/icon_sp_btn.png) no-repeat}
.noImgBtns{height:28px;margin-left:5px;padding:0 12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#fff;font-size:12px}
.btnCenter{margin-top:30px;text-align:center}
.btn{height:50px;padding:0 13px;border-radius:3px;color:#fff;font-size:18px;font-weight:700}
.btn2{height:25px;padding:0 10px;border-radius:3px;color:#fff;font-size:10px;font-weight:700}
.spIcon:before{content:"";display:inline-block;position:relative;top:0;width:18px;height:18px;background:url(/resources/img/icon/mobile/icon_sp_btn.png) no-repeat;background-size:100%}
.btnRound{display:inline-block;width:172px;height:44px;line-height:42px;padding:0 13px;border-radius:22px;color:#fff}
.btnBdRound{display:inline-block;width:172px;height:44px;line-height:42px;padding:0 13px;border:1px solid #a9bdcc;border-radius:22px;background-color:#fff}
.btnBd{border:1px solid #dfdfdf;border-radius:3px}
.bgBlue{border:1px solid #09426d;background-color:#09426d}
.bgSkyBlue {border:1px solid #039ddf;background-color:#039ddf;}
.bgSkyBlue.add:before {top:1px;background-position:-50px -250px}
.bgGray{border:1px solid #94a5b3;background-color:#94a5b3}
.bdPink{border:1px solid #e61874;color:#e61874}
.bdGray{border:1px solid #a9bdcc;background-color:#fff;color:#7f8e99}
i{display:inline-block;position:relative;top:-1px;height:27px;margin-right:9px;padding:0 11px;color:#fff;border-radius:14px;box-sizing:border-box;font-style:normal}
i.bgBlue{border:1px solid #039ddf;background-color:#039ddf}
.moreView:before{background-position:0 -50px}
.btnCancel{position:absolute;top:11px;right:45px;width:auto;height:28px;line-height:26px;padding:0 12px;background-color:#f59e1b}
.btnCancel:before{background-position:0 6px}
.moreView{width:130px}
.moreView:before{top:3px;margin-right:6px}
.prev{width:28px;height:28px;margin:-5px 10px 0 0;border:1px solid #a9bdcc;border-radius:50%;font-size:0;text-indent:-9999em}
.prev:before{background-position:3px -100px}
.reject{margin-right:6px;border:1px solid #e61874;color:#e61874}
.reject:before{top:1px;margin-right:8px;background-position:0 -150px}

.ok:before{top:1px;margin-right:9px;background-position:0 -200px}
.search{height:48px;padding:0 14px;border-radius:3px;font-size:0;text-indent:-9999em}
.search:before{background-position:0 -255px}
.del-sm:before{top:0px;margin:0}
.del:before{top:1px;width:11px;background-position:0 -300px;}


/* form */
.formRadio input[type="radio"],
.formChk input[type="checkbox"]{overflow:hidden;position:absolute;padding:0 !important;margin:-1px;width:1px !important;height:1px;clip:rect(0,0,0,0);border:0}
.formRadio label:before,
.formChk label:before{content:"";display:inline-block;width:19px;height:19px;margin:-3px 9px 0 0;border:1px solid #cfd3de;background-color:#fff;box-sizing:border-box;vertical-align:middle}
.formRadio input[type="radio"]:disabled+label:before,
.formChk input[type="checkbox"]:disabled+label:before{background-color:#f5f5f5}

/* input_radio */
.formRadio label:before{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.formRadio input[type="radio"]:checked + label:before{border:0;background:#009cdf url("/resources/img/icon/icon_sp_checked.png") no-repeat 5px 5px}

/* input_check */
.formChk label:before{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:4px}
.formChk input[type="checkbox"]:checked + label:before{border:0;background:#009cdf url("/resources/img/icon/icon_sp_checked.png") no-repeat 3px -46px}

/* input */
input{height:48px;line-height:46px;padding:2px 13px 4px;border:1px solid #dfdfdf;border-radius:3px;box-sizing:border-box}
input:disabled{background-color:#f5f5f5 !important;cursor:default !important}

/* textarea */
textarea{width:100%;height:100px;padding:6px 10px;border:1px solid #cfd3de;border-radius:3px;box-sizing:border-box}

/* input_calendar */
.dateControl input{display:inline-block;width:30%;background:#fff url("/resources/img/btn/mobile/btn_calendar.png") no-repeat right 10px center;background-size:18px auto;cursor:pointer}
.half .dateControl input{width:calc(50% - 10px)}
.ui-datepicker-title select{padding:5px;height:auto;background:white;border-radius:0px;border-color:rgb(169, 169, 169);color:black;-webkit-appearance:menulist}
.ui-widget-header .ui-icon{background-image:url(/resources/img/icon/ui-icons_444444_256x240.png) !important}

/* select */
select{height:48px;line-height:46px;padding:0 36px 0 12px;border:1px solid #dfdfdf;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:#fff url("/resources/img/btn/mobile/btn_arrow_select.png") no-repeat right 10px center;background-size:14px auto}

/* title */
.tit01{font-size:20px;color:#09426d;text-align:center}
.tit02{font-size:18px;color:#fff}
.tit03{font-size:18px;color:#09426d}

/* 세로 table */
table{width:100%;border-top:1px solid #a9bdcc;border-right:1px solid #a9bdcc;background-color:#fff}
table.center tr td{text-align: center;}
table th,
table td{height:40px;border-bottom:1px solid #a9bdcc;border-left:1px solid #d2d6e0;vertical-align:middle}
table th{background-color:#f7faff;text-align:center;font-weight:500;color:#09426d}
table td{padding:5px 10px}
table td img{vertical-align:middle}

/* 공통 */
html,body{font:400 16px 'SpoqaHanSans', sans-serif;color:#585858}
header{position:relative;height:50px;padding:13px 18px}
header .btnGoBack{position:absolute;top:10px;left:9px;height:16px;padding:18px;background:url(/resources/img/btn/mobile/goBack.svg) no-repeat 10px 10px;background-size:12px auto;font-size:0;text-indent:-9999em}
header .btnMenu{position:absolute;top:10px;right:9px;height:15px;padding:18px;background:url(/resources/img/btn/mobile/btn_menu.svg) no-repeat 10px 10px;background-size:17px auto;font-size:0;text-indent:-9999em}
header nav{display:none;position:fixed;top:0;right:0;z-index:99;width:100%;height:100%;background-color:rgba(0,0,0,.4)}
header .navWrap{position:absolute;right:-210px;z-index:99;width:210px;height:100%;background-color:#fff}
header .navWrap .tit02{position:relative;height:54px;padding:13px 16px;background-color:#009cdf}
header .navWrap .btnClose{position:absolute;top:11px;right:9px;width:31px;height:31px;background:url(/resources/img/btn/mobile/btn_close.png) no-repeat center;background-size:17px auto;font-size:0;text-indent:-9999em}
header .navWrap ul li{height:54px;padding:15px 16px;border-bottom:1px solid #eaeaea;font-size:17px;cursor:pointer}
header .navWrap ul li .num{margin-left:5px;padding:0 9px 2px;border-radius:14px;background-color:#e61874;color:#fff}
header .navWrap a .btnEditpw {margin:0px 0px -1px 5px;}/*비밀번호 변경 Icon 20210804*/
.contents{padding:0 8px 50px}
.contInner{margin-bottom:15px;padding:15px 18px;border-bottom:1px solid #ced3d6;background-color:#fff}
.innerWrap{padding:0 18px}
.broke{text-decoration:line-through}

/* 로그인 */
#loginWrap{padding:90px 18px 0}
.logoLogin{height:80px;width:260px;margin:auto;background:url(/resources/img/img_logo_KB-pc-off.svg) no-repeat center;background-size:contain;font-size:0;text-indent:-9999em}
.loginCont{padding:26px 0 10px}
.loginCont input{width:100%;margin-bottom:10px}
.loginCont button{width:100%;margin-top:26px}
footer{font-size:12px;color:#898989;text-align:center}

/* 연장근무-신청 */
.tabs{display:table;width:100%;table-layout:fixed;color:#656565}
.tabs li{display:table-cell;height:45px;border-bottom:1px solid #c2c8cc;text-align:center;vertical-align:middle;cursor:pointer}
.tabs li.active{border-bottom:3px solid #09426d;font-weight:700;color:#09426d}
.tabCont{display:none;height:calc(100vh - 100px);overflow-x:hidden;overflow-y:auto;}
.tabCont.active{display:block}
.bgCont:after{content:"";display:block;width:100%;height:180px;background:linear-gradient(#009cdf,#006ca3)}
.bgCont dl{float:left;width:50%;font-size:14px;color:#fff;text-align:center}
.bgCont dl dt{padding-top:25px}
.bgCont dl dt span{padding-right:1px;font-size:15px;font-weight:700}
.bgCont dl dt span:before{content:"";display:inline-block;position:relative;top:6px;width:18px;height:20px;margin-right:8px;background:url(/resources/img/icon/mobile/icon_sp_calendar.png) no-repeat 0 0;background-size:18px auto}
.bgCont dl.month dt span:before{background-position:0 -52px}
.bgCont dl dd{position:relative;padding-top:3px;font-size:40px}
.bgCont dl.month dd:before{content:"";position:absolute;top:12px;width:1px;height:40px;left:0;z-index:99;background-color:rgba(255,255,255,.5)}

.bgCont2:after{content:"";display:block;width:100%;height:280px;background:linear-gradient(#009cdf,#006ca3)}
.bgCont2 dl{float:left;width:50%;font-size:14px;color:#fff;text-align:center}
.bgCont2 dl dt{padding-top:25px}
.bgCont2 dl dt span{padding-right:1px;font-size:15px;font-weight:700}
.bgCont2 dl dt span:before{content:"";display:inline-block;position:relative;top:6px;width:18px;height:20px;margin-right:8px;background:url(/resources/img/icon/mobile/icon_sp_calendar.png) no-repeat 0 0;background-size:18px auto}
.bgCont2 dl.month dt span:before{background-position:0 -52px}
.bgCont2 dl dd{position:relative;padding-top:3px;font-size:40px}
.bgCont2 dl.month dd:before{content:"";position:absolute;top:12px;width:1px;height:40px;left:0;z-index:99;background-color:rgba(255,255,255,.5)}

.info{overflow:hidden;margin-top:-42px;padding:15px;border:1px solid #0078b2;border-radius:10px;background-color:#fff;box-shadow:0 0 8px 1px rgba(0,0,0,.3)}
.info .dateControl input{width:100%}
.info dl{overflow:hidden;margin-bottom:12px}
.info dt{float:left;padding-top:11px;color:#09426d}
.info dd{float:right;width:75%}
.info dd.checkList{margin:13px 0 5px}
.info dd.checkList .formRadio{float:left;width:50%}
.info dd select{float:left}
.info dd .hour{width:calc(50% - 10px);margin-right:10px}
.info dd .minute{width:calc(50% - 10px)}
.info textarea{height:63px}
.accordion{margin-top:15px}
.accordion dt{position:relative;height:50px;padding:12px 16px;border-bottom:1px solid #a9bdcc;background-color:#fff;color:#09426d }
.accordion dt .btnAcco{position:absolute;top:0;right:0;height:48px;font-size:0;text-indent:-9999em}
.accordion dt .btnAcco:after{content:"";display:inline-block;width:50px;height:50px;background:url(/resources/img/btn/mobile/btn_sp_accordion.png) no-repeat center -28px;background-size:10px auto}
.accordion dt .btnAcco.on:after{background-position:center 22px}
.accordion dd{display:none;padding:7px 16px;background-color:#f7faff}
.accordion dd .formRadio{height:40px;line-height:40px}
.register{font-weight:700}

/* 연장근무-신청내역 */
.bgWrap{padding-bottom:100%;background-color:#e9ebf0}
.date{display:block;padding:3px 0 10px;font-size:20px;font-weight:700;color:#09426d;text-align:center}
.contInner .accordion dt{padding:12px 8px}
.contInner .accordion dt .btnAcco:after{width:44px}
.contInner .accordion dd{padding:7px 14px}
.contInner .accordion dd li{padding:8px 0px}
.contInner .accordion dd li span{padding-right:10px}

/* 결재함-연장근무 */
.bgInfo{width:100%;height:100%;margin:66px 0 -51px;padding:0px 8px;background-color:#09426d}
.bgInfo .info{position:relative;top:-51px;margin-top:0;margin-bottom:15px}
.bgInfo .info strong{display:block;padding:4px 0 15px;font-size:18px;font-weight:700;color:#09426d;text-align:center}
.bgInfo .info dt,
.bgInfo .info dd{float:none;width:100%}
.bgInfo .info dt span{padding-left:18px}
.lineList li{padding:12px 8px;border-bottom:1px solid #a9bdcc}
.lineList li.active{border:1px solid #a9bdcc;border-top:0;background-color:#f2fbff}
.lineList li:first-child.active{border-top:1px solid #a9bdcc}
.lineList li i{top:0}
.bgInfo .info .btnCenter{margin-top:15px}
.bgInfo .info .btnRound{width:88px;height:35px;line-height:33px;border-radius:18px}
.bgBox{padding:0 13px;background-color:#f0f3f5}
.bgBox dt{line-height:1;padding:11px 0;border-bottom:1px solid #0078b2;font-size:17px;text-align:center}
.bgBox dd{padding:8px 0;font-size:15px}
.bgWrap .formRow{overflow:hidden;display:table;width:100%}
.bgWrap .formRow li{display:table-cell;padding:12px 0 12px 10px}
.bgWrap .formRow li:first-child{padding-left:0}
.bgWrap .formRow li input{width:100%}
.stateList li i{position:absolute;top:50%;left:0;padding-top:2px;transform:translateY(-50%)}
.stateList li{position:relative;padding-left:63px;line-height:1.2}
.viewDetail{position:absolute;top:50%;right:0px;width:45px;height:45px;font-size:0;text-indent:-9999em;transform:translateY(-50%)}
.viewDetail:before{content:"";display:inline-block;width:10px;height:5px;background:url(/resources/img/btn/mobile/btn_sp_accordion.png) no-repeat 0 0;background-size:10px auto;transform:rotate(90deg)}

/* 결재함-연장근무상세 */
.titArea{padding:21px 0}
.titArea .tit03{display:inline-block}
table td .time{padding-left:13px}

/* 상세 조회 */
.detail{display:none;position:fixed;top:0;right:0;z-index:99;width:100%;height:100%;}
.detailWrap{position:absolute;right:-210px;z-index:99;width:100%;height:100%;background-color:#fff}

/* 패스워드변경 - 20210804 */
.brdrTop3 {border-top:3px solid #09426d;margin-top:9px;}
.tipBox {background-color:#f0f3f5;margin:20px 0px;border-radius:10px;padding:15px 21px 15px 30px;font-size:15px;line-height:130%;}
.tipBox dd {margin:9px 0px;}
.tipBox dd:before {content:".";display:inline-block;position:relative;top:-5px;left:-10px;font-weight:bold;width:0px;height:0px;}

.pwBox {margin:30px 0px;padding:20px 0px 10px 10px;border-top:1px solid #a9bdcc;border-bottom:1px solid #a9bdcc}
.pwBox dl{overflow:hidden;margin-bottom:12px}
.pwBox dt{float:left;padding-top:11px;color:#09426d}
.pwBox dd{float:right;width:65%}
.pwBox dd input {width:100%;}

.btnCenter .btnRound{
    display: inline-block;
    width: 35%;
    height: 45px;
    line-height: 35px;
    padding: 0 13px;
    border-radius: 22px;}

.cancel{margin-right:6px;border:2px solid #a9bdcc;color:#333333}

/* 미지원 안내 페이지 - 20210809 */
.unsupportimg {height:180px;padding:18px;background:url(/resources/img/mobile/unsupported.png) no-repeat center;background-size:180px auto;font-size:0;text-indent:-9999em}
.guide {font-size: 18px;color: #09426d;text-align: center;padding:40px 10px;}

/* 참조자 하이라이트 */
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {width: 100%; border-radius: 0;}

/* 결재선 하이라이트 */
.ui-autocomplete {
    max-height: 110px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
}

/* 참조자 스크롤처리 */
.ui-autocomplete {
    max-height: 110px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
}

/* 사이드 메뉴 */
img.icon_user_btn, img.icon_gear_btn{
    width: 20px;
    margin: 0 0 4px 5px;
    vertical-align: middle;
}

.menuRow{
    border-bottom: 1px solid #ced3d6;
    padding: 15px 0 15px 0;
}

.menuRowLeft{
    display: inline-block;
}

.menuRowRight{
    float: right;
}

.menuRowHeader{
    font-size: 9pt;
    padding-bottom: 5px;
    color: #898989;
}

.menuTitle{
    font-size: 13pt;
}

.menuSubtitle{
    font-size: 10pt;
}

.menuLogoutBtn{
    position: relative;
    top: 28px;
    width: 80px;
    border-radius: 25px 25px 25px 25px;
    background-color: #009cdf;
    text-align: center;
    color: white;
    padding: 2px;
}

.menuArrowBtn{margin-right: 10px;}
.menuArrowBtn:before{content:"";display:inline-block;width:10px;height:5px;margin-bottom: 7px;background:url(/resources/img/btn/mobile/btn_sp_accordion.png) no-repeat 0 0;background-size:10px auto;transform:rotate(90deg)}

.rowBtn, .rowBtn:hover{
    cursor: pointer;
}

.commuteDateClock{
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}
.commuteDate{
    display: inline-block;
    text-align: right;
    margin-right: 10px;
}
.commuteDate #date{
    font-size: 15px;
}
.commuteDate #amOrPm{
    font-size: 15px;
}
.commuteClock{
    display: inline-block;
    font-size: 45px;
    color: #009cdf;
}

.arrowBtn{width:100%;height:100%;font-weight:500}
.arrowBtn:after{content:"";position:absolute;margin-top:12px;width:23px;height:23px;background:url(/resources/img/btn/btn_arrow_sort.png) no-repeat center;font-size:0;text-indent:-9999em;transform:translateY(-50%)}
.arrowBtn.active:after{transform:translateY(-50%) rotate(180deg)}
.hide{display:none;}

/* 모바일 홈 화면 추가 - 20230803 */
#homeWrap{width:100%;height:calc(100vh - 100px);padding:0 20px 0;display:flex;flex-direction:column; justify-content: space-evenly;}
.logo_PineWork{
    height:95px;
    padding:18px;
    background:url(/resources/img/img_logo_KB-pc-off.svg) no-repeat center bottom;
    background-size:166px auto;
    font-size:0;
    /*flex:1 1 auto;*/
    text-indent:-9999em;
}
#homeWrap > div:first-child {/*flex: 1 1 auto;*/display:flex-direction:column;justify-content:center;padding: 30px 20px 20px;height : 200px;}
.menuCont {
    padding:0 0 40px;
    width:96%;
    height:351px;
    text-align:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:flex-start;
    justify-content:center;
    align-items:flex-start;
    margin:0 auto;
    flex-grow: 1;
}
.menuCont > div {
    background-color:#f2f5fe;
    border-radius:10px;
    width:46%;/*calc(100% / 2 - 30px)*/
    height:97px;
    margin:5px;
    padding:15px 15px 15px 20px;
    box-sizing:border-box;
    text-align:left;
    font-size:14px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
}
.menuCont > div > div:first-child {width:30px;height:30px;border-radius:50%;}
.menuCont > div > div:first-child:before {
    content:"";
    display:block;
    position:relative;
    width:30px;
    height:30px;
    background:url(/resources/img/icon/mobile/icon_homemenu.png) no-repeat;
    background-size:100%;
}
.menuCont > div:nth-child(1) > div:first-child {background:#919191;box-shadow:0px 1px 6px 2px rgba(145, 145, 145, 0.8);}
.menuCont > div:nth-child(1) > div:first-child:before {background-position:0 -35px;}
.menuCont > div:nth-child(2) > div:first-child {background:#139bf3;box-shadow:0px 1px 6px 2px rgba(19, 155, 243, 0.8);}
.menuCont > div:nth-child(2) > div:first-child:before {background-position:0 -75px;}
.menuCont > div:nth-child(3) > div:first-child {background:#4346cc;box-shadow:0px 1px 6px 2px rgba(67, 70, 204, 0.8);}
.menuCont > div:nth-child(3) > div:first-child:before {background-position:0 -150px;}
.menuCont > div:nth-child(4) > div:first-child {background:#19c4c2;box-shadow:0px 1px 6px 2px rgba(25, 196, 194, 0.8);}
.menuCont > div:nth-child(4) > div:first-child:before {background-position:0 -187px;}
.menuCont > div:nth-child(5) > div:first-child {background:#19c4c2;box-shadow:0px 1px 6px 2px rgba(25, 196, 194, 0.8);}
.menuCont > div:nth-child(5) > div:first-child:before {
    background-position: 0 -225px;  /* 마지막 아이콘 위치로 수정 */
}

.menuCont > div > div:nth-child(2):after {
    content:"";
    display:inline-block;
    position:relative;
    top:4px;
    float:right;
    width:13px;
    height:13px;
    background:url(/resources/img/icon/mobile/icon_sp_btn.png) no-repeat 0 -220px;
    background-size:100%;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    opacity: 0;
    visibility: hidden;
    transition: .3s linear;
}
.overlay.open {
    opacity: 1;
    visibility: visible;
}

.overlayConfirm{
    position: relative;
    top: 37%;
    margin:auto;
    width: 75%;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 13px;
    overflow: hidden;
    z-index: 9999;
    /*background-color: rgba(255, 255, 255, 0.8);*/
    background-color: #EDEEEF;
}

.overlayConfirm .overlayInner {
    padding: 15px;
}

.overlayConfirm .overlayTitle {
    color: #363a54;
    font-weight: 500;
    font-size: 15px;
    padding: 10px;
}

.overlayConfirm .overlayText {
    margin-top: 5px;
}
.overlayConfirm .overlayText input {
    line-height: 0;
    width: 100%;
    background: white;
    height: 38px;
    font-size: 16px;
    border-radius: 6px;
}

.overlayConfirm .overlayBtn {
    position: relative;
    height: 44px;
    line-height: 44px;
    font-size: 17px;
    color: #363a54;
    border-radius: 0 0 13px 13px;
    overflow: hidden;

    border-top: 1px solid #c4c4c4;
}

.overlayConfirm .overlayBtn .overlayBtnCancel{
    float:left;
    width: 50%;
    border-right:1px solid #c4c4c4;
    color: red;
    cursor: pointer;
}

.overlayConfirm .overlayBtn .overlayBtnConfirm{
    float:right;
    width: 50%;
    cursor: pointer;
}