/* Login */
.loginWrap > main{background:url("../images/imgMainBg_w.jpg") center top/215% no-repeat;}

.loginWrap h2{color:#fff; padding:0 40px;}
.loginWrap h2 > .mText{font-weight:600; font-size:6rem; letter-spacing: -0.015em; display:block; line-height: 1;}
.loginWrap h2 > .mText > span{font-size:4rem; margin-right:3px;}
.loginWrap h2 > .sText{font-weight:500; font-size:13px; letter-spacing: -0.015em; display:block;}

.loginArea{background:#fff; padding:4.8rem 4rem 0 4rem; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); border-radius: 40px 40px 0px 0px; position:absolute; bottom:0px; width: 100%;}
.loginArea > .footLogo{padding:5.8rem 0 2.4rem; text-align: center;}
.loginArea > .footLogo > .logo{width:80px;}

.loginArea .tit{font-weight: 700; font-size: 26px; letter-spacing: -0.015em; margin-bottom:4rem; color:var(--blackColor);}
.loginArea input{width:100%;}
.loginBtn{width:100%; margin-top:3.2rem;}

/* main */
.mainWrap > main{background:linear-gradient(0deg, #005689 35%, rgba(0, 86, 137, 0.445859) 40%, rgba(0, 86, 137, 0) 50%), url("../images/imgMainBg_w.jpg") center top/215% no-repeat;}
.mainWrap > header{justify-content: end; color:#fff; border-bottom:0px;}

.mainWrap h2{color:#fff; padding:0 40px;}
.mainWrap h2 > .mText{font-weight:600; font-size:6rem; letter-spacing: -0.015em; display:block; line-height: 1;}
.mainWrap h2 > .mText > span{font-size:4rem; margin-right:3px;}
.mainWrap h2 > .sText{font-weight:500; font-size:13px; letter-spacing: -0.015em; display:block;}

/* NAVI */
.naviArea{position:absolute; bottom:0px; width:100%; padding:0 32px;}
.naviArea > nav{ width: 100%; padding:5.8rem 0;}
.naviArea > nav > a{background:#fff; border-radius: 8px; display:flex; align-items: center; height:7.2rem; padding:20px 10px 20px 20px;}
.naviArea > nav > a + a{margin-top:8px;}
.naviArea > nav > a > img{width:24px;}
.naviArea > nav > a > span{font-weight: 700; font-size: 1.8rem; color:var(--blackColor); margin-left:1.6rem;}
.naviArea > nav > a > .rightIcon{margin-left:auto;}
.naviArea > nav > a > .rightIcon:after{content: "\e93f"; font-family: "xeicon"; display:inline-block; font-size:3rem; color:#9FAAB1;}

.naviArea > .footLogo{padding:0 0 2.4rem; text-align: center;}
.naviArea > .footLogo > .logo{width:87px;}

/* GNB */
.gnbPop{background:#E6EFF4;}

.gnbPop > .header > .headLogo{width:80px; box-sizing: content-box; padding:0 20px;}
.gnbPop > .header > .headLogo > img{width:100%; object-fit: cover;}

.gnbPop > .main{height:calc(100% - (6.4rem + 8.4rem)); overflow-y: scroll; }
.gnbPop > .main > div{position:relative; padding:2.4rem 20px; height: 100%;}
.gnbPop > .main > div:after{content:''; display: inline-block; clear:both;}
.gnbPop > .main .userInfo{display:flex; justify-content: space-between; align-items: center; color:var(--blackColor); margin-bottom:2.4rem;}
.gnbPop > .main .userInfo > .userName{display:flex; align-items:center; padding:0 8px;}
.gnbPop > .main .userInfo > .userName > .n{font-weight: 700; font-size: 16px; margin-left:8px;}
.gnbPop > .main .userInfo > .userName > .t{font-weight: 400; font-size: 14px; margin-left:7px;}

.gnbPop .gnbArea > .gnbItem + .gnbItem{margin-top:2.4rem;}
.gnbPop .gnbArea > .gnbItem > .t{font-weight: 500; font-size: 13px; padding-left:8px; margin-bottom:10px; display:block;}
.gnbPop .gnbArea > .gnbItem > .gnbList{border-radius: 8px; display: flex; flex-direction:column; overflow: hidden;}
.gnbPop .gnbArea > .gnbItem > .gnbList > a{padding:12px 16px; display:inline-block; width:100%; background:#fff; display: flex; align-items: center;}
.gnbPop .gnbArea > .gnbItem > .gnbList > a > img{width:20px;}
.gnbPop .gnbArea > .gnbItem > .gnbList > a > span{font-weight: 500; font-size: 15px; color:var(--blackColor); margin-left:12px;}

.gnbPop > .footLogo{text-align: center; padding:2.4rem 0; width: 100%; position:fixed; bottom:0px; max-width: 640px; background:#E6EFF4;}
.gnbPop > .footLogo > .logo{width:80px;}

/* vcinfo */
.vcinfo{padding:10px 0; display: flex; align-items: center; background:#F7F7F7 !important; border-bottom: 1px solid #DDD;}
.vcinfo > .infoItem{text-align: center; height:100%; padding:5px 20px;}
.vcinfo > .infoItem + .infoItem{border-left:1px solid var(--textColor);} 
.vcinfo > .infoItem > span{display: block;}
.vcinfo > .infoItem .tit{font-weight: 500; font-size: 1.3rem;}
.vcinfo > .infoItem .num{font-weight: 700; font-size: 2.3rem; color:var(--blackColor);}
.vcinfo > .infoItem > .flexBox{display:flex; justify-content: space-between; align-items: center;}
.vcinfo > .infoItem > .flexBox .num{font-size:1.3rem !important;}
.vcinfo > .infoItem > .flexBox + .flexBox{margin-top:3px;}

.vcinfo > .infoItem:first-of-type,
.vcinfo > .infoItem:nth-of-type(2){width:30%;}
.vcinfo > .infoItem:last-of-type{width:40%;}

/* otinfo */
.otinfo{padding:10px 0; display: flex; align-items: center; background:#F7F7F7 !important; border-bottom: 1px solid #DDD; border-top: 1px solid #DDD;}
.otinfo > .infoItem{text-align: center; height:100%; padding:5px 20px; width:calc(100% / 3);}
.otinfo > .infoItem + .infoItem{border-left:1px solid var(--textColor);} 
.otinfo > .infoItem > span{display: block;}
.otinfo > .infoItem .tit{font-weight: 500; font-size: 1.3rem;}
.otinfo > .infoItem .num{font-weight: 700; font-size: 2.3rem; color:var(--blackColor);}

/* searchArea */
.searchArea{padding:10px 20px; display: flex; justify-content: space-between; align-items: center; background:#F7F7F7 !important; border-bottom: 1px solid #DDD; border-top: 1px solid #DDD;}
.searchArea:first-child{border-top:0px;}
.searchArea .select_box{background:#fff; border:1px solid #DDDDDD; border-radius:4px; box-sizing: border-box; height:40px;}
.searchArea .select_box > select{width:80px; padding:3px 10px;  font-size:1.4rem;}
.searchArea .select_box:has(select:hover){border: 1px solid var(--subColor);}
.searchArea input{background:#fff !important; border:1px solid #DDDDDD; padding:3px 10px; border-radius:4px; margin:0 5px; width:calc(100% - (80px + 55.59px + 10px)); font-size:1.4rem;}
.searchArea input:hover{border: 1px solid var(--subColor);}
.searchArea input:focus{border: 1px solid var(--subColor);}
.searchArea button{height:40px; font-size:1.4rem !important;}

.searchArea.type2{display: block;}
.searchArea.type2 input{margin:0px; font-size:1.4rem;}
.searchArea.type2 .flexBox{display: flex; justify-content: space-between; align-items: center;}
.searchArea.type2 .flexBox + .flexBox{margin-top:5px;} 
.searchArea.type2 .flexBox .select_box:nth-of-type(1){margin-right:5px; width:140px;}
.searchArea.type2 .flexBox .select_box:nth-of-type(2){width:calc(100% - 145px);}
.searchArea.type2 .flexBox .select_box > select{width:100%; font-size:1.4rem;}
.searchArea.type2 .flexBox input{width:calc(100% - 60.59px); margin-right:5px;}

/* dayPicker */
.dayPicker{display:flex; justify-content: center; padding:20px 10px;}
.dayPicker:first-child{border-top:0px;}
.dayPicker > .day{font-weight: 600; font-size: 22px; color:var(--blackColor);}
.dayPicker > .prevDayBtn{font-size:0px; margin-right:15px;}
.dayPicker > .prevDayBtn:after{content: "\e93b"; display:inline-block; font-family: "xeicon"; font-size:2rem; color: var(--iconColor);}
.dayPicker > .nextDayBtn{font-size:0px; margin-left:15px;}
.dayPicker > .nextDayBtn:after{content: "\e93e"; display:inline-block; font-family: "xeicon"; font-size:2rem; color: var(--iconColor);}

.daysPicker{display:flex; justify-content: center; align-items: center; padding:10px; margin-top:0px !important;}
.daysPicker > span{font-weight: 600; font-size: 22px; color:var(--blackColor); padding:0 20px 0 10px;}
.daysPicker > .select_box{border-bottom:0px; }
.daysPicker > .select_box > select{font-weight: 600; font-size: 22px; color:var(--blackColor); min-width:85px; letter-spacing: -1.5px;}
.daysPicker > .select_box:has(select:hover){border-bottom:0px;}

.dayPicker.ot{padding:20px 10px; flex-direction: column; align-items: center;}
.dayPicker.ot > div{display:flex; justify-content: center;}
.dayPicker.ot > div > .day{font-weight: 600; font-size: 22px; color:var(--blackColor);}
.dayPicker.ot > div > .prevDayBtn{font-size:0px; margin-right:15px;}
.dayPicker.ot > div > .prevDayBtn:after{content: "\e93b"; display:inline-block; font-family: "xeicon"; font-size:2rem; color: var(--iconColor);}
.dayPicker.ot > div > .nextDayBtn{font-size:0px; margin-left:15px;}
.dayPicker.ot > div > .nextDayBtn:after{content: "\e93e"; display:inline-block; font-family: "xeicon"; font-size:2rem; color: var(--iconColor);}
.dayPicker.ot > span{font-weight:500; margin-top:5px;}

.dayPicker.sh{padding:20px 10px; flex-direction: column; align-items: center;}
.dayPicker.sh > div{display:flex; justify-content: center;}
.dayPicker.sh > div > .day{font-weight: 600; font-size: 22px; color:var(--blackColor);}
.dayPicker.sh > div > .prevDayBtn{font-size:0px; margin-right:15px;}
.dayPicker.sh > div > .prevDayBtn:after{content: "\e93b"; display:inline-block; font-family: "xeicon"; font-size:2rem; color: var(--iconColor);}
.dayPicker.sh > div > .nextDayBtn{font-size:0px; margin-left:15px;}
.dayPicker.sh > div > .nextDayBtn:after{content: "\e93e"; display:inline-block; font-family: "xeicon"; font-size:2rem; color: var(--iconColor);}
.dayPicker.sh > span{font-weight:500; margin-top:5px;}
/* noData */ 
.noData{display:flex !important; height:inherit; min-height: 162px; flex-direction: column; justify-content: center;}
.noData:before{content: "\e9aa"; font-family: xeicon; display:block; text-align: center; font-size:75px; color:var(--textColor);}
.noData:after{content:"등록된 내용이 없습니다."; display:block; text-align: center; font-size:17px; font-weight: 600; margin-top:10px; color:var(--textColor);}

.noSearch{display:flex !important; height:inherit; min-height: 162px; flex-direction: column; justify-content: center;}
.noSearch:before{content: "\e9aa"; font-family: xeicon; display:block; text-align: center; font-size:75px; color:var(--textColor);}
.noSearch:after{content:"검색어를 입력해 주세요."; display:block; text-align: center; font-size:17px; font-weight: 600; margin-top:10px; color:var(--textColor);}

.noTable{height:inherit; padding:30px 10px !important;}
.noTable:before{content: "\e9aa"; font-family: xeicon; display:block; text-align: center; font-size:75px; color:var(--textColor);}
.noTable:after{content:"검색어를 입력해 주세요."; display:block; text-align: center; font-size:17px; font-weight: 600; margin-top:10px; color:var(--textColor);}
.noTableSearch{height:inherit; padding:30px 10px !important;}
.noTableSearch:before{content: "\e9aa"; font-family: xeicon; display:block; text-align: center; font-size:75px; color:var(--textColor);}
.noTableSearch:after{content:"조회된 내역이 없습니다."; display:block; text-align: center; font-size:17px; font-weight: 600; margin-top:10px; color:var(--textColor);}

.err{display:flex !important; height:inherit; flex-direction: column; justify-content: center;}
.err > .logo:before{content: "\e9aa"; font-family: xeicon; display:block; text-align: center; font-size:75px; color:var(--textColor);}
.err > .txt{display:block; text-align: center; font-size:17px; font-weight: 600; margin-top:10px; color:var(--textColor);}
.err > .btnWrap{display:flex;justify-content: center;}
.err .btn{background: #fff; color: #727C83; border:1px solid #727C83; width:100px; height:35px; line-height: 32px; border-radius: 5px; display:inline-block; margin:1.5rem 10px 0 0;}
.err .btn:last-child{background: #727C83; color: #fff;}

/* List css */
.listCon{height:calc(100% - (67.2px + 8px)); overflow-y: auto; display:inline-block; width:100%;}
.listCon.vc{height:calc(100% - (82.4px + 60px + 8px));}
.listCon.vc.btnOn{height:calc(100% - (82.4px + 60px + 8px + 80px));}
.listCon.ot{height:calc(100% - (92px + 74px + 16px));}
.listCon.ot.btnOn{height:calc(100% - (92px + 74px + 16px + 80px));}
.listCon.nt{height:calc(100% - (61px + 8px));}

.listCon.sh{height:calc(100% - (66.4px + 8px));}
.listCon.sh.btnOn{height:calc(100% - (66.4px + 8px + 80px));}

.listCon.sh > .tabMenuWrap,
.listCon.ot > .tabMenuWrap,
.listCon.vc > .tabMenuWrap{position:sticky !important; top:0 !important; z-index: 1 !important;}
.listCon.sh > .topArea,
.listCon.ot > .topArea,
.listCon.vc > .topArea{top:44px;}

.listCon > .topArea{padding:9px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top:0; border-bottom:1px solid #DDD; background:#fff; z-index: 1;}
.listCon > .topArea > .txt{font-size:1.6rem; font-weight:600;}
.listCon > .topArea > .txt > span{color:var(--mainColor); font-weight:800;}

.listWrap > .listItem > .tit{background:#F7F7F7; padding:10px 20px; display: flex; justify-content: space-between; align-items:center; border-bottom:1px solid #DDD;}
.listWrap > .listItem > .tit > span{font-weight: 400; font-size: 1.4rem;}
.listWrap > .listItem > .con{padding:20px; display:flex; border-bottom:1px solid #ddd;}
.listWrap > .listItem > .con > .state{width: 6rem; height:6rem; padding:10px 0; border-radius: 12px; color:#fff; margin-right:15px; display:flex; flex-direction: column; justify-content: center; align-items: center;}
.listWrap > .listItem > .con > .state > span{display:block;}
.listWrap > .listItem > .con > .state > span:first-child{font-weight: 700; font-size: 1.8rem;}
.listWrap > .listItem > .con > .state > span:last-child{font-weight: 500; font-size: 1.2rem;}

.listWrap > .listItem > .con > .state{background:#727C83;}

.listWrap > .listItem > .con > .txt {width:calc(100% - 75px);}
.listWrap > .listItem > .con > .txt .tit{font-weight: 700; font-size: 1.6rem; color:var(--blackColor);}
.listWrap > .listItem > .con > .txt .con{font-weight: 400; font-size: 1.3rem; color:#E96B35;}
.listWrap > .listItem > .con > .txt .type{display:flex; align-items: center; padding:1px 0 5px 0;}
.listWrap > .listItem > .con > .txt .type > li{font-weight: 600; font-size: 1.3rem;}
.listWrap > .listItem > .con > .txt .type > li + li:before{content:''; display:inline-block; width:1px; height:13px; background:#ddd; margin:0 4px;}

.listWrap > .listItem > .con > .txt > .bottom{display:flex; justify-content: space-between; align-items: center;}
.listWrap > .listItem > .con > .txt > .bottom > .con{width:calc(100% - 7rem); padding-right:10px;}
.listWrap > .listItem > .con > .txt > .bottom > .pState{padding:4.5px 10px; color:#fff; width:7rem; border-radius: 50px; text-align: center;}
.listWrap > .listItem > .con > .txt > .bottom > .pState.type1{background:#8e969c;}
.listWrap > .listItem > .con > .txt > .bottom > .pState.type2{background:#005689;}

.listWrap.vc > .listItem:first-of-type{border-top:0px;}
.listWrap.vc > .listItem{border-bottom:1px solid #DDD; position: relative;}
.listWrap.vc > .listItem > .checkbox{position:absolute; right:20px; top:15px;}
.listWrap.vc > .listItem > .con{align-items: center;}
.listWrap.vc > .listItem > .con > .txt > .date{font-weight: 700; font-size: 1.6rem; color:var(--blackColor); letter-spacing: -1px; padding-right:30px;}
.listWrap.vc > .listItem > .con > .txt > .bottom{display:flex; justify-content: space-between; align-items: center; font-weight: 600; font-size:1.3rem; margin-top:3px;}
.listWrap.vc > .listItem > .con > .txt > .bottom > .editDate::before{content: "\e9c4"; display:inline-block; font-family: "xeicon"; font-size:1.3rem; color:var(--iconColor); margin-right:5px;}
.listWrap.vc > .listItem > .con > .txt > .bottom > .vcState{padding:4.5px 10px; color:#fff; width:7rem; border-radius: 50px; text-align: center;}
.listWrap.vc > .listItem > .con > .txt > .bottom > .vcState.type1{background:#8e969c;}/*결제대기*/
.listWrap.vc > .listItem > .con > .txt > .bottom > .vcState.type2{background:#656EE1;}/*결제요청*/
.listWrap.vc > .listItem > .con > .txt > .bottom > .vcState.type3{background:#005689;}/*결제완료*/
.listWrap.vc > .listItem > .con > .txt > .bottom > .vcState.type4{background:#990033;}/*결제취소*/
.listWrap.vc > .listItem > .con > .txt > .bottom > .vcState.type5{background:#ddd;}/*결제반려*/

.listWrap.ot > .listItem:first-of-type{border-top:0px;}
.listWrap.ot > .listItem{border-bottom:1px solid #DDD; position: relative;}
.listWrap.ot > .listItem > .checkbox{position:absolute; right:20px; top:15px;}
.listWrap.ot > .listItem > .con{align-items: center;}
.listWrap.ot > .listItem > .con > .txt > .otType{font-weight: 700; font-size: 1.3rem;}
.listWrap.ot > .listItem > .con > .txt > .date{font-weight: 700; font-size: 1.6rem; color:var(--blackColor); letter-spacing: -1px; padding-right:30px;}
.listWrap.ot > .listItem > .con > .txt > .bottom{display:flex; justify-content: space-between; align-items: center; font-weight: 600; font-size:1.3rem; margin-top:3px;}
.listWrap.ot > .listItem > .con > .txt > .bottom > .cont{margin-right:10px; width: calc(100% - 8rem) !important;}
.listWrap.ot > .listItem > .con > .txt > .bottom > .otState{padding:4.5px 10px; color:#fff; width:7rem; border-radius: 50px; text-align: center; flex-shrink: 0;}
.listWrap.ot > .listItem > .con > .txt > .bottom > .otState.type1{background:#8e969c;}
.listWrap.ot > .listItem > .con > .txt > .bottom > .otState.type2{background:#656EE1;}
.listWrap.ot > .listItem > .con > .txt > .bottom > .otState.type3{background:#005689;}
.listWrap.ot > .listItem > .con > .txt > .bottom > .otState.type4{background:#990033;}
.listWrap.ot > .listItem > .con > .txt > .bottom > .otState.type5{background:#ddd;}

.listWrap.sf{padding-bottom:46px;}
.listWrap.sf > .listItem:first-of-type{border-top:0px;}
.listWrap.sf > .listItem{padding:15px 20px; border-bottom:1px solid #DDD;}
.listWrap.sf > .listItem > .title{font-weight: 700; font-size: 1.8rem; color:var(--blackColor);}
.listWrap.sf > .listItem > .sfDate{font-weight: 600; font-size: 1.5rem; color:var(--blackColor); letter-spacing:-1px;}
.listWrap.sf > .listItem > .bottom{display:flex; justify-content: space-between; align-items: center; font-weight: 600; font-size:1.3rem; margin-top:10px;}
.listWrap.sf > .listItem > .bottom > ul{display:flex; align-items: center;}
.listWrap.sf > .listItem > .bottom > ul > .editDate::before{content: "\e9c4"; display:inline-block; font-family: "xeicon"; font-size:1.3rem; color:var(--iconColor); margin-right:5px;}
.listWrap.sf > .listItem > .bottom > ul > li + li:before{content:''; display:inline-block; width:1px; height:13px; background:#ddd; margin:0 10px;}
.listWrap > .listItem > .con > .txt > .type{display:flex; align-items: center; padding:1px 0 5px 0;}
.listWrap.sf > .listItem > .bottom > .sfState{padding:4.5px 10px; color:#fff; width:7rem; border-radius: 50px; text-align: center; flex-shrink: 0;}
.listWrap.sf > .listItem > .bottom > .sfState.type1{background:#8e969c;}
.listWrap.sf > .listItem > .bottom > .sfState.type2{background:#005689;}


.listCon.sh > .topArea{height:53px;}
.listWrap.sh > .listItem:first-of-type{border-top:0px;}
.listWrap.sh > .listItem{border-bottom:1px solid #DDD; position: relative;}
.listWrap.sh > .listItem > .checkbox{position:absolute; right:20px; top:15px;}
.listWrap.sh > .listItem > .con{align-items: center;}
.listWrap.sh > .listItem > .con > .txt{width:100%;}
.listWrap.sh > .listItem > .con > .txt > .addDate{font-weight: 700; font-size: 1.3rem;}
.listWrap.sh > .listItem > .con > .txt > .date{font-weight: 700; font-size: 1.6rem; color:var(--blackColor); letter-spacing: -1px; padding-right:30px; display:flex;}
.listWrap.sh > .listItem > .con > .txt > .bottom{display:flex; justify-content: space-between; align-items: center; font-weight: 600; font-size:1.3rem; margin-top:3px; height:24.4px;}
.listWrap.sh > .listItem > .con > .txt > .bottom > .cont{margin-right:10px; width: calc(100% - 8rem) !important;}
.listWrap.sh > .listItem > .con > .txt > .bottom > .shState{padding:4.5px 10px; color:#fff; width:7rem; border-radius: 50px; text-align: center; flex-shrink: 0;}
.listWrap.sh > .listItem > .con > .txt > .bottom > .shState.type1{background:#8e969c;}
.listWrap.sh > .listItem > .con > .txt > .bottom > .shState.type2{background:#656EE1;}
.listWrap.sh > .listItem > .con > .txt > .bottom > .shState.type3{background:#005689;}
.listWrap.sh > .listItem > .con > .txt > .bottom > .shState.type4{background:#990033;}
.listWrap.sh > .listItem > .con > .txt > .bottom > .shState.type5{background:#ddd;}

.listWrap.sh > .listItem > .con > .txt > .atDate{display:flex; align-items: center;}
.listWrap.sh > .listItem > .con > .txt > .atDate > span{font-weight: 700; font-size: 1.6rem; letter-spacing: -1px;}
.listWrap.sh > .listItem > .con > .txt > .atDate > span:nth-of-type(1){color:var(--mainColor);}
.listWrap.sh > .listItem > .con > .txt > .atDate > span:nth-of-type(2){margin:0 10px;}
.listWrap.sh > .listItem > .con > .txt > .atDate > span.on{color:var(--blackColor);}

.listCon .pagingWrap{position: fixed; bottom:0px; width:100%; padding:9px 0; max-width: 640px; background:#fff;}

/* Form css */
.FormCon{background:#fff; position:relative; height:100%; padding:20px 20px 100px 20px; overflow-y:auto;}
/*.FormCon.edit{height:100%; padding:20px 20px 137px 20px;}*/

.FormCon.vc{height:calc(100% - 9.04rem);}
/*.FormCon.vc.edit{height:calc(100% - 9.04rem); padding-bottom:157px;}*/

.iconInput{display:flex; align-items: center; border-bottom: 1px solid #DDDDDD;}
.iconInput > .searchBtn{font-size:0px; margin-left:2rem;}
.iconInput > .searchBtn:after{content: "\e97a"; display:inline-block; font-family: "xeicon"; font-size:2rem; width:2rem; text-align: center; color: var(--iconColor);}
.iconInput input{border-bottom: none;}

.colsBox{display:flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #DDDDDD;}
.colsBox input{border-bottom: none;}
.colsBox > .checkbox{margin-left:2rem;}

/* btnArea */
.btnArea{padding:0 2rem; border-top:1px solid #DDDDDD; background:#fff; position:fixed; bottom:0px; width:100%; max-width: 640px; height:8rem; display: flex; align-items: center;}
.btnArea > button{width:100%;}

.btnArea.cols2{display: flex; align-items: center; justify-content: space-between; height:8rem;}
.btnArea.cols2 > button{width:calc(50% - 4px);}

.btnArea.cols3 > div{display: flex; align-items: center; justify-content: space-between; width:100%;}
.btnArea.cols3 > div > button:not(.delBtn){width:calc(((100% - 56px) / 2) - 4px);}

/* vacationList, otList */
.payReBtn{display:none;}
.payReBtn.view{display:flex;}

/* vacationAdd */
.dayOFF,.dayHarfOff{display:none;}
.dayOFF.on,.dayHarfOff.on{display:flex;}
.dayOFF{align-items: center;}
.dayOFF > .datepickerWrap{width:calc((100% - 50px) / 2);}
.dayOFF > span{width:50px; text-align: center;}

.dayHarfOff{align-items: center;}
.dayHarfOff > .datepickerWrap{width:calc((100% - 50px) / 2);}
.dayHarfOff > .radioArea{width:calc(((100% - 50px) / 2) + 50px); display:flex; align-items: center; padding-left:30px;}

.datepickerWrap{position:relative;}
.datepickerWrap > .dateBtn{position:absolute; top:50%; right:3px; transform:translateY(-50%); width:1.5rem;}
.datepickerWrap > input{position:relative; z-index: 1;}

/* ot */
.otList, .otEditList{display:none; width: 100%; height:calc(100% - 3.6rem);}
.otList.on, .otEditList.on{display:inline-block;}

.timeArea{display:flex; align-items: center;}
.timeArea > span{width:50px; text-align: center;}
.timeArea > .select_box{width:calc((100% - 50px) / 2);}

/* sfTraning */
.datepickerArea{display:flex; align-items: center;}
.datepickerArea > .datepickerWrap{width:calc((100% - 50px) / 2);}
.datepickerArea > span{width:50px; text-align: center;}

.imgListWrap{display: flex; flex-wrap: nowrap; padding:10px 0;}

.imgListWrap .imgaddBtn,
.imgListWrap .imgbox{margin-right:10px; display:inline-block; width: 76px; height: 76px; border: 1px solid #DDDDDD; border-radius: 4px; cursor:pointer;}

.imgListWrap .imgaddBtn > label,
.imgListWrap .imgbox > label{display:flex; flex-direction: column; justify-content: center; align-items: center; width:100%; height:100%;}

.imgListWrap .imgaddBtn input[type=file]{display:none;}
.imgListWrap .imgaddBtn span > i.on{color:#E96B35;}

.imgListWrap > .imgViewWrap{width:calc(100% - 86px); overflow-y: auto;}

.formItem.img{border-bottom: 1px solid #DDDDDD;}
.formItem.img > span{margin-bottom:10px; display: inline-block;}

.imgViewWrap > div{white-space: nowrap;}
.imgViewWrap > div > .imgbox{position:relative; display: inline-block;}
.imgViewWrap > div  > .imgbox > .imgView{object-fit: cover; width:100%; height:100%;}
.imgViewWrap > div  > .imgbox > .imgDelBtn{font-size:0px; width: 24px; height: 24px; background:#727C83; border-radius: 5px; position:absolute; top:0px; right:0px; z-index: 1;}
.imgViewWrap > div  > .imgbox > .imgDelBtn::after{content: "\e921"; display:inline-block; font-family: "xeicon"; font-size:1.4rem; color: #fff; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}

.formItem.flex.sing > div:first-child{width:calc(100% - 120px); margin-right:10px;}
.formItem.flex.sing > div:last-child{width:120px;}

.formItem.flex > div > .radioArea{height:36px; margin:10px 0; display: flex; align-items: center;}

.formItem.flex.sing > div > .sfSignBtn{margin:10px 0; width: 110px; text-align: center; height: 36px; border: 1.5px solid #DDDDDD; border-radius: 4px; color:var(--blackColor);}
.formItem.flex.sing > div > .sfSignBtn > span{color:#E96B35;}


/* imgViewer */
.imgViewer{display:none; position:fixed; top:0; bottom:0; width:100%; max-width: 640px; z-index: 11; background:rgba(0,0,0,0.9); justify-content: center; align-items: center;}
.imgViewer.view{display:flex;}
.imgViewer > .closeBtn{font-size:0px; position: absolute; right:10px; top:10px; cursor: pointer;}
.imgViewer > .closeBtn:after{content: "\e921"; display:inline-block; font-family: "xeicon"; font-size:2.3rem; color:#fff;}

.imgViewer > .imgArea{max-height: 90%; height: 100%;}
.imgViewer > .imgArea > img{width:100%; height:100%; object-fit: contain;}


/* sfPop */
.sfPop{background:#fff;}
.sfPop.sing > .main{height:calc(100% - (6.4rem + 8.24rem)); overflow-y: scroll; }
.sfPop.notice > .main{height:calc(100% - (6.4rem + 6rem)); overflow-y: scroll; }
.sfPop.sing .notice{display:none;}
.sfPop.notice .singArea{display:none;}


.sfPop > .main > div > img{width:100%; object-fit: cover;}
.sfPop > .footer{height:auto;}
.sfPop > .footer > div{display:flex; align-items: center; height:100%; padding:20px;}
.sfPop > .footer2{height:auto;}
.sfPop > .footer2 > div{display:flex; align-items: center; height:100%; padding:10px;}

.singArea{justify-content: space-between;}
.singArea input{border:0px; padding:8px; width:100%;}
.singArea input:focus{border:0px;}
.singArea > label{border:1px solid #DDDDDD; position:relative; display:inline-block;}
.singArea > label > span{background:#fff; position:absolute; left:10px; top: -7px; display:inline-block; padding:0 5px;}
.singArea > label:focus-within{border: 1px solid var(--subColor);}

.singArea > label:first-child{width:100px;}
.singArea > label:nth-of-type(2){width:calc(100% - 180px);}
.singArea > .btn{height:41.6px; width:70px;}

.singArea2{justify-content: flex-start;}
.singArea2 input{border:0px; padding:8px; width:100%;}
.singArea2 input:focus{border:0px;}
.singArea2 > label{border:1px solid #DDDDDD; position:relative; display:inline-block;}
.singArea2 > label > span{background:#fff; position:absolute; left:10px; top: -7px; display:inline-block; padding:0 5px;}
.singArea2 > label:focus-within{border: 1px solid var(--subColor);}

.singArea2 > label:first-child{width:200px;}
.singArea2 > .btn{height:41.6px; width:80px;}

/* pjListPop */
.pjListPop{background:#fff;}
.pjListPop > .main{height:100%;}
.pjListPop > .main > section:nth-of-type(2){height:calc(100% - 11.48rem); overflow-y: auto; }

/* pjListPop */
.singListPop{background:#fff;}
.singListPop > .main{height:calc(100% - 6.4rem);}
.singListPop > .main > .listCon{height:calc(100% - 40px); overflow-y: auto; display:none;} 
.singListPop > .main > .listCon.view{display:inline-block; width:100%;}
.singListPop > .main > .listCon > .topArea{height:49.2px;}

/* approvalLinePop */
.approvalLinePop{background:#fff;}
.approvalLinePop > .main{height:calc(100% - (8rem + 6.4rem)); padding:20px; display: flex; flex-direction: column; justify-content: space-between;}

.approvalLinePop > .main > section{height:calc((100% / 3) + 4.8rem); flex-basis:calc((100% / 3) + 4.8rem);}
.approvalLinePop > .main > section + section{margin-top:2.4rem;} 
.approvalLinePop > .main > section > .top{display:flex; justify-content: space-between; align-items: center;}
.approvalLinePop > .main > section > .top > .tit{font-size:15px; font-weight: 600; color:var(--blackColor);}

.approvalLinePop > .main > section > .con{border:1px solid #ddd; border-radius: 5px; margin-top:10px; height:calc(100% - 35.2px); overflow-y: auto;}
.approvalLinePop > .main > section > .con > ul > li{display:flex; justify-content: space-between; align-items: center; padding:10px 15px;}
.approvalLinePop > .main > section > .con > ul > li + li{border-top:1px solid #ddd;}
.approvalLinePop > .main > section > .con > ul > li:last-child{border-bottom:1px solid #ddd;}
.approvalLinePop > .main > section > .con > ul > li > .name{color:var(--blackColor); font-size:1.4rem;}
.approvalLinePop > .main > section > .con > ul > li > .name > span{font-weight:600; width:30px; display:inline-block;}

.listBtnArea > .listBtn{font-size:0px; cursor: pointer;}
.listBtnArea > .listBtn + .listBtn{margin-left:5px;}
.listBtnArea > .listBtn:after{font-family: xeicon; display:inline-block; font-size:1.7rem; color:var(--iconColor);}
.listBtnArea > .listBtn.upBtn:after{content: "\e944";}
.listBtnArea > .listBtn.downBtn:after{content: "\e941";}
.listBtnArea > .listBtn.delBtn:after{content: "\e96f";}

/* departSearchPop */
.departSearchPop{background:#fff;}
.departSearchPop > .main{height:calc(100% - (8rem + 6.4rem));}

.departSearchPop .searchArea > .select_box > select{width:100px;}
.departSearchPop .searchArea > input{width:calc(100% - 170.59px); margin:0px;}
.executives .listCon{height:calc(100vh - (61.6px + 36px + 80px + 64px));}
.department .listCon{height:calc(100vh - (80px + 40px + 64px));}

.treeList .listIcon{font-size:0px; display: inline-block; width: auto;}
.treeList .listIcon:after{font-family:xeicon; display:inline-block; font-size:2.2rem;}
.treeList .listIcon.down:after{content: "\e942";}
.treeList .listIcon.up:after{content: "\e945";}

.treeList > li div.people > .icon:after{font-family:xeicon; display:inline-block; font-size:2rem; content: "\e9f3"; color:#fff; margin-right:10px;}
.treeList > li div.folder > .icon:after{font-family:xeicon; display:inline-block; font-size:2rem; content: "\eaa1"; color:#fff; margin-right:10px;}

.treeList > li div.people > .checkedIcon{margin-left:auto; display:none;}
.treeList > li div.people.on{background:var(--subColor);}
.treeList > li div.people.on > .checkedIcon{display:inline-block;}
.treeList > li div.people > .checkedIcon:after{font-family:xeicon; display:inline-block; font-size:2rem; content: "\e928"; color:#fff;}

.treeList > li{border-bottom:1px solid #ddd;}
.treeList > li > .dap1{display:flex; justify-content: space-between; padding:10px 20px; cursor: pointer; align-items: center; height:45px;}
.treeList > li > .dap1 > span{font-weight: 600;}

.treeList > li > ul > li + li{border-top:1px solid #fff;}
.treeList > li .dap2{display:flex; padding:10px 20px 10px 30px; cursor: pointer; align-items:center; height:45px; color:#fff; background:var(--textColor);}

.treeList > li .dap2 > .listIcon{margin-left:auto;}
.treeList > li .dap2 > span{display:inline-block;}
.treeList > li .dap2 > span:first-of-type{font-weight:600; font-size:14px; margin-top:-1px;}
.treeList > li .dap2 > span:nth-of-type(2){font-size:13px; margin-left:5px;}

.treeList .dap3Wrap > li + li{border-top:1px solid #fff;}
.treeList > li .dap3{display:flex; padding:10px 20px 10px 40px; cursor: pointer; align-items:center; background:var(--iconColor); color:#fff; height:45px;}
.treeList > li .dap3 > span{display:inline-block;}
.treeList > li .dap3 > span:first-of-type{font-weight:600; font-size:14px; margin-top:-1px;}
.treeList > li .dap3 > span:nth-of-type(2){font-size:13px; margin-left:5px;}

.treeList .dap4Wrap > li + li{border-top:1px solid #fff;}

.dap2Wrap, .dap3Wrap{display:none;}

.department, .executives{display:none;}
.department.view, .executives.view{display:block;}

.executives .dap1{justify-content: start !important;}
.executives .dap1.on{color:#fff;}
.executives .dap1 > span{display:inline-block;}
.executives .dap1 > span:first-of-type{font-weight:600; font-size:14px; margin-top:-1px;}
.executives .dap1 > span:nth-of-type(2){font-size:13px; margin-left:5px;}


/* subHoli */
.workWrap, .chgWrap{display:none; width: 100%; height:calc(100% - 3.6rem);}
.workWrap.on, .chgWrap.on{display:block;}

.formItem.flex .datepickerWrap > input{border-bottom:0px;}

.formItem.flex.type2{justify-content: space-between;}
.formItem.flex.type2 > div{width:calc((100% / 3) - 20px);}
.formItem.flex.type2 > div:not(:first-child){display: flex; align-items: flex-end;}
.formItem.flex.type2 > div > .select_box{border-bottom:0px;}

/* 공지사항 */
.noticePart{display:none;}
.noticePart.on{display:inline-block; width: 100%;}
.noticePart > div{border:1px solid #DDDDDD; border-radius: 10px; margin:10px 0; overflow-y: auto; height: 200px;}
.noticePart .treeList > li{display:flex; padding:10px 20px; cursor: pointer; align-items: center;}
.noticePart .treeList > li:last-child{border-bottom:0px;}