@charset "UTF-8";
/* --------------------
 * Last Modified: 2023-11-01
 -------------------- */
@import "base/normalize.css";
@font-face {
  font-family: "ONE-Mobile-Regular";
  src: url("../../font/ONE Mobile Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ONE-Mobile-Title";
  src: url("../../font/ONE Mobile Title.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 900;
  src: url("../../font//Pretendard/Pretendard-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 800;
  src: url("../../font/Pretendard/Pretendard-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  src: url("../../font/Pretendard/Pretendard-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  src: url("../../font/Pretendard/Pretendard-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 500;
  src: url("../../font/Pretendard/Pretendard-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  src: url("../../font//Pretendard/Pretendard-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 300;
  src: url("../../font/Pretendard/Pretendard-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 200;
  src: url("../../font/Pretendard/Pretendard-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 100;
  src: url("../../font/Pretendard/Pretendard-Thin.ttf") format("truetype");
}
/* ] -- navigation -- [ */
/*]-- border / boxs --[*/
/* ] ------- 공통 class ------ [ */
/* ] flex [ */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*]-- 색상 --[*/
/*]-- 출근 형태 색상 --[*/
/*]-- 이미지 경로 --[*/
/*]-- 폰트 --[*/
@keyframes rise {
  50% {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    /* IE 9 */
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
  }
}
@keyframes fall {
  50% {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    /* IE 9 */
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(30deg);
  }
}
@keyframes fade {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4156862745);
  z-index: 999999;
  display: none;
}
.container h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.6rem;
  text-align: center;
  width: 15.5rem;
  margin-top: 2rem;
  animation: fade 2s infinite;
}
.container .stick {
  width: 30px;
  height: 3px;
  background: #fff;
  display: inline-block;
  margin-left: -8px;
}
.container .stick:nth-child(n) {
  transform: rotate(30deg);
  animation: fall 2s infinite;
}
.container .stick:nth-child(2n) {
  transform: rotate(-30deg);
  animation: rise 2s infinite;
}

.alertModal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 99999;
  display: none;
}
.alertModal .alertContent {
  width: 25rem;
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-flow: column;
  text-align: center;
}
.alertModal .alertContent .alertMessage {
  width: 100%;
  font-size: 1.6rem;
  margin: 1.6rem 0 3.3rem 0;
  font-weight: 700;
}
.alertModal .alertContent .alertMessage p {
  font-size: 1.5rem;
}
.alertModal .alertContent .alertMessage > p:nth-child(2) {
  margin-top: 1.2rem;
}
.alertModal .alertContent .checkBtnWarp {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin-top: -1.5rem;
}
.alertModal .alertContent .checkBtnWarp > div {
  cursor: pointer;
  padding: 1rem 2rem;
  border: none;
  display: flex;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}
.alertModal .alertContent .confirmBtn {
  background-color: #007AFF;
  font-size: 1.6rem;
  color: #fff;
}
.alertModal .alertContent .cancelBtn {
  background-color: #FF3B30;
  font-size: 1.6rem;
  color: #fff;
}

.noticeModal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 999999;
  display: none;
}
.noticeModal .noticeContent {
  width: 25rem;
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-flow: column;
  text-align: center;
}
.noticeModal .noticeContent .noticeMessage {
  width: 100%;
  font-size: 1.6rem;
  margin: 1.6rem 0 3.3rem 0;
  font-weight: 700;
  max-height: 25rem;
  overflow: auto;
}
.noticeModal .noticeContent .noticeMessage p {
  font-size: 1.5rem;
  word-break: break-all;
}
.noticeModal .noticeContent .noticeMessage > p:nth-child(2) {
  margin-top: 1.2rem;
}
.noticeModal .noticeContent .checkBtnWarp {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin-top: -1.5rem;
}
.noticeModal .noticeContent .checkBtnWarp > div {
  cursor: pointer;
  padding: 1rem 2rem;
  border: none;
  display: flex;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}
.noticeModal .noticeContent .okBtn {
  background-color: #007AFF;
  font-size: 1.6rem;
  color: #fff;
}
.noticeModal .noticeContent .cancelBtn {
  background-color: #FF3B30;
  font-size: 1.6rem;
  color: #fff;
}

/*-- ] 근무형태 chips [ --*/
.workChips {
  display: inline-flex;
  padding: 2px 4px;
  border-radius: 4px;
  box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.1);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.22px;
  color: #ffffff;
}

.outsideOffice {
  background-color: #00C7BE;
}

.dayOff {
  background-color: #64D2FF;
}

.halfOff {
  background-color: #64D2FF;
}

.workHome {
  background-color: #FFCC00;
}

.dispatch {
  background-color: #FF9500;
}

.officeWork {
  background-color: #0A84FF;
}

.undetermined {
  background-color: #3C3C43;
}

/*-- ] 상태 chips [ --*/
.statusSmallChips {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.24px;
}

.statusBigChips {
  display: inline-flex;
  padding: 8px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.work {
  color: #ffffff;
  background-color: #007AFF;
}

.resignation {
  color: #636366;
  background-color: rgba(235, 235, 245, 0.6);
}

* {
  color: #3C3C43;
  text-decoration: none;
  font-family: "ONE-Mobile-Regular", sans-serif;
  font-style: normal;
}

html {
  font-size: 10px;
}

html, body {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100dvh; /* 기본 높이를 vh로 설정 */
  overflow: hidden;
  background-color: #F2F2F7;
}

.android-naver html, .android-naver body {
  height: 100vh;
}

@media (min-width: 769px) {
  html {
    background-color: #fff;
  }
  body {
    border: 0.5px solid rgba(0, 0, 0, 0.3019607843);
    border-radius: 0.8rem;
    position: relative;
    max-width: 50rem;
    max-height: 90rem;
  }
}
@media only screen and (max-device-width: 740px) {
  .screen {
    height: calc(var(--vh, 1vh) * 100);
  }
}
.header {
  background-color: #FFF;
  width: 100%;
  height: 7.2rem;
  display: flex;
  justify-content: space-between;
}
.header > .leftHeader {
  padding: 2.4rem 0 0 2.4rem;
}
.header > .leftHeader > #currentDate {
  font-size: 2rem;
  font-family: "ONE-Mobile-Title";
  font-weight: 400;
  line-height: 2.4rem;
}
.header > .rightHeader {
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 2.4rem 2.4rem 0 0;
}
.header > .rightHeader > .clockImg {
  width: 2rem;
  height: 2rem;
  background-image: url("./../../img/clock_blue.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 0.2em;
}
.header > .rightHeader > #currentTime {
  text-align: right;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.2rem;
  letter-spacing: -0.32px;
  color: #007AFF;
}

.footer {
  width: 100%;
  height: 8.4rem;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.footer > .navBox {
  width: 100%;
  height: 4.9rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
.footer > .navBox > .myAttendanceBtn {
  width: 6.4rem;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  filter: grayscale(1);
  opacity: 0.9;
  cursor: pointer;
}
.footer > .navBox > .myAttendanceBtn > .imgBox {
  width: 3.2rem;
  height: 3.2rem;
  background-image: url("./../img/clock_blue.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.footer > .navBox > .myAttendanceBtn > .mentBox {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4rem;
  margin-top: 0.3rem;
  color: #007AFF;
}
.footer > .navBox > .totalAttendanceBtn {
  width: 6.4rem;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  filter: grayscale(1);
  opacity: 0.9;
  cursor: pointer;
}
.footer > .navBox > .totalAttendanceBtn > .imgBox {
  width: 3.2rem;
  height: 3.2rem;
  background-image: url("./../img/supervised_user_circle.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.footer > .navBox > .totalAttendanceBtn > .mentBox {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4rem;
  margin-top: 0.3rem;
  color: #007AFF;
}
.footer > .navBox > .myInfoBtn {
  width: 6.4rem;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  filter: grayscale(1);
  opacity: 0.9;
  cursor: pointer;
}
.footer > .navBox > .myInfoBtn > .imgBox {
  width: 3.2rem;
  height: 3.2rem;
  background-image: url("./../img/person_pin.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.footer > .navBox > .myInfoBtn > .mentBox {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4rem;
  margin-top: 0.3rem;
  color: #007AFF;
}
.footer > .navBox > .reservationBtn {
  width: 6.4rem;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  filter: grayscale(1);
  opacity: 0.9;
  cursor: pointer;
}
.footer > .navBox > .reservationBtn > .imgBox {
  width: 3.2rem;
  height: 3.2rem;
  background-image: url("./../img/Calender.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.footer > .navBox > .reservationBtn > .mentBox {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4rem;
  margin-top: 0.3rem;
  color: #007AFF;
}
.footer > .navBox > .communityBoardBtn {
  width: 6.4rem;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  filter: grayscale(1);
  opacity: 0.9;
  cursor: pointer;
}
.footer > .navBox > .communityBoardBtn > .imgBox {
  width: 3.2rem;
  height: 3.2rem;
  background-image: url("./../img/lunch.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.footer > .navBox > .communityBoardBtn > .mentBox {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4rem;
  margin-top: 0.3rem;
  color: #007AFF;
}
.footer > .navBox > .managementBtn {
  width: 6.4rem;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  filter: grayscale(1);
  opacity: 0.9;
  cursor: pointer;
}
.footer > .navBox > .managementBtn > .imgBox {
  width: 3.2rem;
  height: 3.2rem;
  background-image: url("./../img/settings_applications.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.footer > .navBox > .managementBtn > .mentBox {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4rem;
  margin-top: 0.3rem;
  color: #007AFF;
}
.footer > .navBox .navHighlight {
  filter: grayscale(0);
}

.btnWrap {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  border-radius: 12px;
  background-color: #007AFF;
  cursor: pointer;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: #fff;
}

.mainContent {
  width: 100%;
  height: calc(100% - 7.2rem - 8.4rem);
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}
.mainContent > .logoBox {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 3.5rem;
}
.mainContent > .logoBox > .logoImg {
  width: 13rem;
  height: 15rem;
  background-image: url("../../img/charImg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.mainContent > .mentionBox {
  width: 100%;
  height: 5.6rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.mainContent > .mentionBox > .mainMention {
  margin-bottom: 0.8rem;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: -0.4px;
}
.mainContent > .mentionBox > .subMention {
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: -0.32px;
}
.mainContent > .mentionBox > .subMention#airCondition {
  margin-top: 0.8rem;
}
.mainContent > .mentionBox > .subMention#airCondition div {
  display: flex;
  align-items: center;
}
.mainContent > .mentionBox > .subMention#airCondition div span {
  font-size: 1rem;
}
.mainContent > .mentionBox > .subMention#airCondition div .circle {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin: 0 0.6rem;
}
.mainContent > .mentionBox > .subMention#airCondition div .circle.redCircle {
  background-color: red;
}
.mainContent > .mentionBox > .subMention#airCondition div .circle.blueCircle {
  background-color: #007AFF;
}
.mainContent > .mentionBox > .subMention#airCondition div .circle.greenCircle {
  background-color: #00C7BE;
}
.mainContent > .attendanceBox {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 4em;
  padding: 0 2.4rem;
}
.mainContent .gap-8 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.mainContent .separate {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  width: 33.3333333333%;
  border-radius: 12px;
  background-color: #007AFF;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: #fff;
}

.mainContent {
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-flow: column nowrap;
  overflow-y: auto;
}
.mainContent .checkinHeaderBox, .mainContent .checkOutBox .checkoutHeaderBox {
  height: 2.2rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 0 1.6rem 0 1.6rem;
}
.mainContent .checkinHeaderBox .leftBox, .mainContent .checkOutBox .checkoutHeaderBox .leftBox {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.2rem;
  text-align: center;
}
.mainContent .checkinHeaderBox .rightBox, .mainContent .checkOutBox .checkoutHeaderBox .rightBox {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.2rem;
  text-align: center;
  letter-spacing: -0.28px;
}
.mainContent::-webkit-scrollbar {
  display: none;
}
.mainContent .checkInBox {
  padding: 1.6rem 1.6rem 0.8rem 1.6rem;
}
.mainContent .checkInBox .checkInStatus {
  height: 50vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 1.6rem;
  gap: 0.8rem;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox,
.mainContent .checkInBox .checkInStatus .outsideStatusBox,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox {
  width: 50%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 1.6rem 0;
  height: calc(100% - 1.6rem);
  border-radius: 1.6rem;
  background-color: #FFFFFF;
  overflow-y: hidden;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .outsideStatusBox::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox::-webkit-scrollbar {
  display: none;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox::-webkit-scrollbar-thumb,
.mainContent .checkInBox .checkInStatus .outsideStatusBox::-webkit-scrollbar-thumb,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox::-webkit-scrollbar-thumb {
  display: none;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox::-webkit-scrollbar-track,
.mainContent .checkInBox .checkInStatus .outsideStatusBox::-webkit-scrollbar-track,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox::-webkit-scrollbar-track {
  display: none;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox::-webkit-scrollbar-corner,
.mainContent .checkInBox .checkInStatus .outsideStatusBox::-webkit-scrollbar-corner,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox::-webkit-scrollbar-corner {
  display: none;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox .statusHeader,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .statusHeader,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .statusHeader {
  margin-bottom: 1.6rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  line-height: 1.6rem;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.4rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: calc(100% - 3.2rem);
  margin-left: 1.8rem;
  overflow-y: auto;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus::-webkit-scrollbar,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus::-webkit-scrollbar {
  display: none;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus > div,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus > div,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus > div,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus > div,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus > div,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus > div,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus > div,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus > div,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus > div,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus > div,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus > div,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus > div {
  font-size: 1.2rem;
  font-style: normal;
  font-font-weight: 400;
  line-height: 2rem;
  text-align: center;
  letter-spacing: 0.28px;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus div,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus div,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus div,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus div,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus div,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus div,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus div,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus div,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus div,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus div,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus div,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus div {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus div .leaveStatus,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus div .leaveStatus {
  display: flex;
  align-items: flex-end;
  width: 1.5rem;
  height: 0.65rem;
  background-color: #fff;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus div .leaveStatus img,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus div .leaveStatus img {
  width: 1.5rem;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus div p:first-child,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus div p:first-child {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}
.mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus div p:first-child.inOffice, .mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus div p:first-child.inOutside, .mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus div p:first-child.inHouse, .mainContent .checkInBox .checkInStatus .insideStatusBox .insideStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .insideStatusBox .outsideStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .insideStatusBox .dispatchStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .insideStatusBox .homeWorkStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .insideStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .outsideStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .dispatchStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .outsideStatusBox .homeWorkStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .insideStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .outsideStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .dispatchStatus div p:first-child.inDispatch,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus div p:first-child.inOffice,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus div p:first-child.inOutside,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus div p:first-child.inHouse,
.mainContent .checkInBox .checkInStatus .dispatchStatusBox .homeWorkStatus div p:first-child.inDispatch {
  background-color: #0A84FF;
}
.mainContent .checkInBox .checkInStatus .outsideStatus,
.mainContent .checkInBox .checkInStatus .homeWorkStatus {
  overflow-y: auto;
  height: calc(50% - 3.2rem);
}
.mainContent .checkInBox .checkInStatus .outsideStatus.outsideStatus,
.mainContent .checkInBox .checkInStatus .homeWorkStatus.outsideStatus {
  margin-bottom: 0.8rem;
}
.mainContent .checkOutBox {
  padding: 0.8rem 1.6rem 1.6rem 1.6rem;
  display: flex;
  flex-flow: column wrap;
}
.mainContent .checkOutBox > .checkOutStatus {
  height: 50vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 1.6rem;
  gap: 0.8rem;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox,
.mainContent .checkOutBox > .checkOutStatus .vacationBox,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox {
  width: 50%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 1.6rem 0;
  height: calc(100% - 1.6rem);
  border-radius: 1.6rem;
  background-color: #FFFFFF;
  overflow-y: hidden;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .vacationBox::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox::-webkit-scrollbar {
  display: none;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox::-webkit-scrollbar-thumb,
.mainContent .checkOutBox > .checkOutStatus .vacationBox::-webkit-scrollbar-thumb,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox::-webkit-scrollbar-thumb {
  display: none;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox::-webkit-scrollbar-track,
.mainContent .checkOutBox > .checkOutStatus .vacationBox::-webkit-scrollbar-track,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox::-webkit-scrollbar-track {
  display: none;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox::-webkit-scrollbar-corner,
.mainContent .checkOutBox > .checkOutStatus .vacationBox::-webkit-scrollbar-corner,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox::-webkit-scrollbar-corner {
  display: none;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .statusHeader,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .statusHeader,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .statusHeader {
  margin-bottom: 1.6rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  line-height: 1.6rem;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.4rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: calc(100% - 3.2rem);
  margin-left: 1.8rem;
  overflow-y: auto;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation::-webkit-scrollbar,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork::-webkit-scrollbar {
  display: none;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork > div,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation > div,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork > div,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork > div,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation > div,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork > div,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork > div,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation > div,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork > div {
  font-size: 1.2rem;
  font-style: normal;
  font-font-weight: 400;
  line-height: 2rem;
  text-align: center;
  letter-spacing: 0.28px;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork > div,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation > div,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork > div,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork > div,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation > div,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork > div,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork > div,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation > div,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork > div {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork > div .leaveStatus,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation > div .leaveStatus,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork > div .leaveStatus,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork > div .leaveStatus,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation > div .leaveStatus,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork > div .leaveStatus,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork > div .leaveStatus,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation > div .leaveStatus,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork > div .leaveStatus {
  display: flex;
  align-items: flex-end;
  width: 1.5rem;
  height: 0.65rem;
  background-color: #fff;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork > div .leaveStatus img,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation > div .leaveStatus img,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork > div .leaveStatus img,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork > div .leaveStatus img,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation > div .leaveStatus img,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork > div .leaveStatus img,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork > div .leaveStatus img,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation > div .leaveStatus img,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork > div .leaveStatus img {
  width: 1.5rem;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork > div p:first-child,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation > div p:first-child,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork > div p:first-child,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork > div p:first-child,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation > div p:first-child,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork > div p:first-child,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork > div p:first-child,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation > div p:first-child,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork > div p:first-child {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork > div p:first-child.notWorking,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation > div p:first-child.notWorking,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork > div p:first-child.notWorking,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork > div p:first-child.notWorking,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation > div p:first-child.notWorking,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork > div p:first-child.notWorking,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork > div p:first-child.notWorking,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation > div p:first-child.notWorking,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork > div p:first-child.notWorking {
  background-color: #FF9500;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork > div p:first-child.inVacation {
  background-color: #FFCC00;
}
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork > div p:first-child.leaveWork, .mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .beforeWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation > div p:first-child.leaveWork,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .vacation > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork > div p:first-child.leaveWork,
.mainContent .checkOutBox > .checkOutStatus .beforeWorkBox .afterWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork > div p:first-child.leaveWork,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .beforeWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation > div p:first-child.leaveWork,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .vacation > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork > div p:first-child.leaveWork,
.mainContent .checkOutBox > .checkOutStatus .vacationBox .afterWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork > div p:first-child.leaveWork,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .beforeWork > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation > div p:first-child.leaveWork,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .vacation > div p:first-child.inVacation,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork > div p:first-child.leaveWork,
.mainContent .checkOutBox > .checkOutStatus .afterWorkBox .afterWork > div p:first-child.inVacation {
  background-color: #3C3C43;
}

.checkoutNotice {
  font-size: 1.2rem !important;
  margin-top: 0.4rem;
  color: #FF3B30;
}

.vacationBoxMain {
  width: 100%;
  height: calc(100% - 7.2rem - 8.4rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vacationBoxMain .bubbleBox {
  background-color: #fff;
  padding: 1.2rem 2.4rem;
  border-radius: 1.2rem;
  position: relative;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.168627451);
}
.vacationBoxMain .bubbleBox::before {
  content: "";
  position: absolute;
  border-top: 15px solid #fff;
  border-left: 15px solid transparent;
  bottom: -15px;
  left: 100px;
}
.vacationBoxMain .bubbleBox .helloTitle {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
}
.vacationBoxMain .bubbleBox .helloTitle span {
  background: linear-gradient(to top, #bedfff 40%, transparent 40%);
}
.vacationBoxMain .bubbleBox .helloTitle span.strongText {
  font-size: 2.2rem;
}
.vacationBoxMain .mainMention {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 0.8rem;
}
.vacationBoxMain .subMention {
  font-size: 1.2rem;
  text-align: center;
}
.vacationBoxMain .logoBox {
  width: 100%;
  height: 12rem;
  display: flex;
  justify-content: center;
}
.vacationBoxMain .logoBox .vacationImg {
  width: 16rem;
  height: 12rem;
  background-image: url("../../img/leave_character.png");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
}

.mainContent.checkoutPage {
  width: 100%;
  height: calc(100% - 7.2rem - 8.4rem);
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}
.mainContent.checkoutPage .noticeText {
  padding: 41px 0;
  text-align: center;
  color: #000000;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: -0.32px;
}

.checkoutContainer {
  height: 100%;
  padding: 3.2rem 1.6rem 4rem;
}
.checkoutContainer .logoBox {
  width: 100%;
  height: 12rem;
  display: flex;
  justify-content: center;
}
.checkoutContainer .logoBox .logoImg {
  margin-left: 2rem;
  width: 16rem;
  height: 12rem;
  background-image: url("../../img/charImg2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.checkoutContainer .airConditionBox {
  width: 100%;
  display: flex;
  justify-content: center;
}
.checkoutContainer #airCondition {
  margin-top: 0.8rem;
  height: 14px;
}
.checkoutContainer #airCondition div {
  display: flex;
  align-items: center;
}
.checkoutContainer #airCondition div span {
  font-size: 1rem;
}
.checkoutContainer #airCondition div .circle {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin: 0 0.6rem;
}
.checkoutContainer #airCondition div .circle.redCircle {
  background-color: red;
}
.checkoutContainer #airCondition div .circle.blueCircle {
  background-color: #005aff;
}
.checkoutContainer #airCondition div .circle.greenCircle {
  background-color: #00C7BE;
}
.checkoutContainer .mentionBox {
  width: 100%;
  height: 5.6rem;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
.checkoutContainer .mentionBox .mainMention {
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: -0.4px;
}
.checkoutContainer .mentionBox .subMention {
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: -0.32px;
}
.checkoutContainer .attendanceBox {
  width: calc(100% - 4.8rem);
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 2.4rem;
  padding: 0 2.4rem;
}
.checkoutContainer .attendanceBox > :nth-child(2) {
  margin-bottom: 1.6rem;
}
.checkoutContainer .workTimeContainer {
  max-width: 36.1rem;
  margin: 2rem auto 0;
  padding: 1.6rem;
  border-radius: 1.2rem;
  background-color: #fff;
}
.checkoutContainer .workTimeContainer .workStatus {
  margin-bottom: 1.6rem;
}
.checkoutContainer .workTimeContainer .workStatus:first-child .date {
  color: #8e8e93;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.28px;
}
.checkoutContainer .workTimeContainer .workStatus:last-child {
  margin-bottom: 0;
}
.checkoutContainer .workTimeContainer .workStatus p {
  color: #000000;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6rem;
  letter-spacing: -0.28px;
}
.checkoutContainer .workTimeContainer .workStatus.borderTop {
  padding-top: 1.6rem;
  border-top: 1px solid #f2f2f7;
}
.checkoutContainer .timeCheckWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.checkoutContainer .timeCheckWrap .time {
  gap: 1.2rem;
  width: 100%;
  max-width: 34.5rem;
  height: 4.8rem;
  margin-bottom: 1.6rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(60, 60, 67, 0.18);
  background-color: #ffffff;
}
.checkoutContainer .timeCheckWrap .time span {
  color: #000;
  font-size: 1.6rem;
  font-weight: 700;
}
.checkoutContainer .timeCheckWrap .time select {
  padding: 0 5px;
  color: #000;
  text-align: center;
  background-color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.checkoutContainer .timeCheckWrap .recordButton {
  width: 100%;
  max-width: 34.5rem;
  height: 5rem;
  border-radius: 1.2rem;
  background-color: #007AFF;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.2rem;
  letter-spacing: -0.4px;
}

.modifyModal {
  width: 100%;
  height: calc(100% - 8.4rem);
  position: absolute;
  top: 0%;
  right: 0;
  bottom: 0%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: end;
  z-index: 99999;
  display: none;
}
.modifyModal .modifyBox {
  background-color: #F2F2F7;
  width: 100%;
  height: 90;
  display: flex;
  flex-flow: column wrap;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
.modifyModal .modifyBox .headerBox {
  height: 5.2rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  background-color: #FFFFFF;
  padding: 0 2.4rem 0 2.4rem;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
.modifyModal .modifyBox .headerBox .leftBox,
.modifyModal .modifyBox .headerBox .rightBox {
  display: flex;
  align-items: center;
}
.modifyModal .modifyBox .headerBox .leftBox > p,
.modifyModal .modifyBox .headerBox .rightBox > p {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4rem;
  text-align: center;
}
.modifyModal .modifyBox .headerBox .rightBox > p {
  cursor: pointer;
}
.modifyModal .modifyBox .mainBox {
  width: 100%;
  height: calc(100% - 5.2rem);
  padding: 0 2.4rem 0 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.modifyModal .modifyBox .mainBox .modifyRadioBox > label {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  height: 2rem;
  align-items: center;
  margin-top: 2rem;
}
.modifyModal .modifyBox .mainBox .changePlaceSaveBtn {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: 1.6rem;
  background-color: #007aff;
  cursor: pointer;
  pointer-events: none;
  filter: grayscale(100%);
  font-size: 1.7rem;
  font-font-style: normal;
  font-font-weight: 700;
  font-line-height: 2.2rem;
  font-letter-spacing: -0.4px;
  color: #fff;
  border-radius: 1.2rem;
}

.workChips {
  cursor: pointer;
}

@media (min-width: 769px) {
  html {
    background-color: #fff;
  }
  body .noticeText {
    font-size: 1.8rem !important;
  }
  body .checkoutContainer {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }
  body .checkoutContainer .workTimeContainer {
    max-width: none;
    margin: 0;
  }
  body .checkoutContainer .timeCheckWrap .time {
    max-width: none;
  }
  body .checkoutContainer .timeCheckWrap .recordButton {
    max-width: none;
  }
}
.loginPage {
  width: 100%;
  height: 100%;
  background-color: #F2F2F7;
  overflow: hidden;
}
.loginPage .pageHeader {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 2.4rem;
}
.loginPage .pageHeader .logoImg {
  margin-top: 2rem;
  width: 10.3rem;
  height: 8rem;
  background-image: url("../../img/charImg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.loginPage .pageHeader .welcomeMention {
  display: none;
  margin-top: 1.5rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.2rem;
  color: #32ADE6;
}
.loginPage .btnWrapper {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: calc(100% - 1.2rem);
  margin-top: 6.8rem;
}
.loginPage .btnWrapper :nth-child(1) {
  width: 100%;
  background-color: #007AFF;
  color: #fff;
  cursor: pointer;
  padding: 1.4rem 2rem;
  border-radius: 1.2rem;
  border: none;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.2rem;
}
.loginPage .btnWrapper #changePwBtn,
.loginPage .btnWrapper #returnLoginPage {
  width: -moz-max-content;
  width: max-content;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.2rem;
  background: none;
  border: none;
  outline: none;
  border-bottom: 0.1rem solid #000;
  margin-top: 1.2rem;
  border-radius: 0;
}

.changePwPage {
  width: 100%;
  height: 100%;
  background-color: #F2F2F7;
  overflow: hidden;
}

.loginBox,
.changePwBox {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  padding: 2.4rem;
  margin-top: 6.4rem;
}
.loginBox .loginForm,
.loginBox .changePwForm,
.changePwBox .loginForm,
.changePwBox .changePwForm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}
.loginBox .loginForm label,
.loginBox .changePwForm label,
.changePwBox .loginForm label,
.changePwBox .changePwForm label {
  width: 100%;
  height: 4.8rem;
  padding: 1.2rem 1.6rem;
  gap: 1.2rem;
  border: 0.1rem solid rgba(60, 60, 67, 0.18);
  outline: none;
  border-radius: 1.2rem;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  overflow: hidden;
}
.loginBox .loginForm label:first-child,
.loginBox .changePwForm label:first-child,
.changePwBox .loginForm label:first-child,
.changePwBox .changePwForm label:first-child {
  margin-bottom: 0.8rem;
}
.loginBox .loginForm label:focus-within,
.loginBox .changePwForm label:focus-within,
.changePwBox .loginForm label:focus-within,
.changePwBox .changePwForm label:focus-within {
  border: 0.1rem solid #007AFF; /* 원하는 스타일 */
}
.loginBox .loginForm label i,
.loginBox .changePwForm label i,
.changePwBox .loginForm label i,
.changePwBox .changePwForm label i {
  line-height: 2.4rem;
  text-align: center;
  font-size: 2.4rem;
  opacity: 0.7;
}
.loginBox .loginForm label .loginId,
.loginBox .loginForm label .loginPassword,
.loginBox .loginForm label .pwChangeId,
.loginBox .loginForm label .oldPassword,
.loginBox .loginForm label .newPassword,
.loginBox .changePwForm label .loginId,
.loginBox .changePwForm label .loginPassword,
.loginBox .changePwForm label .pwChangeId,
.loginBox .changePwForm label .oldPassword,
.loginBox .changePwForm label .newPassword,
.changePwBox .loginForm label .loginId,
.changePwBox .loginForm label .loginPassword,
.changePwBox .loginForm label .pwChangeId,
.changePwBox .loginForm label .oldPassword,
.changePwBox .loginForm label .newPassword,
.changePwBox .changePwForm label .loginId,
.changePwBox .changePwForm label .loginPassword,
.changePwBox .changePwForm label .pwChangeId,
.changePwBox .changePwForm label .oldPassword,
.changePwBox .changePwForm label .newPassword {
  width: 100%;
  border-radius: 1rem;
  outline: none;
  border: 0.2rem solid transparent;
  text-align: left;
  font-size: 1.6rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: rgba(60, 60, 67, 0.6);
  cursor: pointer;
}
.loginBox .loginForm .loginFail,
.loginBox .changePwForm .loginFail,
.changePwBox .loginForm .loginFail,
.changePwBox .changePwForm .loginFail {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  margin-top: 1rem;
  display: none;
  line-height: 2rem;
  letter-spacing: -0.28px;
  color: #FF3B30;
}
.loginBox .loginForm .error-border,
.loginBox .changePwForm .error-border,
.changePwBox .loginForm .error-border,
.changePwBox .changePwForm .error-border {
  border: 1px solid red;
}

.reCheckoutPage .workTimeContainer {
  margin: 5rem auto;
}
.reCheckoutPage .workerWrap {
  margin-top: 1rem;
}
.reCheckoutPage .workerWrap p {
  color: #000000;
  line-height: 24px;
  text-align: center;
}
.reCheckoutPage .workerWrap p:first-child {
  margin-bottom: 0.8rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.4px;
}
.reCheckoutPage .workerWrap p:last-child {
  font-size: 1.6rem;
}
.reCheckoutPage .workStatus p.edit {
  color: #007AFF;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.myInfoContent {
  width: 100%;
  height: calc(100% - 8.4rem);
  padding: 1.6rem;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.myInfoContent::-webkit-scrollbar {
  display: none;
}
.myInfoContent .myInfoHeader {
  height: 2.8rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-self: stretch;
  align-items: center;
  margin-bottom: 2.4rem;
}
.myInfoContent .myInfoHeader .welcomMention {
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.8rem;
  letter-spacing: -0.4px;
}
.myInfoContent .myInfoHeader .myInfoModify {
  display: flex;
  flex-flow: row nowrap;
  cursor: pointer;
}
.myInfoContent .myInfoHeader .myInfoModify > p:nth-child(1) {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: -0.28px;
}
.myInfoContent .myInfoHeader .myInfoModify > i {
  font-size: 1.4rem;
  line-height: 1.8rem;
  margin-left: 0.5rem;
}
.myInfoContent .workTimeDashBoardBox {
  width: 100%;
  height: 10rem;
  border-radius: 1.5rem;
  background-color: #fff;
  padding: 1.6rem;
  overflow: hidden;
}
.myInfoContent .workTimeDashBoardBox .workTimeDashboard {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.myInfoContent .workTimeDashBoardBox .workTimeDashboard::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.myInfoContent .workTimeDashBoardBox .workTimeDashboard::-webkit-scrollbar-thumb {
  outline: none;
  border-radius: 10px;
  background: #64d2ff;
  cursor: pointer;
}
.myInfoContent .workTimeDashBoardBox .workTimeDashboard::-webkit-scrollbar-track {
  box-shadow: none;
  background-color: transparent;
}
.myInfoContent .workTimeDashBoardBox .workTimeDashboard::-webkit-scrollbar-corner {
  display: none;
}
.myInfoContent .workTimeDashBoardBox .workTimeDashboard > div {
  display: flex;
  justify-content: space-between;
  padding-right: 0.5rem;
}
.myInfoContent .workTimeDashBoardBox .workTimeDashboard > div:not(:last-child) {
  margin-bottom: 0.8rem;
}
.myInfoContent .workTimeDashBoardBox .workTimeDashboard > div p {
  font-size: 1.2rem;
}
.myInfoContent .workTimeDashBoardBox .workTimeDashboard > div p:last-child {
  font-weight: bold;
}
.myInfoContent .myInfoDashboard {
  height: 19.3rem;
  display: flex;
  flex-flow: column wrap;
  padding: 1.6rem;
  border-radius: 1.2rem;
  align-items: flex-start;
  background-color: #FFFFFF;
  margin-bottom: 1.6rem;
  justify-content: space-around;
}
.myInfoContent .myInfoDashboard > div {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}
.myInfoContent .myInfoDashboard > div > p:nth-child(1) {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: -0.28px;
}
.myInfoContent .myInfoDashboard > div > p:nth-child(2) {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: -0.28px;
}
.myInfoContent .annualBox,
.myInfoContent .workTimeBox {
  width: 100%;
  height: 20rem;
}
.myInfoContent .annualBox.workTimeBox,
.myInfoContent .workTimeBox.workTimeBox {
  height: 13.5rem;
  margin-bottom: 1.6rem;
}
.myInfoContent .annualBox.workTimeBox .noWork,
.myInfoContent .workTimeBox.workTimeBox .noWork {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.myInfoContent .annualBox .statusTitle,
.myInfoContent .annualBox .workTimeTitle,
.myInfoContent .workTimeBox .statusTitle,
.myInfoContent .workTimeBox .workTimeTitle {
  width: calc(100% - 3.2rem);
  margin: 0 1.6rem 0.8rem 1.6rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.myInfoContent .annualBox .statusTitle > #rulesOpenBtn,
.myInfoContent .annualBox .workTimeTitle > #rulesOpenBtn,
.myInfoContent .workTimeBox .statusTitle > #rulesOpenBtn,
.myInfoContent .workTimeBox .workTimeTitle > #rulesOpenBtn {
  width: 6.5rem;
  height: 2.5rem;
  padding: 1rem;
  font-size: 1rem;
  background-color: transparent;
  border-radius: 3px;
  background-color: black;
}
.myInfoContent .annualBox .statusTableWrap,
.myInfoContent .workTimeBox .statusTableWrap {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 0.8rem;
}
.myInfoContent .annualBox .statusDivTable,
.myInfoContent .workTimeBox .statusDivTable {
  width: 70%;
  background-color: #fff;
  border-radius: 1.2rem;
  padding: 1.6rem;
  height: calc(100% - 2.4rem);
  max-height: 15rem;
}
.myInfoContent .annualBox .statusDivTable:last-child,
.myInfoContent .workTimeBox .statusDivTable:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 30%;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
}
.myInfoContent .annualBox .statusDivTable:last-child .leavesBox,
.myInfoContent .workTimeBox .statusDivTable:last-child .leavesBox {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.myInfoContent .annualBox .statusDivTable:last-child .leavesBox#remainingWrap,
.myInfoContent .workTimeBox .statusDivTable:last-child .leavesBox#remainingWrap {
  display: none;
}
.myInfoContent .annualBox .statusDivTable:last-child .leavesBox > p,
.myInfoContent .workTimeBox .statusDivTable:last-child .leavesBox > p {
  text-align: center;
}
.myInfoContent .annualBox .statusDivTable:last-child .leavesBox > p span,
.myInfoContent .workTimeBox .statusDivTable:last-child .leavesBox > p span {
  display: flex;
  width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
}
.myInfoContent .annualBox .statusDivTable:last-child .leavesBox > p span .spinner,
.myInfoContent .workTimeBox .statusDivTable:last-child .leavesBox > p span .spinner {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  border: 3px solid #b0d6ff; /* 회색 배경 테두리 */
  border-top: 3px solid #007AFF; /* 파란색 앞부분 테두리 */
  border-radius: 50%; /* 원형으로 만들기 */
  animation: spin 1s linear infinite; /* 회전 애니메이션 */
}
.myInfoContent .annualBox .statusDivTable:last-child .leavesBox > p:last-child,
.myInfoContent .workTimeBox .statusDivTable:last-child .leavesBox > p:last-child {
  font-size: 1.6rem;
  font-weight: 700;
}
.myInfoContent .annualBox .statusDivTable .tableBody,
.myInfoContent .workTimeBox .statusDivTable .tableBody {
  height: 100%;
  overflow: auto;
}
.myInfoContent .annualBox .statusDivTable .tableBody::-webkit-scrollbar,
.myInfoContent .workTimeBox .statusDivTable .tableBody::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.myInfoContent .annualBox .statusDivTable .tableBody::-webkit-scrollbar-thumb,
.myInfoContent .workTimeBox .statusDivTable .tableBody::-webkit-scrollbar-thumb {
  outline: none;
  border-radius: 10px;
  background: #64d2ff;
  cursor: pointer;
}
.myInfoContent .annualBox .statusDivTable .tableBody::-webkit-scrollbar-track,
.myInfoContent .workTimeBox .statusDivTable .tableBody::-webkit-scrollbar-track {
  box-shadow: none;
  background-color: transparent;
}
.myInfoContent .annualBox .statusDivTable .tableBody::-webkit-scrollbar-corner,
.myInfoContent .workTimeBox .statusDivTable .tableBody::-webkit-scrollbar-corner {
  display: none;
}
.myInfoContent .annualBox .statusDivTable .tableBody > div,
.myInfoContent .workTimeBox .statusDivTable .tableBody > div {
  font-size: 1.2rem;
}
.myInfoContent .annualBox .statusDivTable .tableBody .annualTableEmpty,
.myInfoContent .workTimeBox .statusDivTable .tableBody .annualTableEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.myInfoContent .annualBox .statusDivTable .tableBody .tr,
.myInfoContent .workTimeBox .statusDivTable .tableBody .tr {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
  gap: 0.8rem;
}
.myInfoContent .annualBox .statusDivTable .tableBody .tr p:first-child,
.myInfoContent .workTimeBox .statusDivTable .tableBody .tr p:first-child {
  font-size: 1rem;
  padding: 0.2rem 0.4rem;
  color: #FFFFFF;
  border-radius: 0.4rem;
  line-height: 1.6rem;
}
.myInfoContent .annualBox .statusDivTable .tableBody .tr p:first-child.fullAnnual,
.myInfoContent .workTimeBox .statusDivTable .tableBody .tr p:first-child.fullAnnual {
  background-color: #007AFF;
}
.myInfoContent .annualBox .statusDivTable .tableBody .tr p:first-child.halfAnnual,
.myInfoContent .workTimeBox .statusDivTable .tableBody .tr p:first-child.halfAnnual {
  background-color: #32ADE6;
}
.myInfoContent .annualBox .statusDivTable .tableBody .tr:last-child,
.myInfoContent .workTimeBox .statusDivTable .tableBody .tr:last-child {
  margin-bottom: 0;
}
.myInfoContent .statusBox {
  display: flex;
  flex-flow: column wrap;
  margin-bottom: 1.6rem;
}
.myInfoContent .statusBox > p:nth-child(1) {
  margin: 0 1.6rem 0.8rem 1.6rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6rem;
  margin-bottom: 0.5rem;
  height: 2rem;
}
.myInfoContent .statusBox > div:nth-child(2) {
  background-color: #FFFFFF;
  height: 8.8rem;
  border-radius: 1.2rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1.6rem;
}
.myInfoContent .statusBox > div:nth-child(2) > div {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  padding: 0 1.6rem 0 1.6rem;
}
.myInfoContent .statusBox > div:nth-child(2) > div > p {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
  text-align: center;
}
.myInfoContent .statusBox > div:nth-child(2) > div > .countBox {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4rem;
  text-align: center;
}
.myInfoContent .btnWrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-top: 2rem;
}
.myInfoContent .btnWrapper > #logoutBtn {
  background-color: #00C7BE;
}

.modifyModal {
  width: 100%;
  height: calc(100% - 8.4rem);
  position: absolute;
  top: 0%;
  right: 0;
  bottom: 0%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: end;
  z-index: 99999;
  display: none;
}
.modifyModal .modifyBox {
  background-color: #F2F2F7;
  width: 100%;
  height: 90;
  display: flex;
  flex-flow: column wrap;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
.modifyModal .modifyBox .headerBox {
  height: 5.2rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  background-color: #FFFFFF;
  padding: 0 2.4rem 0 2.4rem;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
.modifyModal .modifyBox .headerBox .leftBox,
.modifyModal .modifyBox .headerBox .rightBox {
  display: flex;
  align-items: center;
}
.modifyModal .modifyBox .headerBox .leftBox > p,
.modifyModal .modifyBox .headerBox .rightBox > p {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4rem;
  text-align: center;
}
.modifyModal .modifyBox .headerBox .rightBox > p {
  cursor: pointer;
}
.modifyModal .modifyBox .mainBox {
  width: 100%;
  height: calc(100% - 5.2rem);
  padding: 0 2.4rem 0 2.4rem;
  display: flex;
  flex-direction: column;
}
.modifyModal .modifyBox .mainBox .modifyInputBox {
  width: 100%;
  padding: 1.6rem 0 1.6rem 0;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}
.modifyModal .modifyBox .mainBox .modifyInputBox > label {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.modifyModal .modifyBox .mainBox .modifyInputBox > label > div:nth-child(1) {
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: -0.24px;
}
.modifyModal .modifyBox .mainBox .modifyInputBox > label > input {
  height: 4.5rem;
  border-radius: 1.2rem;
  border: 0.1rem solid rgba(60, 60, 67, 0.18);
  display: flex;
  padding: 1.2rem 1.6rem;
  align-items: center;
  gap: 1.2rem;
  align-self: stretch;
}
.modifyModal .modifyBox .mainBox .saveBtn {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: 1.6rem;
  background-color: #007aff;
  cursor: pointer;
  pointer-events: none;
  filter: grayscale(100%);
  font-size: 1.7rem;
  font-font-style: normal;
  font-font-weight: 700;
  font-line-height: 2.2rem;
  font-letter-spacing: -0.4px;
  color: #fff;
  border-radius: 1.2rem;
}

.companyRulesModal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  right: 0;
  bottom: 0%;
  left: 0;
  background-color: #F2F2F7;
  display: flex;
  align-items: end;
  z-index: 99998;
  display: none;
}
.companyRulesModal .iframeModalWrap {
  width: 100%;
  height: 100%;
  padding: 1.6rem;
}
.companyRulesModal .iframeModalWrap .iframe {
  width: 100%;
  height: 85%;
}
.companyRulesModal .iframeModalWrap .btnWrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  margin-top: 3rem;
}

.vacationModal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  right: 0;
  bottom: 0%;
  left: 0;
  background-color: #F2F2F7;
  display: flex;
  align-items: end;
  z-index: 99998;
  display: none;
}
.vacationModal .selectBox {
  width: -moz-max-content;
  width: max-content;
}
.vacationModal .vacationSelectBox {
  font-size: 2.2rem;
  color: black;
  margin-bottom: 1.2rem;
  display: flex;
  flex-flow: row nowrap;
}
.vacationModal .vacationSelectBox .vacationAdminMent {
  margin-right: 0.8rem;
}
.vacationModal .vacationSelectBox > select {
  background-color: #F2F2F7;
  width: 4.2rem;
}
.vacationModal .vacationSelectBox > select > :optional {
  width: -moz-min-content;
  width: min-content;
}
.vacationModal .vacationUseBox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2.4rem;
  width: 100%;
  height: 100%;
  max-width: 60rem;
  position: relative;
}
.vacationModal .vacationUseBox > .btnWrapper {
  width: 92%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-top: 3rem;
}
.vacationModal .vacationUseBox > .btnWrapper > div:nth-child(2) {
  background-color: #00C7BE;
}
.vacationModal .vacationUseBox .descriptionText {
  padding: 2.4rem 0 0 0;
  font-size: 1.1rem;
}
.vacationModal #flight-datepicker {
  margin-top: 3.6rem;
}
@media screen and (min-width: 4rem) {
  .vacationModal #flight-datepicker {
    display: flex;
  }
}
.vacationModal #flight-datepicker .form-item {
  position: relative;
  margin: 1.2rem 0 6rem;
  width: 95%;
}
@media screen and (min-width: 4rem) {
  .vacationModal #flight-datepicker .form-item {
    margin: 1.2rem 2.4rem 0 0;
  }
}
.vacationModal #flight-datepicker .form-item label {
  display: block;
  margin-bottom: 0.8rem;
  color: #0A84FF;
}
.vacationModal #flight-datepicker div:nth-child(2) > label {
  color: #00C7BE;
}
.vacationModal #flight-datepicker input {
  display: block;
  margin-bottom: 0.8rem;
  padding-bottom: 6px;
  width: 100%;
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  color: rgba(0, 0, 0, 0.3529411765);
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3529411765);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease-out;
}
.vacationModal #flight-datepicker input:first-child, .vacationModal #flight-datepicker input:last-child {
  border-radius: 0;
}
.vacationModal #flight-datepicker input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.3529411765);
  font-size: 14px;
  line-height: 30px;
  -webkit-transition: color 0.2s 0.2s ease-out;
  transition: color 0.2s 0.2s ease-out;
}
.vacationModal #flight-datepicker input:-moz-placeholder {
  color: rgba(0, 0, 0, 0.3529411765);
  font-size: 14px;
  line-height: 30px;
  -moz-transition: color 0.2s 0.2s ease-out;
  transition: color 0.2s 0.2s ease-out;
}
.vacationModal #flight-datepicker input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3529411765);
  font-size: 14px;
  line-height: 30px;
  -moz-transition: color 0.2s 0.2s ease-out;
  transition: color 0.2s 0.2s ease-out;
}
.vacationModal #flight-datepicker input:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.3529411765);
  font-size: 14px;
  line-height: 30px;
  -ms-transition: color 0.2s 0.2s ease-out;
  transition: color 0.2s 0.2s ease-out;
}
.vacationModal #flight-datepicker input:focus {
  border-bottom-color: rgba(0, 0, 0, 0.3529411765);
}
.vacationModal #flight-datepicker input:focus::-webkit-input-placeholder {
  color: transparent;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
.vacationModal #flight-datepicker input:focus:-moz-placeholder {
  color: transparent;
  -moz-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
.vacationModal #flight-datepicker input:focus::-moz-placeholder {
  color: transparent;
  -moz-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
.vacationModal #flight-datepicker input:focus:-ms-input-placeholder {
  color: transparent;
  -ms-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
.vacationModal #flight-datepicker .date-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: calc(100% + 6px);
  font-size: 0.1rem;
  color: rgba(0, 0, 0, 0.3529411765);
}
@media screen and (min-width: 4rem) {
  .vacationModal #flight-datepicker .date-text {
    top: 100%;
  }
}
.vacationModal .datepicker.dropdown-menu {
  padding: 0;
  background-clip: border-box;
  border: none;
  border-radius: 0;
  animation: popup 0.2s ease-out forwards;
  position: absolute;
}
.vacationModal .datepicker.dropdown-menu table {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.vacationModal .datepicker.dropdown-menu table thead {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.vacationModal .datepicker.dropdown-menu table thead tr {
  border-top: 0;
}
.vacationModal .datepicker.dropdown-menu table tbody {
  background-color: white;
}
.vacationModal .datepicker.dropdown-menu table tfoot > tr > td {
  color: #fff;
  text-align: center;
}
.vacationModal .datepicker.dropdown-menu table tfoot > tr > td:last-child {
  background-color: #19646f;
}
.vacationModal .datepicker.dropdown-menu table tfoot > tr > td:hover {
  cursor: pointer;
}
.vacationModal .datepicker.dropdown-menu table tr {
  border-top: 0.1rem solid #ededed;
}
.vacationModal .datepicker.dropdown-menu table tr td,
.vacationModal .datepicker.dropdown-menu table tr th {
  width: auto;
  height: 2.4rem;
  padding: 0.8rem;
  font-size: 1.6rem;
  border-radius: 0;
  transition: background-color 0.6s ease-out;
}
@media screen and (min-width: 4rem) {
  .vacationModal .datepicker.dropdown-menu table tr td,
  .vacationModal .datepicker.dropdown-menu table tr th {
    padding: 1.2rem;
  }
}
.vacationModal .datepicker.dropdown-menu table tr td:hover, .vacationModal .datepicker.dropdown-menu table tr td.active:hover, .vacationModal .datepicker.dropdown-menu table tr td:active:hover,
.vacationModal .datepicker.dropdown-menu table tr th:hover,
.vacationModal .datepicker.dropdown-menu table tr th.active:hover,
.vacationModal .datepicker.dropdown-menu table tr th:active:hover {
  border-color: #ededed;
  border-radius: 0;
  transition: background-color 0.2s ease-out;
}
.vacationModal .datepicker.dropdown-menu table tr td.focused, .vacationModal .datepicker.dropdown-menu table tr td.selected,
.vacationModal .datepicker.dropdown-menu table tr th.focused,
.vacationModal .datepicker.dropdown-menu table tr th.selected {
  background-color: #24a0ad;
  border-color: #ededed;
  border-radius: 0;
}
.vacationModal .datepicker.dropdown-menu table tr td.active, .vacationModal .datepicker.dropdown-menu table tr td.active:focus, .vacationModal .datepicker.dropdown-menu table tr td.active.active:hover, .vacationModal .datepicker.dropdown-menu table tr td:active:focus, .vacationModal .datepicker.dropdown-menu table tr td.highlighted,
.vacationModal .datepicker.dropdown-menu table tr th.active,
.vacationModal .datepicker.dropdown-menu table tr th.active:focus,
.vacationModal .datepicker.dropdown-menu table tr th.active.active:hover,
.vacationModal .datepicker.dropdown-menu table tr th:active:focus,
.vacationModal .datepicker.dropdown-menu table tr th.highlighted {
  background-color: rgb(229.5, 229.5, 229.5);
  border-color: #ededed;
}
.vacationModal .datepicker.dropdown-menu table tr th.datepicker-switch {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: inherit;
  border-radius: 0;
}
.vacationModal .datepicker.dropdown-menu table tr th.prev,
.vacationModal .datepicker.dropdown-menu table tr th.next {
  color: #ffffff;
  background-color: rgb(22.8229665072, 101.4354066986, 109.6770334928);
  border-radius: 0;
}
.vacationModal .datepicker.dropdown-menu table tr th.dow {
  padding: 0.2rem 1.2rem;
  font-size: 1.2rem;
  line-height: 2;
  color: #ffffff;
  background-color: rgb(25.4583732057, 113.1483253589, 122.3416267943);
  border-top: 0.1rem solid rgb(24.5799043062, 109.2440191388, 118.1200956938);
  border-radius: 0;
}
.vacationModal .datepicker.dropdown-menu table tr td.day {
  width: 2.4rem;
  border-right: 0.1rem solid #ededed;
}
.vacationModal .datepicker.dropdown-menu table tr td.day:last-child {
  border-right-width: 0;
}
.vacationModal .datepicker.dropdown-menu table tr td.range {
  background-color: #eeeeee;
}
.vacationModal .datepicker.dropdown-menu .new,
.vacationModal .datepicker.dropdown-menu .old,
.vacationModal .datepicker.dropdown-menu .disabled,
.vacationModal .datepicker.dropdown-menu .disabled:hover {
  color: #ccc;
}
.vacationModal .fontawesome-calendar {
  position: absolute;
  top: 26px;
  right: 0;
  font-size: 2.4rem;
  z-index: -99;
}
@keyframes popup {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 769px) {
  .myInfoHeader {
    margin-top: 1rem;
  }
  .myInfoContent {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }
}
.adminHeader {
  padding: 1.6rem 1.6rem 0 1.6rem;
  background: #ffffff;
  border-bottom: 1px solid #F2F2F7;
}
.adminHeader ul {
  gap: 1.6rem;
}
.adminHeader li {
  height: 40px;
  padding: 0 0.4rem;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
}
.adminHeader li a {
  display: flex;
  padding: 0.8rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.33;
  color: #000000;
}
.adminHeader li.active {
  border-color: #007AFF;
}
.adminHeader li.active a {
  color: #007AFF;
}

.modifyModal .mainBox .modifyInputBox .modifyDescription {
  display: flex;
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
}
.modifyModal .mainBox .modifyInputBox .modifyDescription .targetUserName {
  font-weight: 600;
}
.modifyModal .mainBox .modifyInputBox .checkIsEdit {
  display: flex;
  gap: 0.8rem;
}
.modifyModal .mainBox .modifyInputBox .selectArea {
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.modifyModal .mainBox .modifyInputBox .selectArea .titleText {
  font-weight: 600;
  margin-right: 0.4rem;
}
.modifyModal .mainBox .modifyInputBox .selectArea.notVisible {
  display: none;
}
.modifyModal .mainBox .modifyInputBox .selectArea div {
  display: flex;
  align-items: center;
}
.modifyModal .mainBox .modifyInputBox .selectArea .marginStyle {
  margin-left: 0.6rem;
  padding: 0.3rem;
}
.modifyModal .mainBox .modifyInputBox .selectArea select {
  border: 1px solid rgba(60, 60, 67, 0.18);
  padding: 0.2rem;
  border-radius: 0.4rem;
  background-color: #fff;
}
.modifyModal .mainBox .saveTimeBtn {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: 1.6rem;
  background-color: #007aff;
  cursor: pointer;
  font-size: 1.7rem;
  font-font-style: normal;
  font-font-weight: 700;
  font-line-height: 2.2rem;
  font-letter-spacing: -0.4px;
  color: #fff;
  border-radius: 1.2rem;
}

.adminAttendance {
  height: calc(100% - 8.4rem);
  overflow: hidden;
}
.adminAttendance .adminBody {
  height: calc(100% - 5.7rem);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.adminAttendance .adminBody::-webkit-scrollbar {
  display: none;
}
.adminAttendance .weekWrap {
  padding: 24px;
  background: #fff;
}
.adminAttendance .weekWrap .week {
  margin-bottom: 0.8rem;
  padding: 0 1.6rem;
}
.adminAttendance .weekWrap .week span {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6rem;
  color: rgba(60, 60, 67, 0.6);
}
.adminAttendance .weekWrap .day span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  font-family: "ONE-Mobile-Title";
  font-size: 16px;
  font-weight: 700;
}
.adminAttendance .weekWrap .day span.today {
  background-color: #007AFF;
  color: #fff;
  border-radius: 50%;
}
.adminAttendance .weekWrap .day span.today ~ * {
  color: rgba(60, 60, 67, 0.6);
}
.adminAttendance .statusWrap {
  padding: 16px;
  border-radius: 12px;
}
.adminAttendance .statusWrap::-webkit-scrollbar {
  display: none;
}
.adminAttendance .statusWrap .statusTitle {
  margin-bottom: 16px;
  border-radius: 12px;
  padding: 0 16px;
  font-family: "ONE-Mobile-Title";
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #000000;
}
.adminAttendance .statusDivTable {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.adminAttendance .statusDivTable .name {
  width: 17%;
  min-width: 56px;
}
.adminAttendance .statusDivTable .commute {
  width: 61%;
}
.adminAttendance .statusDivTable .type {
  width: 22%;
  min-width: 40px;
  text-align: right;
}
.adminAttendance .statusDivTable .tableHeader {
  width: 100%;
  padding: 0 1.6rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.adminAttendance .statusDivTable .tableHeader > span {
  flex-grow: 1;
  font-size: 1.2rem;
  line-height: 1.4rem;
  color: rgba(60, 60, 67, 0.6);
}
.adminAttendance .statusDivTable .tableBody {
  padding: 1.6rem;
  background-color: #fff;
  border-radius: 12px;
}
.adminAttendance .statusDivTable .tr {
  width: 100%;
  padding: 0.9rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.adminAttendance .statusDivTable .tr:first-child {
  padding-top: 0;
}
.adminAttendance .statusDivTable .tr:last-child {
  margin-bottom: 0;
}
.adminAttendance .statusDivTable .tr > div {
  flex-grow: 1;
}
.adminAttendance .statusDivTable .tr > div.name {
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 0.28px;
  color: #000;
}
.adminAttendance .statusDivTable .tr > div.commute {
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: -0.24px;
  color: #48484a;
}
.adminAttendance span.time {
  font-size: 12px;
  font-weight: 700;
  color: #48484a;
  letter-spacing: -0.24px;
}
.adminAttendance span.over {
  color: #007AFF;
}
.adminAttendance span.under {
  color: #FF3B30;
}

.attendanceDateWrap {
  padding: 2.4rem;
  background-color: #fff;
}
.attendanceDateWrap .selectDate {
  gap: 8px;
}
.attendanceDateWrap .selectDate > div > select {
  background-color: #fff;
}
.attendanceDateWrap .today {
  display: inline-flex;
  align-items: center;
  height: 2.8rem;
  padding: 0 1.2rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(127, 127, 127, 0.5);
  font-size: 1.2rem;
  font-weight: 400;
  color: #000000;
  box-sizing: border-box;
}
.attendanceDateWrap .date {
  display: flex;
  align-items: center;
  font-family: "ONE-Mobile-Title";
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.4rem;
}
.attendanceDateWrap .date > span {
  font-family: "ONE-Mobile-Title";
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.4rem;
}
.attendanceDateWrap .excelDownBtn {
  cursor: pointer;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.adminDayOff .staffSearchWrap {
  gap: 8px;
  padding: 16px;
  background-color: #fff;
}
.adminDayOff .staffSearchWrap button,
.adminDayOff .staffSearchWrap input {
  border-radius: 12px;
  font-size: 16px;
}
.adminDayOff .staffSearchWrap input {
  width: calc(100% - 70px);
  height: 48px;
  padding: 12px 16px;
  color: rgb(60, 60, 67);
  border: 1px solid rgba(60, 60, 67, 0.18);
}
.adminDayOff .staffSearchWrap input::-moz-placeholder {
  color: rgba(60, 60, 67, 0.6);
}
.adminDayOff .staffSearchWrap input::placeholder {
  color: rgba(60, 60, 67, 0.6);
}
.adminDayOff .staffSearchWrap button {
  width: 62px;
  height: 48px;
  font-weight: 700;
  line-height: 24px;
  background: rgba(118, 118, 128, 0.12);
  color: #fff;
  background-color: #007AFF;
  cursor: pointer;
}
.adminDayOff .statusTable {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.6rem;
}
.adminDayOff .statusTable .tableHeader {
  width: 100%;
  padding-bottom: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.adminDayOff .statusTable .tableHeader span {
  width: 70%;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
}
.adminDayOff .statusTable .tableHeader span:last-child {
  width: 30%;
}
.adminDayOff .statusTable .tableBodyAdmin {
  width: 100%;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTitle {
  width: calc(100% - 3.2rem);
  margin: 0 1.6rem 0.8rem 1.6rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6rem;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap {
  width: 100%;
  height: 16rem;
  display: flex;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents {
  width: 30%;
  background-color: #fff;
  border-radius: 1.2rem;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents .statusDivTable {
  display: flex;
  gap: 0.8rem;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 0;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
  text-align: center;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents .statusDivTable [id^=usedLeaves] {
  font-size: 1.2rem;
  font-weight: 700;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents .statusDivTable .remainingBox {
  display: flex;
  justify-content: center;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents .statusDivTable .remainingBox [class^=remainingChangeArea] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents .statusDivTable .remainingBox [class^=remainingChangeArea] .spinner {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  border: 3px solid #b0d6ff; /* 회색 배경 테두리 */
  border-top: 3px solid #007AFF; /* 파란색 앞부분 테두리 */
  border-radius: 50%; /* 원형으로 만들기 */
  animation: spin 1s linear infinite; /* 회전 애니메이션 */
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents .statusDivTable button {
  border-radius: 0.6rem;
  padding: 0.5rem;
  color: #FFF;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  background-color: #03C7BE;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents .dayOffButtonWrap {
  display: flex;
  gap: 0.4rem;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents .dayOffButtonWrap button {
  width: 100%;
  border-radius: 0.6rem;
  padding: 0.6rem;
  color: #FFF;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
}
.adminDayOff .statusTable .tableBodyAdmin .statusTableWrap .dayOffContents .dayOffButtonWrap button[class^=registerDayOff] {
  background-color: #007AFF;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable {
  width: 70%;
  background-color: #fff;
  border-radius: 1.2rem;
  padding: 1.6rem;
  height: 100%;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable > p {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody {
  height: 100%;
  overflow: auto;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody::-webkit-scrollbar-thumb {
  outline: none;
  border-radius: 10px;
  background: #64d2ff;
  cursor: pointer;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody::-webkit-scrollbar-track {
  box-shadow: none;
  background-color: transparent;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody::-webkit-scrollbar-corner {
  display: none;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody > div {
  font-size: 1.2rem;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .annualTableEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .dayoffTr {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  gap: 0.8rem;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .dayoffTr:hover {
  cursor: pointer;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .dayoffTr:not(:last-child) {
  border-bottom: 1px dashed #587ace;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .dayoffTr:first-child {
  padding-top: 0;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .dayoffTr:last-child {
  padding-bottom: 0;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .dayoffTr p:first-child {
  font-size: 1rem;
  padding: 0.2rem 0.4rem;
  color: #FFFFFF;
  border-radius: 0.4rem;
  line-height: 1.6rem;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .dayoffTr p:first-child.fullAnnual {
  background-color: #007AFF;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .dayoffTr p:first-child.halfAnnual {
  background-color: #32ADE6;
}
.adminDayOff .statusTable .tableBodyAdmin .statusDivTable .tableBody .dayoffTr:last-child {
  margin-bottom: 0;
}
.adminDayOff .statusTable .tableBodyAdmin .tr {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 8px;
}
.adminDayOff .statusTable .tableBodyAdmin .tr:last-of-type {
  margin-bottom: 0;
}
.adminDayOff .statusTable .tableBodyAdmin .tr div {
  width: 25%;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #48484a;
  letter-spacing: -0.28px;
  text-align: center;
}
.adminDayOff .statusTable .tableBodyAdmin .tr div.name {
  color: #000;
  letter-spacing: 0.28px;
}
.adminDayOff .statusTable .tableBodyAdmin .tr div.rest {
  font-weight: 700;
}

.modifyModal .mainBox .modifyInputBox .modifyDescription {
  display: flex;
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
}
.modifyModal .mainBox .modifyInputBox .modifyDescription .targetUserName {
  font-weight: 600;
}
.modifyModal .mainBox .modifyInputBox .selectArea {
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.modifyModal .mainBox .modifyInputBox .selectArea .titleText {
  font-weight: 600;
  margin-right: 0.4rem;
}
.modifyModal .mainBox .modifyInputBox .selectArea div {
  display: flex;
  align-items: center;
}
.modifyModal .mainBox .modifyInputBox .selectArea .marginStyle {
  margin-left: 0.6rem;
  padding: 0.3rem;
}
.modifyModal .mainBox .modifyInputBox .selectArea select {
  border: 1px solid rgba(60, 60, 67, 0.18);
  padding: 0.2rem;
  border-radius: 0.4rem;
  background-color: #fff;
}
.modifyModal .mainBox .saveTimeBtn {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: 1.6rem;
  background-color: #007aff;
  cursor: pointer;
  font-size: 1.7rem;
  font-font-style: normal;
  font-font-weight: 700;
  font-line-height: 2.2rem;
  font-letter-spacing: -0.4px;
  color: #fff;
  border-radius: 1.2rem;
}

.adminUserManage .staffSearchWrap {
  gap: 8px;
  padding: 16px;
  background-color: #fff;
}
.adminUserManage .staffSearchWrap button,
.adminUserManage .staffSearchWrap input {
  border-radius: 12px;
  font-size: 16px;
}
.adminUserManage .staffSearchWrap input {
  width: calc(100% - 70px);
  height: 48px;
  padding: 12px 16px;
  color: rgb(60, 60, 67);
  border: 1px solid rgba(60, 60, 67, 0.18);
}
.adminUserManage .staffSearchWrap input::-moz-placeholder {
  color: rgba(60, 60, 67, 0.6);
}
.adminUserManage .staffSearchWrap input::placeholder {
  color: rgba(60, 60, 67, 0.6);
}
.adminUserManage .staffSearchWrap button {
  width: 62px;
  height: 48px;
  font-weight: 700;
  line-height: 24px;
  background: rgba(118, 118, 128, 0.12);
  color: #fff;
  background-color: #007AFF;
  cursor: pointer;
}
.adminUserManage .statusTable {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.6rem;
}
.adminUserManage .statusTable .tableHeader {
  width: 100%;
  padding-bottom: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.adminUserManage .statusTable .tableHeader span {
  width: 25%;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
}
.adminUserManage .statusTable .tableBody .tr {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 8px;
}
.adminUserManage .statusTable .tableBody .tr:last-of-type {
  margin-bottom: 0;
}
.adminUserManage .statusTable .tableBody .tr div {
  width: 25%;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #48484A;
  letter-spacing: -0.28px;
  text-align: center;
}
.adminUserManage .statusTable .tableBody .tr div.name {
  color: #000;
  letter-spacing: 0.28px;
}
.adminUserManage .statusTable .tableBody .tr div.rest {
  font-weight: 700;
}

.adminUserEdit .adminButton {
  display: none;
}
.adminUserEdit .datePickerBg {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  display: none;
}
.adminUserEdit .adminBody {
  height: 100%;
}
.adminUserEdit .adminBody .inputBox#flight-datepicker-exit, .adminUserEdit .adminBody #flight-datepicker#flight-datepicker-exit, .adminUserEdit .adminBody #flight-datepicker-exit#flight-datepicker-exit {
  display: none;
}
.adminUserEdit .adminBody .inputBox [class^=err], .adminUserEdit .adminBody #flight-datepicker [class^=err], .adminUserEdit .adminBody #flight-datepicker-exit [class^=err] {
  color: #FF3B30;
  display: none;
}
.adminUserEdit .adminBody .inputBox input.err_input, .adminUserEdit .adminBody .inputBox select.err_input, .adminUserEdit .adminBody #flight-datepicker input.err_input, .adminUserEdit .adminBody #flight-datepicker select.err_input, .adminUserEdit .adminBody #flight-datepicker-exit input.err_input, .adminUserEdit .adminBody #flight-datepicker-exit select.err_input {
  border: 1px solid #FF3B30;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu {
  padding: 0;
  background-clip: border-box;
  border: none;
  border-radius: 0;
  animation: popup 0.2s ease-out forwards;
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table thead {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table thead tr {
  border-top: 0;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tbody {
  background-color: white;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr {
  border-top: 0.1rem solid #ededed;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr td,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th {
  width: auto;
  height: 1.6rem;
  padding: 0.8rem;
  font-size: 1.2rem;
  border-radius: 0;
  transition: background-color 0.6s ease-out;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr td:hover, .adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.active:hover, .adminUserEdit .adminBody .datepicker.dropdown-menu table tr td:active:hover,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th:hover,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.active:hover,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th:active:hover {
  border-color: #ededed;
  border-radius: 0;
  transition: background-color 0.2s ease-out;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.focused, .adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.selected,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.focused,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.selected {
  background-color: #24a0ad;
  border-color: #ededed;
  border-radius: 0;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.active, .adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.active:focus, .adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.active.active:hover, .adminUserEdit .adminBody .datepicker.dropdown-menu table tr td:active:focus, .adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.highlighted,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.active,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.active:focus,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.active.active:hover,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th:active:focus,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.highlighted {
  background-color: rgb(229.5, 229.5, 229.5);
  border-color: #ededed;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.datepicker-switch {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: inherit;
  border-radius: 0;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.prev,
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.next {
  color: #ffffff;
  background-color: rgb(22.8229665072, 101.4354066986, 109.6770334928);
  border-radius: 0;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr th.dow {
  padding: 0.2rem 1.2rem;
  font-size: 1.2rem;
  line-height: 2;
  color: #ffffff;
  background-color: rgb(25.4583732057, 113.1483253589, 122.3416267943);
  border-top: 0.1rem solid rgb(24.5799043062, 109.2440191388, 118.1200956938);
  border-radius: 0;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.day {
  width: 1.4rem;
  border-right: 0.1rem solid #ededed;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.day:last-child {
  border-right-width: 0;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu table tr td.range {
  background-color: #eeeeee;
}
.adminUserEdit .adminBody .datepicker.dropdown-menu .new,
.adminUserEdit .adminBody .datepicker.dropdown-menu .old,
.adminUserEdit .adminBody .datepicker.dropdown-menu .disabled,
.adminUserEdit .adminBody .datepicker.dropdown-menu .disabled:hover {
  color: #ccc;
}
.adminUserEdit .adminBody .adminUserEditWrap {
  padding: 1.6rem;
}
.adminUserEdit .adminBody .adminUserEditWrap form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.adminUserEdit .adminBody .adminUserEditWrap form .resetPwButton {
  width: 100%;
  background-color: #FF3B30;
  color: #fff;
  cursor: pointer;
  padding: 1.4rem 2rem;
  border-radius: 1.2rem;
  border: none;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.2rem;
  text-align: center;
  margin-top: 0.8rem;
}
.adminUserEdit .adminBody .adminUserEditWrap form .editBtnWrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: calc(100% - 1.2rem);
  margin-top: 1.6rem;
  gap: 5rem;
}
.adminUserEdit .adminBody .adminUserEditWrap form .editBtnWrapper > input, .adminUserEdit .adminBody .adminUserEditWrap form .editBtnWrapper div {
  width: 50%;
  background-color: #007AFF;
  color: #fff;
  cursor: pointer;
  padding: 1.4rem 2rem;
  border-radius: 1.2rem;
  border: none;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.2rem;
  text-align: center;
}
.adminUserEdit .adminBody .adminUserEditWrap form .editBtnWrapper > div:nth-child(1) {
  background-color: #24a0ad;
}
.adminUserEdit .adminBody .adminUserEditWrap .birthInputBox {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.adminUserEdit .adminBody .adminUserEditWrap .inputLabel {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: -2%;
}
.adminUserEdit .adminBody .adminUserEditWrap .inputStyle {
  width: 100%;
  border-radius: 1.2rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(60, 60, 67, 0.18);
  color: rgba(60, 60, 67, 0.6);
  background-color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
}
.adminUserEdit .adminBody .adminUserEditWrap .inputStyle.dateSelector {
  position: relative;
}

.adminRegister .adminBody {
  height: 100%;
}
.adminRegister .adminBody .inputBox [class^=err], .adminRegister .adminBody #flight-datepicker [class^=err] {
  color: #FF3B30;
  display: none;
}
.adminRegister .adminBody .inputBox input.err_input, .adminRegister .adminBody .inputBox select.err_input, .adminRegister .adminBody #flight-datepicker input.err_input, .adminRegister .adminBody #flight-datepicker select.err_input {
  border: 1px solid #FF3B30;
}
.adminRegister .adminBody .datepicker.dropdown-menu {
  padding: 0;
  background-clip: border-box;
  border: none;
  border-radius: 0;
  animation: popup 0.2s ease-out forwards;
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.adminRegister .adminBody .datepicker.dropdown-menu table {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.adminRegister .adminBody .datepicker.dropdown-menu table thead {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.adminRegister .adminBody .datepicker.dropdown-menu table thead tr {
  border-top: 0;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tbody {
  background-color: white;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr {
  border-top: 0.1rem solid #ededed;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr td,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th {
  width: auto;
  height: 1.6rem;
  padding: 0.8rem;
  font-size: 1.2rem;
  border-radius: 0;
  transition: background-color 0.6s ease-out;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr td:hover, .adminRegister .adminBody .datepicker.dropdown-menu table tr td.active:hover, .adminRegister .adminBody .datepicker.dropdown-menu table tr td:active:hover,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th:hover,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.active:hover,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th:active:hover {
  border-color: #ededed;
  border-radius: 0;
  transition: background-color 0.2s ease-out;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr td.focused, .adminRegister .adminBody .datepicker.dropdown-menu table tr td.selected,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.focused,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.selected {
  background-color: #24a0ad;
  border-color: #ededed;
  border-radius: 0;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr td.active, .adminRegister .adminBody .datepicker.dropdown-menu table tr td.active:focus, .adminRegister .adminBody .datepicker.dropdown-menu table tr td.active.active:hover, .adminRegister .adminBody .datepicker.dropdown-menu table tr td:active:focus, .adminRegister .adminBody .datepicker.dropdown-menu table tr td.highlighted,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.active,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.active:focus,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.active.active:hover,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th:active:focus,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.highlighted {
  background-color: rgb(229.5, 229.5, 229.5);
  border-color: #ededed;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.datepicker-switch {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: inherit;
  border-radius: 0;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.prev,
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.next {
  color: #ffffff;
  background-color: rgb(22.8229665072, 101.4354066986, 109.6770334928);
  border-radius: 0;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr th.dow {
  padding: 0.2rem 1.2rem;
  font-size: 1.2rem;
  line-height: 2;
  color: #ffffff;
  background-color: rgb(25.4583732057, 113.1483253589, 122.3416267943);
  border-top: 0.1rem solid rgb(24.5799043062, 109.2440191388, 118.1200956938);
  border-radius: 0;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr td.day {
  width: 1.4rem;
  border-right: 0.1rem solid #ededed;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr td.day:last-child {
  border-right-width: 0;
}
.adminRegister .adminBody .datepicker.dropdown-menu table tr td.range {
  background-color: #eeeeee;
}
.adminRegister .adminBody .datepicker.dropdown-menu .new,
.adminRegister .adminBody .datepicker.dropdown-menu .old,
.adminRegister .adminBody .datepicker.dropdown-menu .disabled,
.adminRegister .adminBody .datepicker.dropdown-menu .disabled:hover {
  color: #ccc;
}
.adminRegister .adminBody .adminRegisterWrap {
  padding: 1.6rem;
}
.adminRegister .adminBody .adminRegisterWrap form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.adminRegister .adminBody .adminRegisterWrap form .btnWrapper {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: calc(100% - 1.2rem);
  margin-top: 3.6rem;
}
.adminRegister .adminBody .adminRegisterWrap form .btnWrapper :nth-child(1) {
  width: 100%;
  background-color: #007AFF;
  color: #fff;
  cursor: pointer;
  padding: 1.4rem 2rem;
  border-radius: 1.2rem;
  border: none;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.2rem;
}
.adminRegister .adminBody .adminRegisterWrap .birthInputBox {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.adminRegister .adminBody .adminRegisterWrap .inputLabel {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: -2%;
}
.adminRegister .adminBody .adminRegisterWrap .inputStyle {
  width: 100%;
  border-radius: 1.2rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(60, 60, 67, 0.18);
  color: rgba(60, 60, 67, 0.6);
  background-color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
}
.adminRegister .adminBody .adminRegisterWrap .inputStyle.dateSelector {
  position: relative;
}

.boardContent {
  width: 100%;
  height: calc(100% - 8.4rem);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.boardContent .reservationHeader {
  padding: 1.6rem 1.6rem 0 1.6rem;
  background: #ffffff;
  border-bottom: 1px solid #F2F2F7;
}
.boardContent .reservationHeader ul {
  gap: 1.6rem;
  display: flex;
  align-items: center;
}
.boardContent .reservationHeader li {
  height: 40px;
  padding: 0 0.4rem;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
}
.boardContent .reservationHeader li a {
  display: flex;
  padding: 0.8rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.33;
  color: #000000;
}
.boardContent .reservationHeader li.active {
  border-color: #007AFF;
}
.boardContent .reservationHeader li.active a {
  color: #007AFF;
}
.boardContent .boardHeader {
  height: 2.8rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-self: stretch;
  align-items: center;
  margin-bottom: 2.4rem;
}
.boardContent .boardHeader .welcomMention {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.boardContent .boardHeader .welcomMention .iconBox {
  width: 2.5rem;
  height: 2.5rem;
  background-image: url("./../../img/lunch.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.boardContent .boardHeader .welcomMention p {
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.8rem;
  letter-spacing: -0.4px;
}
.boardContent .leftHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.4rem;
}
.boardContent .todayDate {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: -0.28px;
}
.boardContent .communityBodyWrap {
  height: calc(100% - 5.7rem);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: auto;
}
.boardContent .communityBodyWrap::-webkit-scrollbar {
  display: none;
}
.boardContent .communityBodyWrap .firstArea {
  margin-top: 1.3rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.boardContent .communityBodyWrap .firstArea .menuHeader {
  width: 34rem;
  margin-bottom: 0.6rem;
}
.boardContent .communityBodyWrap .firstArea .menuHeader span:first-child {
  margin-right: 0.4rem;
  font-size: 1.2rem;
}
.boardContent .communityBodyWrap .firstArea .menuHeader span:nth-child(2) {
  font-weight: 700;
}
.boardContent .communityBodyWrap .firstArea .menuHeader span:last-child {
  font-weight: 600;
  font-size: 0.8rem;
}
.boardContent .communityBodyWrap .firstArea .boardArea {
  height: 19.8rem;
  width: 34rem;
  display: flex;
  flex-flow: column wrap;
  padding: 0.6rem;
  border-radius: 1.2rem;
  align-items: flex-start;
  background-color: #FFFFFF;
  margin-bottom: 0.5rem;
  justify-content: center;
}
.boardContent .communityBodyWrap .firstArea .boardArea.menuBoard {
  height: 25rem;
}
.boardContent .communityBodyWrap .firstArea .boardArea > .menuImgBox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  height: 100%;
  border-radius: 1.2rem;
  background-size: 106%;
  background-position: -1.3rem 0em;
  background-repeat: no-repeat;
}
.boardContent .communityBodyWrap .firstArea .boardArea .description {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.boardContent .communityBodyWrap .firstArea .menuBoard {
  background-color: #f2f2f7;
}
.boardContent .communityBodyWrap .firstArea .newContent {
  width: 32.5rem;
}
.boardContent .communityBodyWrap .firstArea .weatherBoard {
  display: flex;
  flex-flow: column nowrap;
}
.boardContent .communityBodyWrap .firstArea .weatherBoard .topBox,
.boardContent .communityBodyWrap .firstArea .weatherBoard .bottomBox {
  width: 100%;
  height: 50%;
  display: flex;
  flex-flow: row nowrap;
  padding: 1rem 0;
}
.boardContent .communityBodyWrap .firstArea .weatherBoard .topBox > .subBox,
.boardContent .communityBodyWrap .firstArea .weatherBoard .bottomBox > .subBox {
  flex: 1;
}
.boardContent .communityBodyWrap .firstArea .weatherBoard .topBox > .subBox .mainImg,
.boardContent .communityBodyWrap .firstArea .weatherBoard .bottomBox > .subBox .mainImg {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.boardContent .communityBodyWrap .firstArea .weatherBoard .topBox > .subBox .mainImg .imgBox,
.boardContent .communityBodyWrap .firstArea .weatherBoard .bottomBox > .subBox .mainImg .imgBox {
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.boardContent .communityBodyWrap .firstArea .weatherBoard .topBox > .subBox > .timeBox,
.boardContent .communityBodyWrap .firstArea .weatherBoard .bottomBox > .subBox > .timeBox {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-family: "ONE-Mobile-Title";
  font-weight: 400;
}
.boardContent .communityBodyWrap .firstArea .weatherBoard .topBox > .subBox .weatherText,
.boardContent .communityBodyWrap .firstArea .weatherBoard .bottomBox > .subBox .weatherText {
  display: flex;
  justify-content: center;
}
.boardContent .communityBodyWrap .firstArea .weatherBoard .topBox > .subBox > .tempBox,
.boardContent .communityBodyWrap .firstArea .weatherBoard .bottomBox > .subBox > .tempBox {
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  font-family: "ONE-Mobile-Regular", sans-serif;
  margin-top: 0.3rem;
}
.boardContent .communityBodyWrap .firstArea #weatherInfoTomorrow {
  margin-bottom: 2rem;
}

@media (min-width: 769px) {
  body .firstArea > :nth-child(1) {
    width: 90% !important;
  }
  body .firstArea > :nth-child(2) {
    width: 90% !important;
  }
}
.modifyModal .datePickerBg {
  background-color: rgba(84, 84, 88, 0.6509803922);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 100000;
  display: none;
}
.modifyModal .datepicker.dropdown-menu {
  padding: 0;
  background-clip: border-box;
  border: none;
  border-radius: 0;
  animation: popup 0.2s ease-out forwards;
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100001;
}
.modifyModal .datepicker.dropdown-menu table {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.modifyModal .datepicker.dropdown-menu table thead {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.modifyModal .datepicker.dropdown-menu table thead tr {
  border-top: 0;
}
.modifyModal .datepicker.dropdown-menu table tbody {
  background-color: white;
}
.modifyModal .datepicker.dropdown-menu table tr {
  border-top: 0.1rem solid #ededed;
}
.modifyModal .datepicker.dropdown-menu table tr td,
.modifyModal .datepicker.dropdown-menu table tr th {
  width: auto;
  height: 1.6rem;
  padding: 0.8rem;
  font-size: 1.2rem;
  border-radius: 0;
  transition: background-color 0.6s ease-out;
}
.modifyModal .datepicker.dropdown-menu table tr td:hover, .modifyModal .datepicker.dropdown-menu table tr td.active:hover, .modifyModal .datepicker.dropdown-menu table tr td:active:hover,
.modifyModal .datepicker.dropdown-menu table tr th:hover,
.modifyModal .datepicker.dropdown-menu table tr th.active:hover,
.modifyModal .datepicker.dropdown-menu table tr th:active:hover {
  border-color: #ededed;
  border-radius: 0;
  transition: background-color 0.2s ease-out;
}
.modifyModal .datepicker.dropdown-menu table tr td.focused, .modifyModal .datepicker.dropdown-menu table tr td.selected,
.modifyModal .datepicker.dropdown-menu table tr th.focused,
.modifyModal .datepicker.dropdown-menu table tr th.selected {
  background-color: #24a0ad;
  border-color: #ededed;
  border-radius: 0;
}
.modifyModal .datepicker.dropdown-menu table tr td.active, .modifyModal .datepicker.dropdown-menu table tr td.active:focus, .modifyModal .datepicker.dropdown-menu table tr td.active.active:hover, .modifyModal .datepicker.dropdown-menu table tr td:active:focus, .modifyModal .datepicker.dropdown-menu table tr td.highlighted,
.modifyModal .datepicker.dropdown-menu table tr th.active,
.modifyModal .datepicker.dropdown-menu table tr th.active:focus,
.modifyModal .datepicker.dropdown-menu table tr th.active.active:hover,
.modifyModal .datepicker.dropdown-menu table tr th:active:focus,
.modifyModal .datepicker.dropdown-menu table tr th.highlighted {
  background-color: rgb(229.5, 229.5, 229.5);
  border-color: #ededed;
}
.modifyModal .datepicker.dropdown-menu table tr th.datepicker-switch {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: inherit;
  border-radius: 0;
}
.modifyModal .datepicker.dropdown-menu table tr th.prev,
.modifyModal .datepicker.dropdown-menu table tr th.next {
  color: #ffffff;
  background-color: rgb(22.8229665072, 101.4354066986, 109.6770334928);
  border-radius: 0;
}
.modifyModal .datepicker.dropdown-menu table tr th.dow {
  padding: 0.2rem 1.2rem;
  font-size: 1.2rem;
  line-height: 2;
  color: #ffffff;
  background-color: rgb(25.4583732057, 113.1483253589, 122.3416267943);
  border-top: 0.1rem solid rgb(24.5799043062, 109.2440191388, 118.1200956938);
  border-radius: 0;
}
.modifyModal .datepicker.dropdown-menu table tr td.day {
  width: 1.4rem;
  border-right: 0.1rem solid #ededed;
}
.modifyModal .datepicker.dropdown-menu table tr td.day:last-child {
  border-right-width: 0;
}
.modifyModal .datepicker.dropdown-menu table tr td.range {
  background-color: #eeeeee;
}
.modifyModal .datepicker.dropdown-menu .new,
.modifyModal .datepicker.dropdown-menu .old,
.modifyModal .datepicker.dropdown-menu .disabled,
.modifyModal .datepicker.dropdown-menu .disabled:hover {
  color: #ccc;
}
.modifyModal .reservationBox {
  width: 100%;
  padding: 1.6rem;
}
.modifyModal .reservationBox .reservationInputArea {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.modifyModal .reservationBox .reservationInputArea .inputRow label {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: -2%;
  margin-bottom: 0.2rem;
  color: #48484a;
}
.modifyModal .reservationBox .reservationInputArea .inputRow .inputStyle {
  width: 100%;
  border-radius: 1.2rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(60, 60, 67, 0.18);
  color: #000;
  background-color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
}
.modifyModal .reservationBox .reservationInputArea .inputRow .inputStyle:disabled {
  color: rgba(0, 0, 0, 0.3137254902);
}
.modifyModal .reservationBox .reservationInputArea .inputRow .inputStyle.dateSelector {
  position: relative;
}
.modifyModal .reservationBox .reservationInputArea .inputRow .inputStyle.selectInput {
  position: relative;
  background-image: url(../../img//attendanceDropDown.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
}
.modifyModal .reservationBox .reservationInputArea .inputRow .roomTypeWrap {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.modifyModal .reservationBox .reservationInputArea .inputRow .roomTypeWrap button {
  border-radius: 1rem;
  padding: 0.7rem 1.4rem;
  border: 0.1rem solid rgba(60, 60, 67, 0.3019607843);
  background-color: #fff;
  color: #636366;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}
.modifyModal .reservationBox .reservationInputArea .inputRow .roomTypeWrap button.active {
  border: 0;
  background-color: #007aff;
  color: #fff;
}
.modifyModal .reservationBox .reservationInputArea .inputRow .timeWrap {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.modifyModal .reservationBox .saveTimeBtn {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  margin-top: 1.6rem;
  background-color: #007aff;
  cursor: pointer;
  font-size: 1.7rem;
  font-font-style: normal;
  font-font-weight: 700;
  font-line-height: 2.2rem;
  font-letter-spacing: -0.4px;
  color: #fff;
  border-radius: 1.2rem;
}

.participatingListBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  background-color: rgba(60, 60, 67, 0.3019607843);
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.participatingListWrap {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background-color: #fff;
  padding: 1.6rem 2.4rem;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  width: 20rem;
  height: 30rem;
  display: none;
  z-index: 600;
}
.participatingListWrap .partiListHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.1rem solid rgba(60, 60, 67, 0.3019607843);
  padding-bottom: 1rem;
}
.participatingListWrap .partiListHeader p {
  line-height: 2.4rem;
  font-size: 1.6rem;
  font-weight: bold;
}
.participatingListWrap .partiListHeader img {
  cursor: pointer;
}
.participatingListWrap .partiListBody {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.6rem;
  width: 100%;
  height: calc(100% - 8.5rem);
  overflow: auto;
  overflow: auto; /* 스크롤은 가능하지만, 스크롤바만 숨기기 */
  -ms-overflow-style: none; /* IE & Edge 스크롤바 숨기기 */
  scrollbar-width: none; /* Firefox 스크롤바 숨기기 */
}
.participatingListWrap .partiListBody::-webkit-scrollbar {
  display: none;
}
.participatingListWrap .partiListBody .empty-parti {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  justify-content: center;
  align-items: center;
}
.participatingListWrap .partiListBody .partiListRow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.participatingListWrap .partiListBody .partiListRow img {
  width: 2rem;
  height: 2rem;
}
.participatingListWrap .partiListBody .partiListRow img:not(.host) {
  filter: grayscale(1);
}
.participatingListWrap .partiListBody .partiListRow p {
  width: calc(100% - 2.8rem);
  height: 2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.4rem;
}
.participatingListWrap .partiListFooter {
  width: 100%;
  height: 3.5rem;
  display: flex;
  justify-content: flex-end;
}
.participatingListWrap .partiListFooter button {
  background-color: #007aff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0.7rem 1.2rem;
  border-radius: 1rem;
  border: none;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
}
.participatingListWrap .partiListFooter button.partiCancel {
  background-color: #ff3b30;
}

.conferenceReservation {
  height: calc(100% - 8.4rem);
  overflow: hidden;
}
.conferenceReservation .reservationBtnWrap,
.conferenceReservation .roomTypeBtnWrap {
  display: flex;
  gap: 1.1rem;
  align-items: center;
}
.conferenceReservation .reservationBtnWrap .reservationBtn,
.conferenceReservation .reservationBtnWrap .roomTypeBtn,
.conferenceReservation .roomTypeBtnWrap .reservationBtn,
.conferenceReservation .roomTypeBtnWrap .roomTypeBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0.7rem 1.2rem;
  border-radius: 1rem;
  border: none;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  background-color: #ebebf5;
  color: #3c3c43;
}
.conferenceReservation .reservationBtnWrap .reservationBtn.active,
.conferenceReservation .reservationBtnWrap .roomTypeBtn.active,
.conferenceReservation .roomTypeBtnWrap .reservationBtn.active,
.conferenceReservation .roomTypeBtnWrap .roomTypeBtn.active {
  background-color: #007AFF;
  color: #fff;
}
.conferenceReservation .reservationBtnWrap .reservationBtn.active a,
.conferenceReservation .reservationBtnWrap .roomTypeBtn.active a,
.conferenceReservation .roomTypeBtnWrap .reservationBtn.active a,
.conferenceReservation .roomTypeBtnWrap .roomTypeBtn.active a {
  color: #fff;
}
.conferenceReservation .reservationHeader {
  padding: 1.6rem 1.6rem 0 1.6rem;
  background: #ffffff;
  border-bottom: 1px solid #F2F2F7;
}
.conferenceReservation .reservationHeader ul {
  gap: 1.6rem;
  display: flex;
  align-items: center;
}
.conferenceReservation .reservationHeader li {
  height: 40px;
  padding: 0 0.4rem;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
}
.conferenceReservation .reservationHeader li a {
  display: flex;
  padding: 0.8rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.33;
  color: #000000;
}
.conferenceReservation .reservationHeader li.active {
  border-color: #007AFF;
}
.conferenceReservation .reservationHeader li.active a {
  color: #007AFF;
}
.conferenceReservation .reservationBody {
  height: calc(100% - 5.7rem);
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.conferenceReservation .reservationBody::-webkit-scrollbar {
  display: none;
}
.conferenceReservation .reservationBody .addReservationBtn {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  display: flex;
  background-color: #007AFF;
  padding: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.conferenceReservation .reservationBody .addReservationBtn img {
  width: 2.8rem;
  height: 2.8rem;
}
.conferenceReservation .weekWrap {
  padding: 24px;
  background: #fff;
}
.conferenceReservation .weekWrap .week {
  margin-bottom: 0.8rem;
  padding: 0 1.6rem;
}
.conferenceReservation .weekWrap .week span {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6rem;
  color: rgba(60, 60, 67, 0.6);
}
.conferenceReservation .weekWrap .day span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  font-family: "ONE-Mobile-Title";
  font-size: 16px;
  font-weight: 700;
}
.conferenceReservation .weekWrap .day span.today {
  background-color: #007AFF;
  color: #fff;
  border-radius: 50%;
}
.conferenceReservation .weekWrap .day span.today ~ * {
  color: rgba(60, 60, 67, 0.6);
}
.conferenceReservation .reservationWrap {
  padding: 16px;
  height: calc(100% - 19.4rem);
}
.conferenceReservation .reservationTableBody {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 3.4rem);
  overflow: auto;
  gap: 1.6rem;
  margin-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.conferenceReservation .reservationTableBody::-webkit-scrollbar {
  display: none;
}
.conferenceReservation .reservationTableBody .reservationTr {
  width: 100%;
  padding: 1.6rem;
  background-color: #fff;
  border-radius: 1.2rem;
  position: relative;
}
.conferenceReservation .reservationTableBody .reservationTr > p {
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 2%;
  font-weight: 400;
  display: flex;
  justify-content: center;
}
.conferenceReservation .reservationTableBody .reservationTr.disabled {
  opacity: 0.5;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceNameLine {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceNameLine .conferenceType {
  line-height: 1.6rem;
  text-align: center;
  border-radius: 0.4rem;
  padding: 0.2rem 0.4rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceNameLine .conferenceType.inside {
  background-color: #00c7be;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceNameLine .conferenceType.outside {
  background-color: #007aff;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceNameLine .conferenceName {
  width: calc(100% - 9.3rem);
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 2%;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceNameLine .participating-btn {
  text-align: center;
  border-radius: 0.4rem;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  background-color: #32ade6;
  color: #fff;
  font-weight: bold;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceNameLine .participating-btn.hide-btn {
  display: none;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceInfoLine {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 1.6rem;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceInfoLine .divider {
  width: 0.1rem;
  height: 1.6rem;
  background-color: rgba(60, 60, 67, 0.3019607843);
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceInfoLine > p {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceInfoLine > p img {
  width: 1.6rem;
  height: 1.6rem;
  filter: grayscale(1);
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceInfoLine > p span {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6rem;
  color: #000;
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceInfoLine > p span.current-meeting {
  background: linear-gradient(to top, transparent 25%, #bedfff 25%, #bedfff 75%, transparent 75%);
}
.conferenceReservation .reservationTableBody .reservationTr .conferenceInfoLine > p span.fontWeight400 {
  font-weight: 400;
  display: block;
  max-width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conferenceReservation span.time {
  font-size: 12px;
  font-weight: 700;
  color: #48484a;
  letter-spacing: -0.24px;
}
.conferenceReservation span.over {
  color: #007AFF;
}
.conferenceReservation span.under {
  color: #FF3B30;
}

.reservationDateWrap {
  padding: 2.4rem;
  background-color: #fff;
}
.reservationDateWrap .selectDate {
  gap: 8px;
}
.reservationDateWrap .selectDate > div > select {
  background-color: #fff;
}
.reservationDateWrap .today {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(127, 127, 127, 0.5);
  font-size: 1.2rem;
  font-weight: 400;
  color: #000000;
  box-sizing: border-box;
}
.reservationDateWrap .date {
  display: flex;
  align-items: center;
  font-family: "ONE-Mobile-Title";
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.4rem;
}
.reservationDateWrap .date > span {
  font-family: "ONE-Mobile-Title";
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.4rem;
}

.datePickerBg {
  background-color: rgba(84, 84, 88, 0.6509803922);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
  display: none;
}

.datepicker.dropdown-menu {
  padding: 0;
  background-clip: border-box;
  border: none;
  border-radius: 0;
  animation: popup 0.2s ease-out forwards;
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100;
}
.datepicker.dropdown-menu table {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.datepicker.dropdown-menu table thead {
  background-color: rgb(27.2153110048, 120.956937799, 130.7846889952);
}
.datepicker.dropdown-menu table thead tr {
  border-top: 0;
}
.datepicker.dropdown-menu table tbody {
  background-color: white;
}
.datepicker.dropdown-menu table tr {
  border-top: 0.1rem solid #ededed;
}
.datepicker.dropdown-menu table tr td,
.datepicker.dropdown-menu table tr th {
  width: auto;
  height: 1.6rem;
  padding: 0.8rem;
  font-size: 1.2rem;
  border-radius: 0;
  transition: background-color 0.6s ease-out;
}
.datepicker.dropdown-menu table tr td:hover, .datepicker.dropdown-menu table tr td.active:hover, .datepicker.dropdown-menu table tr td:active:hover,
.datepicker.dropdown-menu table tr th:hover,
.datepicker.dropdown-menu table tr th.active:hover,
.datepicker.dropdown-menu table tr th:active:hover {
  border-color: #ededed;
  border-radius: 0;
  transition: background-color 0.2s ease-out;
}
.datepicker.dropdown-menu table tr td.focused, .datepicker.dropdown-menu table tr td.selected,
.datepicker.dropdown-menu table tr th.focused,
.datepicker.dropdown-menu table tr th.selected {
  background-color: #24a0ad;
  border-color: #ededed;
  border-radius: 0;
}
.datepicker.dropdown-menu table tr td.active, .datepicker.dropdown-menu table tr td.active:focus, .datepicker.dropdown-menu table tr td.active.active:hover, .datepicker.dropdown-menu table tr td:active:focus, .datepicker.dropdown-menu table tr td.highlighted,
.datepicker.dropdown-menu table tr th.active,
.datepicker.dropdown-menu table tr th.active:focus,
.datepicker.dropdown-menu table tr th.active.active:hover,
.datepicker.dropdown-menu table tr th:active:focus,
.datepicker.dropdown-menu table tr th.highlighted {
  background-color: rgb(229.5, 229.5, 229.5);
  border-color: #ededed;
}
.datepicker.dropdown-menu table tr th.datepicker-switch {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: inherit;
  border-radius: 0;
}
.datepicker.dropdown-menu table tr th.prev,
.datepicker.dropdown-menu table tr th.next {
  color: #ffffff;
  background-color: rgb(22.8229665072, 101.4354066986, 109.6770334928);
  border-radius: 0;
}
.datepicker.dropdown-menu table tr th.dow {
  padding: 0.2rem 1.2rem;
  font-size: 1.2rem;
  line-height: 2;
  color: #ffffff;
  background-color: rgb(25.4583732057, 113.1483253589, 122.3416267943);
  border-top: 0.1rem solid rgb(24.5799043062, 109.2440191388, 118.1200956938);
  border-radius: 0;
}
.datepicker.dropdown-menu table tr td.day {
  width: 1.4rem;
  border-right: 0.1rem solid #ededed;
}
.datepicker.dropdown-menu table tr td.day:last-child {
  border-right-width: 0;
}
.datepicker.dropdown-menu table tr td.range {
  background-color: #eeeeee;
}
.datepicker.dropdown-menu .new,
.datepicker.dropdown-menu .old,
.datepicker.dropdown-menu .disabled,
.datepicker.dropdown-menu .disabled:hover {
  color: #ccc;
}

.reservationBox {
  width: 100%;
  padding: 1.6rem;
}
.reservationBox .reservationInputArea {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.reservationBox .reservationInputArea .inputRow label {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: -2%;
  margin-bottom: 0.2rem;
  color: #48484a;
}
.reservationBox .reservationInputArea .inputRow .inputStyle {
  width: 100%;
  border-radius: 1.2rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(60, 60, 67, 0.18);
  color: #000;
  background-color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
}
.reservationBox .reservationInputArea .inputRow .inputStyle:disabled {
  color: rgba(0, 0, 0, 0.3137254902);
}
.reservationBox .reservationInputArea .inputRow .inputStyle.dateSelector {
  position: relative;
}
.reservationBox .reservationInputArea .inputRow .inputStyle.selectInput {
  position: relative;
  background-image: url(../../img//attendanceDropDown.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
}
.reservationBox .reservationInputArea .inputRow .roomTypeWrap {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.reservationBox .reservationInputArea .inputRow .roomTypeWrap button {
  border-radius: 1rem;
  padding: 0.7rem 1.4rem;
  border: 0.1rem solid rgba(60, 60, 67, 0.3019607843);
  background-color: #fff;
  color: #636366;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}
.reservationBox .reservationInputArea .inputRow .roomTypeWrap button.active {
  border: 0;
  background-color: #007aff;
  color: #fff;
}
.reservationBox .reservationInputArea .inputRow .timeWrap {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.reservationBox .saveTimeBtn {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  margin-top: 1.6rem;
  background-color: #007aff;
  cursor: pointer;
  font-size: 1.7rem;
  font-font-style: normal;
  font-font-weight: 700;
  font-line-height: 2.2rem;
  font-letter-spacing: -0.4px;
  color: #fff;
  border-radius: 1.2rem;
}

.myConferenceReservation {
  height: calc(100% - 8.4rem);
  overflow: hidden;
}
.myConferenceReservation .reservationBtnWrap {
  display: flex;
  gap: 1.1rem;
  align-items: center;
}
.myConferenceReservation .reservationBtnWrap .reservationBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0.7rem 1.2rem;
  border-radius: 1rem;
  border: none;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  background-color: #ebebf5;
  color: #3c3c43;
}
.myConferenceReservation .reservationBtnWrap .reservationBtn.active {
  background-color: #007AFF;
  color: #fff;
}
.myConferenceReservation .reservationHeader {
  padding: 1.6rem 1.6rem 0 1.6rem;
  background: #ffffff;
  border-bottom: 1px solid #F2F2F7;
}
.myConferenceReservation .reservationHeader ul {
  gap: 1.6rem;
  display: flex;
  align-items: center;
}
.myConferenceReservation .reservationHeader li {
  height: 40px;
  padding: 0 0.4rem;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
}
.myConferenceReservation .reservationHeader li a {
  display: flex;
  padding: 0.8rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.33;
  color: #000000;
}
.myConferenceReservation .reservationHeader li.active {
  border-color: #007AFF;
}
.myConferenceReservation .reservationHeader li.active a {
  color: #007AFF;
}
.myConferenceReservation .reservationBody {
  height: calc(100% - 5.7rem);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.myConferenceReservation .reservationBody::-webkit-scrollbar {
  display: none;
}
.myConferenceReservation .reservationWrap {
  padding: 16px;
  height: 100%;
  position: relative;
}
.myConferenceReservation .reservationWrap .addReservationBtn {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  display: flex;
  background-color: #007AFF;
  padding: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.myConferenceReservation .reservationWrap .addReservationBtn img {
  width: 2.8rem;
  height: 2.8rem;
}
.myConferenceReservation .reservationTableBody {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 3.4rem);
  overflow: auto;
  gap: 1.6rem;
  margin-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.myConferenceReservation .reservationTableBody::-webkit-scrollbar {
  display: none;
}
.myConferenceReservation .reservationTableBody .myReservationTr {
  width: 100%;
  display: flex;
  padding: 1.6rem;
  background-color: #fff;
  border-radius: 1.2rem;
}
.myConferenceReservation .reservationTableBody .myReservationTr > p {
  width: 100%;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 2%;
  font-weight: 400;
  display: flex;
  justify-content: center;
}
.myConferenceReservation .reservationTableBody .myReservationTr.disabled {
  opacity: 0.5;
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area {
  width: calc(100% - 6.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area .conferenceNameLine {
  width: 100%;
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area .conferenceNameLine .conferenceType {
  line-height: 1.6rem;
  text-align: center;
  border-radius: 0.4rem;
  padding: 0.2rem 0.4rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area .conferenceNameLine .conferenceType.inside {
  background-color: #00c7be;
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area .conferenceNameLine .conferenceType.outside {
  background-color: #007aff;
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area .conferenceNameLine .conferenceName {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 2%;
  max-width: calc(100% - 5.8rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area .infoRow {
  display: flex;
  gap: 0.4rem;
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area .infoRow > span {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: #000;
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area .infoRow > img {
  width: 1.6rem;
  height: 1.6rem;
  filter: grayscale(1);
}
.myConferenceReservation .reservationTableBody .myReservationTr .info-area .infoRow.conferenceTimeLine .nowReservation {
  background: linear-gradient(to top, transparent 25%, #bedfff 25%, #bedfff 75%, transparent 75%);
}
.myConferenceReservation .reservationTableBody .myReservationTr .status-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1.6rem;
  border-left: 0.1rem solid rgba(60, 60, 67, 0.3019607843);
}
.myConferenceReservation .reservationTableBody .myReservationTr .status-area img {
  width: 2.4rem;
  height: 2.4rem;
}
.myConferenceReservation .reservationTableBody .myReservationTr .status-area span {
  color: rgba(60, 60, 67, 0.6);
  font-family: ONE Mobile OTF;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2rem;
}
.myConferenceReservation .reservationTableBody .myReservationTr .status-area.meetCancelBtn {
  cursor: pointer;
}
.myConferenceReservation span.time {
  font-size: 12px;
  font-weight: 700;
  color: #48484a;
  letter-spacing: -0.24px;
}
.myConferenceReservation span.over {
  color: #007AFF;
}
.myConferenceReservation span.under {
  color: #FF3B30;
}

.calendar-container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 auto;
  font-family: "Arial", sans-serif;
  background-color: #fff;
}
.calendar-container #calendar {
  height: 100%;
}
.calendar-container .fc-header-toolbar {
  margin: 10px !important;
}
.calendar-container .fc-header-toolbar .fc-toolbar-chunk {
  display: flex;
}
.calendar-container .fc-header-toolbar .fc-toolbar-chunk .fc-prev-button,
.calendar-container .fc-header-toolbar .fc-toolbar-chunk .fc-next-button {
  background-color: transparent;
  border: 0;
}
.calendar-container .fc-header-toolbar .fc-toolbar-chunk .fc-prev-button:focus-visible,
.calendar-container .fc-header-toolbar .fc-toolbar-chunk .fc-next-button:focus-visible {
  outline: none !important;
}
.calendar-container .fc-header-toolbar .fc-toolbar-chunk .fc-prev-button:active,
.calendar-container .fc-header-toolbar .fc-toolbar-chunk .fc-next-button:active {
  background-color: #e4e4e4;
}
.calendar-container .fc-header-toolbar .fc-toolbar-chunk .fc-prev-button .fc-icon,
.calendar-container .fc-header-toolbar .fc-toolbar-chunk .fc-next-button .fc-icon {
  color: #000;
  font-size: 2em;
}
.calendar-container .fc-event-custom {
  white-space: normal;
  word-wrap: break-word;
  font-size: 0.7vh;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "ONE-Mobile-Regular", sans-serif;
  background-color: #a0d4da;
}
.calendar-container .fc-event-holiday {
  background-color: #fff;
  color: #ff3b30;
}
.calendar-container .fc-event-leave {
  white-space: normal;
  word-wrap: break-word;
  font-size: 0.5vw;
  background-color: #F2F2F7;
  color: #3C3C43;
}
.calendar-container .fc-event-meeting {
  white-space: normal;
  word-wrap: break-word;
  font-size: 0.7vh;
  background-color: #e8f154;
  color: #3C3C43;
}
.calendar-container .fc-event,
.calendar-container .fc-daygrid-event {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.calendar-container .fc-daygrid-day-number {
  font-weight: 600;
}
.calendar-container .fc-weekend a.fc-daygrid-day-number {
  color: #FF3B30 !important;
}
.calendar-container .calendar-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.calendar-container .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 5px;
  flex-grow: 1;
}
.calendar-container .fc-col-header {
  background-color: #f3f3f3;
}
.calendar-container .fc-col-header .fc-col-header-cell {
  padding: 3px 0;
}
.calendar-container .fc-col-header .fc-col-header-cell.fc-day-sun a, .calendar-container .fc-col-header .fc-col-header-cell.fc-day-sat a {
  color: #ff3b30 !important;
}
.calendar-container .fc-theme-standard td,
.calendar-container .fc-theme-standard th {
  border-right: 0;
}
.calendar-container .fc-scrollgrid {
  border-left-width: 0px;
}
.calendar-container .fc-day-today {
  background-color: transparent !important;
}
.calendar-container .fc-day-today a.fc-daygrid-day-number {
  background-color: #007aff;
  color: #fff;
  border-radius: 8px;
  padding: 2px;
  margin: 2px;
}
.calendar-container .calendar-day {
  position: relative;
  min-height: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  padding: 5px;
  text-align: center;
}
.calendar-container .calendar-day.today {
  background-color: #ffeb3b;
  font-weight: bold;
}
.calendar-container .calendar-day .event {
  font-size: 12px;
  background-color: #007AFF;
  color: white;
  padding: 3px 5px;
  border-radius: 4px;
  margin-top: 2px;
  text-align: center;
}
.calendar-container .calendar-day .event.special-event {
  background-color: #ff9800;
}
.calendar-container .bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  background-color: #f8f8f8;
  border-top: 2px solid #ddd;
}
.calendar-container .fc-icon {
  color: white;
}/*# sourceMappingURL=style.css.map */