.layerPopup {
    height: 100vh;
    height: 100dvh;
}

.boxList .checkboxCustom.disabled {
    background: #dfe3eb;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: default;
}

.checkboxCustom.disabled .labelText {
    color: #666B77;
}

.boxList .checkboxCustom {
    background: #16232C;
    position: relative;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
    border: solid 1px #7bcc1200;
}

.dark .boxList .checkboxCustom {
    border: solid 1px #2A3740;
    background: #2A3740;
}

.boxList .checkboxCustom:hover {
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
}

.boxList .checkboxCustom.checked {
    border: solid 1px #7BCC12;
    background: rgba(138, 198, 65, 0.2);
}

.selectCar .boxList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 0;
}

.listHalf .boxList {
    gap: 20px;
}

.listHalf .boxList .checkboxCustom {
    width: calc(50% - 10px);
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}

.listHalf .boxList .checkboxCustom.full {
    width: 100%;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    cursor: default;
    padding: 0;
}

.dark .listHalf .boxList .checkboxCustom.full {
    border: none;
}

.modeLight.full .printBox {
    max-width: 30%;
}

.dark .full .labelInfo p {
    color: #fff;
}

.listHalf .boxList .labelText {
    font-weight: 600;
    text-align: center;
}

.selectCar .boxList .checkboxCustom {
    width: 100%;
}

.full .labelInfo p {
    color: #05141F;
}

.boxList .full .labelInfo {
    padding-bottom: 0;
    font-size: 15px;
}

.boxList .full .labelText {
    font-size: 20px;
}

.boxList {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.windowQr .popupText {
    color: #666B77;
    margin-top: -10px;
}

.boxList input:checked~.checkmark {
    background: url('../../img/icon_check_w.svg')#7BCC12 center no-repeat;
    background-size: 16px;
    opacity: 1;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    display: inline-block;
}

.checked .checkmark {
    background: url('../../img/icon_check_w.svg')#7BCC12 center no-repeat;
    background-size: 16px;
    opacity: 1;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.cautionText {
    color: #ff4a48;
    margin-top: 10px;
    width: 100%;
    font-size: 20px;
    display: inline-block;
    text-align: left;
}

.inputArea.active .cautionText {
    display: inline-block;

}

.dark .btnClose.btnSubClose {
    color: #fff;
    background: #666B77;
    border: none;

}

.dark .btnClose.btnSubClose:hover,
.dark .btnClose.btnSubClose:active {
    background: #585b63;
    border: none;
}

.btnClose.btnSubClose {
    background-color: #dfe3eb;
    height: 40px;
    font-size: 16px;
    padding: 0 20px;
    min-width: 120px;
    border-radius: 40px;
    border: none;
}

.btnClose.btnSubClose:hover {
    background-color: #cdced4;

    border: none;
}

.popupWrap {
    border-radius: 20px;
    max-width: 380px;
    min-width: 380px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 90vh;
    overflow-y: auto;
}

.popupBottom {
    padding-top: 30px;
    padding-bottom: 30px;
    position: sticky;
    bottom: 0;
    background: #f3f5f8;
}

.popupTitle {
    border-bottom: solid 1px #D7DBE9;
    font-size: 20px;
    padding: 14px 0;
    border-radius: 20px 20px 0 0;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.popupWrap .btnSub {
    height: 40px;
    line-height: inherit;
    padding: 0 20px;
    font-size: 16px;
    min-width: 120px;
}

.popupWrap .btnSub.red {
    background: #FF2727;
}

.popupWrap .btnSub.red:hover,
.popupWrap .btnSub.red:active {
    background: #dd1e1e;
}

.popupText {
    word-break: keep-all;
    font-size: 18px;
    padding: 30px 30px 0px 30px;
    color: #05141F;
    text-align: center;
    width: 100%;
}

.popupTextRed {
    color: #FF2727;
    word-break: keep-all;
    font-size: 15px;
    margin-top: 20px;
}

.dark .popupText {
    font-size: 16px;
    color: #fff;
}

.dark .popupTitle {
    border-bottom: solid 1px #4D606D;

}

.popupListArea {
    padding: 10px 10px;
}

.popupAgreeArea {
    padding: 30px;
}



.dark .btnGoHome {
    border: solid 1px #666B77;
}

.btnClose:hover {
    border: solid 1px #05141F;
}

.dark .btnGoHome:hover {
    border: solid 1px #b1b3bd;
}

.dark .btnClose:hover {
    border: solid 1px #fff;

}

.managerHeader .headerBox {
    gap: 20px;
    margin: 0 auto;
}

.contentsWrap {
    /* max-width: 700px; */
    width: 100%;
    margin: 0 auto;
    min-height: 100%;
    height: auto;
    display: block;
    min-height: 100%;
}

.logoWrap {
    width: 200px;
    padding: 0;
    height: 50px;
}

.logoWrap button {
    padding: 12px 0;
    font-size: 22px;
    font-size: 14px;
    white-space: nowrap;

}

.headerBox .icon {
    display: inline-block;
    height: 100%;
    width: 30px;
    background-size: 30px;
}

.btnBack,
.btnHome {
    font-size: 16px;
    gap: 4px;
}

.btnSetHome {
    background: url(../../img/icon_menu.svg) center no-repeat;
    background-size: contain;
}

.headerLeft,
.headerRight {
    min-width: 56px;
}

.btnBack .icon {
    width: 12px;
    height: 30px;
    background-size: contain;
}

.header {
    gap: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.headerClock {
    gap: 10px;
}

.kioskHeader .headerWrap {
    padding: 0 20px;
}

.headerTime {
    font-size: 20px;
    font-weight: 600;
}

.headerService {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 40px;
}

.serviceBtn {
    padding: 0 20px;
    border-radius: 40px;
    font-size: 16px;
    line-height: 38px;
    border: solid 1px #D7DBE9;
    background: none;
    white-space: nowrap;
}

.dark .serviceBtn {
    border: solid 1px #727F87;
}

.dark .serviceBtn:hover,
.dark .serviceBtn:active {
    border: solid 1px #fff;
}

.serviceBtn:hover,
.serviceBtn:active {
    border: solid 1px #b1b3bd;
    background: none;
}

.serviceBtn.remote {
    background: #7BCC12;
    color: #fff;
    border: solid 1px #7BCC12;
}

.serviceBtn.remote:hover,
.serviceBtn.remote:active {
    background: #67AB14;
    border: solid 1px #67AB14;
}

.infoCall {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.menuPanel .infoCall {
    background: #F3F5F9;
    width: 100%;
    border-radius: 6px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 40px;
    margin-bottom: 6px;
}

.dark .menuPanel .infoCall {
    background: #06141F;
}

.menuPanel .serviceBtn {
    width: 100%;
    border-radius: 6px;
    gap: 6px;
}

.infoCall .icon {
    background: url(../../img/iconCall.svg) center no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
}

.dark .infoCall .icon {
    background: url(../../img/dark/iconCall.svg) center no-repeat;
    background-size: contain;

}

.headerDate {
    font-size: 14px;
}

.main .headerWrap {
    height: 60px;
}

.settingMain .headerWrap {
    height: 60px;

}

.headerWrap {
    min-width: 300px;
    height: 50px;
    padding: 0 30px;
    border-bottom: solid 1px #D7DBE9;
}

.dark .headerWrap {
    border-bottom: solid 1px #2A3740;
}

.headerCenter {
    font-size: 20px;
}

.bodyWrap {
    padding: 50px 20px 40px 20px;
    min-width: 300px;
    min-height: 100%;
    height: auto;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
    display: block;
    text-align: center;
}

.settingMain .bodyWrap {
    padding-top: 60px;
}

.managerText {
    color: #666B77;
    font-size: 14px;
    white-space: nowrap;
    margin-left: 16px;
}

.dark .managerText {
    color: #B3B8BC;
}

.settingWrap {
    padding-top: 60px;
    height: 100%;
}

.setContent {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.deviceWrap {
    text-align: left;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 10px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    display: flex;
    flex-direction: column;
}

.dark .deviceWrap {
    background: #2A3740;
}

.appWrap .deviceWrap {
    gap: 0;
}

.setTime {
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    gap: 20px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
}

.dark .setTime {
    background: #2A3740;
}

.setTimeStatus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    gap: 10px;
}

.time {
    width: 100%;
    text-align: center;
    font-size: 16px;
}

.time p {
    font-size: inherit;
    color: inherit;
}

.setTimeArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #F3F5F9;
    height: 40px;
    padding: 0 20px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 6px;
    width: 100%;
    min-height: 40px;
}

.dark .setTimeArea {
    background: #364651;
}

.timeLunch {
    font-size: inherit;
    color: #666B77;
    display: inline-block;
    font-size: 16px;
}

.dark .timeLunch {
    color: #B3B8BC;
}

.setTimeTitle {
    font-size: 16px;
    font-weight: 500;
}

.timeClosed {
    color: #0066FF;
    font-weight: 600;
    font-size: 16px;
}

.timeStop {
    color: #FF2727;
    font-weight: 600;
    font-size: 16px;
}

.btnStatus {
    width: 100px;
    height: 40px;
    border-radius: 6px;
    background: none;
    border: solid 1px #D7DBE9;
    font-size: 16px;
}

.dark .btnStatus {
    background: #3f515d;
    border: solid 1px #3f515d;
}

.dark .btnStatus:hover {
    background: #4b606e;
    border: solid 1px #4b606e;
}

.btnStatus.btnPlay {
    background: #FF2727;
    color: #fff;
    border: solid 1px #FF2727;
}

.btnStatus:hover {
    border: solid 1px #b1b3bd;
}

.btnStatus.btnPlay:hover {
    background: #dd1e1e;
    border: solid 1px #dd1e1e;
}

.setDevice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 20px;
}

.deviceText {
    font-size: 14px;
    color: #666B77;
}

.dark .deviceText {
    color: #B3B8BC;
}

.deviceTitle {
    font-size: 20px;
    font-weight: 600;
}

.deviceInfo {
    font-size: 16px;
    color: #666B77;
}

.dark .deviceInfo {
    color: #B3B8BC;
}

.btnQrText {
    font-size: 14px;
    color: #666B77;

}

.dark .btnQrText {
    color: #B3B8BC;
}

.btnQrTitle {
    font-size: 16px;
}

.btnQr {
    height: 50px;
    min-height: 50px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 6px;
    border: solid 1px #D7DBE9;
    background: #fff;

}

.dark .btnQr {
    background: #3f515d;
    border: solid 1px #3f515d;
}

.btnQr:hover,
.btnQr:active {
    border: solid 1px #b1b3bd;
}

.dark .btnQr:hover,
.dark .btnQr:active {
    background: #4b606e;
    border: solid 1px #4b606e;
}

.btnLink {
    height: 50px;
    background: #7BCC12;
    width: 100%;
    color: #fff;
    border-radius: 6px;
}

.btnLink:hover,
.btnLink:active {
    background: #67AB14;
}

.deviceBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 10px;
}

.deviceTop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.deviceIcon {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

}

.icon {
    width: 24px;
    height: 24px;
    display: inline-block;
}

.deviceP .icon {
    background: url(../../img/icon_pc.svg) center no-repeat;
    background-size: contain;

}

.deviceM .icon {
    background: url(../../img/icon_mo.svg) center no-repeat;
    background-size: contain;
}

.deviceP .deviceIcon {
    background: -o-linear-gradient(315deg, #2CAC65 0%, #6AD87E 100%);
    background: linear-gradient(135deg, #2CAC65 0%, #6AD87E 100%);
}

.deviceM .deviceIcon {
    background: -o-linear-gradient(315deg, #3670DC 0%, #74A0FF 100%);
    background: linear-gradient(135deg, #3670DC 0%, #74A0FF 100%);
}

.tabConWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    display: none;
    min-height: 100%;
    text-align: left;
    position: relative;
    width: 100%;
    min-height: 100%;
    height: auto;
}

.menuWrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
}

.btnMenu {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: solid 1px #D7DBE9;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 10px;
}

.dark .btnMenu {
    background: #2A3740;
    border: none;
}

.dark .btnMenu:hover,
.dark .btnMenu:active {
    border: none;
    background: rgb(37, 47, 56);
}

.menuText {
    font-size: 16px;
    white-space: nowrap;
}

.mainTitle {
    font-size: 40px;
    text-align: center;
    font-weight: 500;
}

.setMenu {
    margin-top: 20px;
}

.mainText {
    font-size: 24px;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 30px;
}

.btnMenu:hover,
.btnMenu:active {
    background: #fff;
    border: solid 1px #b1b3bd;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
}

.menuIcon {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: #F3F5F9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.dark .menuIcon {
    background: #3f515d;
}

.memuTitle {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}

.menuTime .icon {
    background: url(../../img/icon_time.svg) center no-repeat;
    background-size: contain;
}

.menuCustomer .icon {
    /* background: url(../../img/icon_customer.svg) center no-repeat; */
    background: url(../../img/icon_option.svg) center no-repeat;
    background-size: contain;
}

.menuCategory .icon {
    background: url(../../img/icon_list.svg) center no-repeat;
    background-size: contain;
}

.menuMode .icon {
    background: url(../../img/icon_mode.svg) center no-repeat;
    background-size: contain;
}

.menuPrint .icon {
    background: url(../../img/icon_print.svg) center no-repeat;
    background-size: contain;
}

.dark .menuCustomer .icon {
    background: url(../../img/dark/icon_customer.svg) center no-repeat;
    background-size: contain;
}

.dark .menuTime .icon {
    background: url(../../img/dark/icon_time.svg) center no-repeat;
    background-size: contain;
}

.dark .menuCategory .icon {
    background: url(../../img/dark/icon_list.svg) center no-repeat;
    background-size: contain;
}

.dark .menuMode .icon {
    background: url(../../img/dark/icon_mode.svg) center no-repeat;
    background-size: contain;
}

.dark .menuPrint .icon {
    background: url(../../img/dark/icon_print.svg) center no-repeat;
    background-size: contain;
}

.inputBox {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.inputArea.active .inputTitle {
    color: #7BCC12;
    font-weight: 600;
}

.dark .inputArea.active .inputTitle {
    color: #7BCC12;
}

.inputArea {
    width: 100%;
    margin: 0 auto;
}

.inputTitle {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 6px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.inputDelete {
    aspect-ratio: 1/1;
    background: url(../../img/icon_search_delete.svg) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none;
    width: 24px;
    right: 16px;
}

.inputDelete:active {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

input {
    border: solid 1px #D7DBE9;
    padding: 0 20px;
    padding-right: 46px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 44px;
}

.inputArea.active input {
    border: solid 1px #7BCC12;
}

.dark input {
    border: solid 1px #364651;

}

.codeWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 10px;
    /* margin-bottom: 20px; */
}

.codeWrap .inputArea input {
    border-width: 2px;
}

.codeWrap .inputArea.active input {
    border: solid 2px #7BCC12;
}

.codeWrap input {
    padding: 0 20px;
    padding-right: 40px;
    border-radius: 10px;
    font-size: 22px;
    line-height: 46px;
}

.codeWrap input::-webkit-input-placeholder {
    font-size: 22px;
    line-height: 46px;
}

.codeWrap input::-moz-placeholder {
    font-size: 22px;
    line-height: 46px;
}

.codeWrap input:-ms-input-placeholder {
    font-size: 22px;
    line-height: 46px;
}

.codeWrap input::-ms-input-placeholder {
    font-size: 22px;
    line-height: 46px;
}

.codeWrap input::placeholder {
    font-size: 22px;
    line-height: 46px;
}

.cautionText {
    font-size: 16px;
}

.btnStart {
    background: #7BCC12;
    color: #fff;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 10px;
    font-size: 22px;
    min-width: 120px;
    line-height: 50px;
    padding: 0 40px;
}

.btnStart:hover,
.btnStart:active {
    background: #67AB14;
}

.btnApp {
    width: 100%;
    border-radius: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 50px;
    background: rgba(123, 204, 18, 0.2);
    gap: 6px;
    margin-top: 20px;
}

.btnApp .icon {
    background: url(../../img/icon_down.svg) center no-repeat;
    background-size: contain;
}

.btnApp .btnAppText {
    color: #448D00;
    font-size: 16px;
    font-weight: 600;
}

.dark .btnApp {
    background: rgba(123, 204, 18, 0.4);
}

.dark .btnApp:hover,
.dark .btnApp:active {
    background: rgba(123, 204, 18, 0.5);
}

.dark .btnApp .btnAppText {
    color: #7BCC12;
}

.dark .btnApp .icon {
    background: url(../../img/dark/icon_down.svg) center no-repeat;
    background-size: contain;
}

.btnApp:hover,
.btnApp:active {
    background: rgba(123, 204, 18, 0.3);
}

.appName {
    font-size: inherit;
    font-weight: 600;
    font-size: 18px;
}

.appText {
    gap: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 16px;
    background: #F3F5F9;
    height: 40px;
    padding: 0 20px;
    border-radius: 6px;
    margin-top: 20px;
}

.dark .appText {
    background: #364651;
}

.appNumber {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
    font-size: inherit;

}

.numberWrap {
    font-size: inherit;
}

.numberWrap span {
    font-size: inherit;
    color: #666B77;
    margin-right: 10px;
}

.dark .numberWrap span {
    color: #B3B8BC;
}

.subWrap {
    padding-top: 40px;
    width: 100%;
    min-height: 100%;
    height: auto;
    display: block;
}

.areaTop,
.areaBottom {
    width: 100%;
    max-width: 100%;

}

.areaBottom {
    min-height: 100%;
    height: auto;
}

.areaTop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.subTitle {
    font-size: 24px;
    margin-bottom: 10px;
}

.subText {
    font-size: 16px;
    margin-bottom: 0px;
}

.categoryWrap {
    display: block;
}

.categoryWrap .blueText {
    font-size: 24px;
    line-height: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.checkmark {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.checkboxCustom {
    gap: 8px;
}

.checkboxCustom input:checked~.checkmark {
    background-size: 16px;
    border-radius: 4px;
}

.labelText {
    font-size: 20px;
    line-height: 24px;
}

.boxList .checkboxCustom {
    width: 100%;
    border-radius: 6px;
    padding: 10px;
    width: calc(50% - 5px);
}

.boxList {
    gap: 10px;
    margin-bottom: 20px;
}
.listWrap{
    padding: 0;
}

.listWrap .boxList .labelText {
    font-size: 16px;
}

.boxList .labelText {
    font-size: 20px;
}

.customerWrap .labelText {
    margin-bottom: 10px;
}

.boxList .checkboxCustom:hover,
.boxList .checkboxCustom:active {
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
}

.boxList .checkboxCustom.disabled:hover,
.boxList .checkboxCustom.disabled:active {
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btnSub {
    font-size: 18px;
    min-width: 120px;
    line-height: 50px;
    padding: 0 40px;
}

.listText {
    text-align: center;
    font-size: 20px;
}

.listTWrap {
    max-width: 700px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.MenuTabWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 4px;
    gap: 4px;
    background: #dfe3eb;
    border-radius: 23px;
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.dark .MenuTabWrap {
    background: #2A3740;
}

.btnTab {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 44px;
    background: none;
    font-size: 18px;
    border-radius: 30px;
    color: #8C909D;
}

.dark .btnTab:hover,
.dark .btnTab:active {
    color: #fff;
}

.dark .btnTab.selected:hover,
.dark .btnTab.selected:active {
    color: #fff;
    background: #4b606e;
}

.btnTab.selected {
    font-weight: 600;
    background: #fff;
    color: #05141F;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
}

.dark .btnTab.selected {
    background: #3f515d;
    color: #fff;
}

.btnTab.selected:hover,
.btnTab.selected:active {
    background: #fff;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
}

.btnTab:hover,
.btnTab:active {
    color: #05141F;
}

.modeLight .icon {
    background: url(../../img/icon_light.svg) center no-repeat;
    background-size: contain;
    margin-right: 4px;
}

.modeDark .icon {
    background: url(../../img/icon_dark.svg) center no-repeat;
    background-size: contain;
    margin-right: 4px;
}

.dark .modeLight .icon {
    background: url(../../img/dark/icon_light.svg) center no-repeat;
    background-size: contain;
}

.dark .modeDark .icon {
    background: url(../../img/dark/icon_dark.svg) center no-repeat;
    background-size: contain;
}


.checkboxCustom.modeLight,
.checkboxCustom.modeDark {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 30px;
    border-radius: 10px;
}

.labelInfo {
    color: #666B77;
    font-size: 16px;
    width: 100%;
    text-align: center;
    padding-bottom: 16px;
}

.dark .labelInfo {
    color: #B3B8BC;
}

.modeBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    aspect-ratio: 1/1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #F3F5F9;
    border-radius: 10px;
    padding: 20px;
    width: 80%;
    margin-bottom: 30px;
}

.modeDark .modeBox {
    background: #05141F;
}

.modeTop {
    font-size: 26px;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
    color: #05141F;
}

.modeDark .modeTop {
    color: #fff;
}

.modeBtnWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 10px;
}

.modeBtnWrap div {
    aspect-ratio: 1/1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 6px;
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.modeBtnL {
    background: -o-linear-gradient(top, #2CAC65 30%, #6AD87E 40%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #2CAC65), color-stop(40%, #6AD87E));
    background: linear-gradient(180deg, #2CAC65 30%, #6AD87E 40%);

}

.modeDark .modeBtnL {
    background: #364651;
}

.modeBtnR {
    background: -o-linear-gradient(top, #3670DC 30%, #74A0FF 40%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #3670DC), color-stop(40%, #74A0FF));
    background: linear-gradient(180deg, #3670DC 30%, #74A0FF 40%);
}

.modeDark .modeBtnR {
    background: #364651;
}

.modeImg {
    width: 100%;
    height: 100%;

}

.modeBtnL .modeImg {
    background: url(../../img/img_receiptCar2.png) center no-repeat;
    background-size: 150%;
}

.modeDark .modeBtnL .modeImg {
    background: url(../../img/img_receiptCarDark1.png) center no-repeat;
    background-size: 150%;
}

.modeBtnR .modeImg {
    background: url(../../img/img_reserveCar1.png) center no-repeat;
    background-size: 150%;
}

.modeDark .modeBtnR .modeImg {
    background: url(../../img/img_reserveCarDark1.png) center no-repeat;
    background-size: 150%;
}

.modeNum {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 10px;
}

.modeNum div {
    font-size: 20px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    border-radius: 6px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 6px 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    color: #05141F;
}

.modeDark .modeNum div {
    background: #364651;
    color: #fff;
}

.printBox {
    width: 100%;
    max-width: 60%;
    aspect-ratio: 1/1;
}

.modeLight .printBox {
    background: url(../../img/img_print_kiosk.png) center no-repeat;
    background-size: contain;
}

.modeDark .printBox {
    background: url(../../img/img_print_pc.png) center no-repeat;
    background-size: contain;
}

.listAddBox {
    width: 100%;
    height: 140px;
    background-color: #F3F5F9;
    border-radius: 10px;
    margin-bottom: 30px;
}

.modeLight .listAddBox {
    background: url(../../img/img_list_plus.png)#F3F5F9 center no-repeat;
    background-size: contain;
}

.dark .modeLight .listAddBox {
    background-color: #05141F;
}

.modeDark .listAddBox {
    background: url(../../img/img_list_minus.png)#F3F5F9 center no-repeat;
    background-size: contain;
}

.dark .modeDark .listAddBox {
    background-color: #05141F;
}

.slideWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.slidetextWrap {
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.swiper {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 20px 20px 0 !important;
    width: 100%;

    /* max-width: 240px !important; */
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.swiper-slide-active {
    opacity: 1;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.slideText {
    opacity: 0;
    right: 100vw;
    -webkit-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
    width: 100%;
    height: 0;
    display: none;
}

.slideText.active {
    opacity: 1;
    right: auto;
    left: 0;
    display: inline-block;
    height: auto;
}

.dark .swiper-pagination-bullet {
    background: #fff !important;
}

.swiper-pagination-bullet-active {
    background: #7BCC12 !important;
    width: 40px !important;
    border-radius: 4px !important;
}

.dark .swiper-pagination-bullet-active {
    background: #7BCC12 !important;
}

.swiperImgBox {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.swiperImg {
    width: 100%;
    max-width: 140px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: floatY 3s ease-in-out infinite;
    animation: floatY 3s ease-in-out infinite;
}

@-webkit-keyframes floatY {
    0% {
        -webkit-transform: translate(-50%, -48%);
        transform: translate(-50%, -48%);
    }

    50% {
        -webkit-transform: translate(-50%, -52%);
        transform: translate(-50%, -52%);
    }

    100% {
        -webkit-transform: translate(-50%, -48%);
        transform: translate(-50%, -48%);
    }
}

@keyframes floatY {
    0% {
        -webkit-transform: translate(-50%, -48%);
        transform: translate(-50%, -48%);
    }

    50% {
        -webkit-transform: translate(-50%, -52%);
        transform: translate(-50%, -52%);
    }

    100% {
        -webkit-transform: translate(-50%, -48%);
        transform: translate(-50%, -48%);
    }
}

.swiperImgWrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

}

.slideWrap:hover .swiper-button-next,
.slideWrap:hover .swiper-button-prev {
    display: inline-block !important;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0 !important;
}

.swiper-button-next,
.swiper-button-prev {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    /* 블러 효과 */
    -webkit-backdrop-filter: blur(10px);
    display: none !important;
}

/* 이전 버튼 */
.swiper-button-prev {
    background: url("../../img/dark/icon_arrow.svg")rgba(0, 0, 0, 0.2) center no-repeat;
    background-size: contain;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    top: 130px !important;
    left: auto !important;
    right: 205px !important;
}

.swiper-button-prev:hover {
    background: url("../../img/dark/icon_arrow.svg")rgba(0, 0, 0, 0.6) center no-repeat;
    background-size: contain;

}

.dark .swiper-button-prev {
    background: url("../../img/icon_arrow.svg")rgba(255, 255, 255, 0.4) center no-repeat;
    background-size: contain;
}

.dark .swiper-button-prev:hover {
    background: url("../../img/icon_arrow.svg")rgba(255, 255, 255, 0.6) center no-repeat;
    background-size: contain;
}

.swiper-button-next {
    background: url("../../img/dark/icon_arrow.svg")rgba(0, 0, 0, 0.2) center no-repeat;
    background-size: contain;
    right: 5px !important;
    top: 130px !important;

}

.swiper-button-next:hover {
    background: url("../../img/dark/icon_arrow.svg")rgba(0, 0, 0, 0.6) center no-repeat;
    background-size: contain;

}

.dark .swiper-button-next {
    background: url("../../img/icon_arrow.svg")rgba(255, 255, 255, 0.4) center no-repeat;
    background-size: contain;
}

.dark .swiper-button-next:hover {
    background: url("../../img/icon_arrow.svg")rgba(255, 255, 255, 0.6) center no-repeat;
    background-size: contain;
}

/* Swiper 기본 아이콘 제거 */
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.swiperContent {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom: 18px;
}

.swiperTitle {
    font-size: 24px;
    word-break: keep-all;
}

.swiperText {
    margin-top: 20px;
    font-size: 16px;
    color: #666B77;
    word-break: keep-all;
}

.dark .swiperText {
    color: #B3B8BC;
}

.swiperText ul {
    padding-left: 20px;
}

.swiperText li {
    font-size: 16px;
    color: #666B77;
    list-style: disc;
    word-break: keep-all;
}

.dark .swiperText li {
    color: #B3B8BC;
}

.swiperImgNum {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
}

.swiper-pagination {
    height: 8px;
    bottom: 20px !important;
    left: 0px !important;
    position: absolute;
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
}

.slide1 .swiperImgBox {
    background: -o-linear-gradient(bottom, #75A0FF 0%, #3670DC 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#75A0FF), to(#3670DC));
    background: linear-gradient(0deg, #75A0FF 0%, #3670DC 100%);
}

.slide1 .swiperImg {
    background: url(../../img/img_slide_kiosk.png?v=250912) center no-repeat;
    background-size: contain;
}

.slide1 .swiperImgNum {
    color: #3670DC;
}

.slide2 .swiperImgBox {
    background: -o-linear-gradient(bottom, #80C2E3 0%, #0089C4 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#80C2E3), to(#0089C4));
    background: linear-gradient(0deg, #80C2E3 0%, #0089C4 100%);
}

.slide2 .swiperImg {
    background: url(../../img/img_slide_pencil.png?v=250912) center no-repeat;
    background-size: contain;
}

.slide2 .swiperImgNum {
    color: #0089C4;
}

.slide3 .swiperImgBox {
    background: -o-linear-gradient(bottom, #92D7D3 0%, #06BDB3 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#92D7D3), to(#06BDB3));
    background: linear-gradient(0deg, #92D7D3 0%, #06BDB3 100%);
}

.slide3 .swiperImg {
    background: url(../../img/img_slide_ksw.png?v=250912) center no-repeat;
    background-size: contain;
}

.slide3 .swiperImgNum {
    color: #06BDB3;
}

.slide4 .swiperImgBox {
    background: -o-linear-gradient(bottom, #6AD87E 0%, #2DAC65 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#6AD87E), to(#2DAC65));
    background: linear-gradient(0deg, #6AD87E 0%, #2DAC65 100%);
}

.slide4 .swiperImg {
    background: url(../../img/img_slide_file.png?v=250912) center no-repeat;
    background-size: contain;
}

.slide4 .swiperImgNum {
    color: #2DAC65;
}

.mainTitle p {
    font-weight: 500;
}

.serviceWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.callWrap {
    display: none;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
}

.callWrap .infoCall {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.arrowMenu {
    position: relative;
    display: none;
}

.arrowBtn {
    width: 40px;
    height: 40px;
    border: solid 1px #D7DBE9;
    background: none;
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.dark .arrowBtn {
    border: solid 1px #2A3740;
    background: #2A3740;
}

.arrowBtn .icon {
    width: 24px;
    height: 24px;
    background: url(../../img/icon_arrow.svg) center no-repeat;
    background-size: contain;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.dark .arrowBtn .icon {
    background: url(../../img/dark/icon_arrow.svg) center no-repeat;
    background-size: contain;
}

.arrowMenu.active .arrowBtn .icon {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.menuPanel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    padding: 20px;
    display: none;
    /* 기본은 숨김 */
    z-index: 80;
}

.dark .menuPanel {
    background: #2A3740;
}

.menuPanel a {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: #333;
    border-radius: 6px;
}

.menuPanel a:hover {
    background: rgba(0, 0, 0, .05);
}

/* 🔹 active 클래스 있을 때만 보이기 */
.arrowMenu.active .menuPanel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.subTextWrap {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    background: #dfe3eb;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 30px;
}

.dark .subTextWrap {
    background: #16232C;
}

.qrList {
    max-width: 700px;
    margin: 0 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.qrListBox {
    width: calc(25% - 12px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.btnSub.btnSelect {
    line-height: 44px;
    padding: 0 20px;
    min-width: 100px;
    font-size: 16px;
}

.qrListWrap {
    width: 100%;
    position: relative;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
    border: solid 1px #7bcc1200;
    width: 100%;
    border-radius: 10px;
    padding: 16px;
    overflow: hidden;
}

.dark .qrListWrap {
    background: #364651;
}

.qrListWrap img {
    display: inline-block;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.headerText {
    font-size: 20px;
}

.btnAdd {
    background: #7BCC12;
    color: #fff;
    font-size: 18px;
    height: 46px;
    border-radius: 10px;
    padding: 0 20px;

}

.btnAdd:hover,
.btnAdd:active {
    background: #67AB14;
}

.btnAdd .icon {
    width: 24px;
    height: 24px;
    background: url(../../img/icon_pencil.svg) center no-repeat;
    background-size: contain;
    margin-right: 4px;
}

.timeList {
    gap: 6px;
    max-width: 700px;
    margin: 0 auto;
}

.timeTitle {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.selectList {
    max-width: 700px;
    margin: 0 auto;
}

.dark .timeListBox {
    border: solid 1px #2A3740;
    background: #2A3740;
}

.dark .lunchTime,
.dark .lunchTime p {
    color: #B3B8BC;
}

.dark .holiday {
    color: #62a1ff;
}

.previewLink {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 16px;
    color: #7BCC12;
    text-decoration: none;
    font-weight: 500;
    background: none;
    font-weight: 600;
    gap: 4px;
}

.previewLink .icon {
    background: url(../../img/icon_view.svg) center no-repeat;
    background-size: contain;
}

/* 스위치 UI */
.switchLabel {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 30px;
}

.switchInput {
    opacity: 0;
    width: 0;
    height: 0;
}

.switchSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #DFE0E6;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    border-radius: 36px;
    z-index: 1;
}

.dark .switchSlider {
    background: #3f515d;
}

.switchSlider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    border-radius: 50%;
    z-index: 5;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 사용/미사용 텍스트 표시 */
.switchSlider::after {
    content: "미사용";
    position: absolute;
    right: 8px;
    top: 6px;
    font-size: 12px;
    color: #8C909D;
    font-weight: 700;
    z-index: 0;
}

/* 활성화 상태 */
.switchInput:checked+.switchSlider {
    background-color: #7BCC12;
}

.switchInput:checked+.switchSlider:before {
    -webkit-transform: translateX(40px);
        -ms-transform: translateX(40px);
            transform: translateX(40px);
}

.switchInput:checked+.switchSlider::after {
    content: "사용";
    left: 16px;
    right: auto;
    color: #fff;
}

.itemCard {
    background: #16232C;
    position: relative;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
    border: solid 1px #7bcc1200;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 20px 20px 10px 20px;
    border-radius: 10px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    -ms-flex-direction: row;
        flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.dark .itemCard {
    background: #2A3740;
}

.toggleList .labelInfo {
    text-align: left;
}

.toggleList .labelText {
    font-weight: 600;
}

.toggleList {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.toggleList .boxList {
    margin-bottom: 0;
}

.subBtn {
    padding: 20px;
    position: sticky;
    z-index: 10;
    -ms-flex-item-align: end;
        align-self: flex-end;
    width: 100%;
    bottom: 0px;
    background: #f3f5f9a3;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    width: calc(100% + 40px);
    max-width: 100vw;
    margin-left: -20px;
    margin-right: -20px;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    gap: 20px;
}

.dark .subBtn {
    background: #06141f75;
}

.dark .popupBottom {
    background: #2a374075;

}

.infoArea {
    max-width: 480px;
    text-align: left;
}

.wrap {
    overflow: inherit;
}

.previewWrap {
    padding: 20px 30px 0px 30px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 10px;
    max-width: 100%;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

}

.previewWrap img {
    display: inline-block;
    width: 100%;
    max-width: 420px;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    height: auto;
    border-radius: 10px;
    border: solid 1px #C2C7D0;
}

.popupWrap.layerPreviewWait,
.popupWrap.layerPreviewAdv {
    max-width: 640px;
    width: calc(100% - 40px);
    background: #fff;
}
.dark .popupWrap.layerPreviewWait,
.dark .popupWrap.layerPreviewAdv{
    background: #2a3740;
}
.popupWrap.layerPreviewWait .popupBottom,
.popupWrap.layerPreviewAdv .popupBottom{
    background: #fff;
}
.dark .popupWrap.layerPreviewWait .popupBottom,
.dark .popupWrap.layerPreviewAdv .popupBottom{
    background: #2a3740;
}
/* 1280 이하일때 : 태블릿 세로*/
@media all and (max-width:1280px) {
    .headerWrap {
        padding: 0 20px;
    }

    .headerService {
        gap: 10px;
    }

    .serviceWrap {
        gap: 6px;
    }

    .listHalf .boxList {
        margin-bottom: 30px;
    }

    .serviceBtn {
        font-size: 14px;
    }

    .codeWrap {
        margin-bottom: 0px;
    }

    .settingWrap {
        padding-top: 40px;
    }

    .swiperTitle {
        font-size: 18px;
    }

    .slideWrap {
        gap: 0px;
    }

    .btnLink {
        font-size: 18px;
        height: 44px;
    }

    .appText {
        gap: 20px;
        font-size: 14px;
    }

    .mainTitle {
        font-size: 34px;
    }

    .mainText {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .setTimeStatus {
        width: 100%;
    }

    .subWrap {
        padding-top: 20px;
    }

    .MenuTabWrap {
        margin-bottom: 30px;
    }

    .btnApp {
        height: 44px;
    }

    .swiperText li {
        font-size: 14px;
    }

    .swiperText {
        font-size: 14px;
    }
}

/* 1024 이하이면서 가로화면일때 : 태블릿 가로 */
@media all and (max-width:1240px) and (min-aspect-ratio: 4/3) {}

/* 700 이하일때*/
@media all and (max-width:700px) {

    .qrListBox {
        width: calc(50% - 8px);
    }

    .callWrap {
        display: inline-block;
    }

    .swiperImgNum {
        font-size: 18px;
    }

    .swiperImgBox {
        width: 160px;
        height: 160px;
    }

    .swiperImg {
        max-width: 110px;
    }

    .setTimeStatus {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .setTime {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4px;
    }

    .appText {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: auto;
        gap: 4px;
        padding: 10px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-top: 10px;
    }

    .setDevice {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16px;
    }

    .setTimeBtn {
        width: 100%;
    }

    .btnStatus {
        width: 100%;
    }

    .menuWrap {
        gap: 10px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .btnMenu{
        width: calc(50% - 5px);
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
    }
    .boxList.tabConWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .boxList .checkboxCustom {
        width: 100%;
    }

    .checkboxCustom.modeLight,
    .checkboxCustom.modeDark {
        padding: 20px;
    }

    .modeBox {
        margin-bottom: 20px;
        width: 100%;
    }

    .modeTop {
        font-size: 20px;
    }

    .modeNum div {
        font-size: 16px;
    }

    .listHalf .boxList {
        gap: 10px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: 110px !important;
    }

    .swiper-button-prev {
        right: 165px !important;
    }

    .headerService.mobile .serviceBtn {
        display: inline-block;
    }

    .infoCall {
        display: none;
    }

    .serviceWrap {
        display: none;
    }

    .arrowMenu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .arrowMenu .infoCall {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .arrowMenu .serviceWrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .btnTab {
        font-size: 15px;
        height: 40px;
    }
.listTWrap{
        flex-direction: column;

}
    .setMenu {
        margin-top: 0;
    }

    .timeListBox {
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

/* 512 이하일때 : 모바일*/
@media all and (max-width:512px) {
    .MenuTabWrap {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }


    .headerText {
        font-size: 18px;
    }

    .swiper-slide {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        gap: 10px;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

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

    .subTitle {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .subText {
        padding: 0;
        font-size: 14px;
    }
    
.listWrap .boxList .labelText{
    font-size: 14px;
}
    /* .btnMenu {
        width: calc(50% - 5px);
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
    } */

    .setTimeArea {
        padding: 10px;
        height: auto;
    }

    .swiperContent {
        margin-bottom: 10px;
    }

    .swiper-button-prev {
        right: auto !important;
        left: 0 !important;
    }

    .swiper-button-next {
        right: 0 !important;
    }

    .slideWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        gap: 20px;
        margin-bottom: 0;
    }

    .codeWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
.toggleList .labelText{
    font-size: 16px;
}
    .popupWrap {
        width: 90%;
        min-width: 260px;
        max-height: 80vh;
    }
    .itemCard{
        flex-direction: column;
        gap: 6px;
    }
    .listHalf .boxList .labelText{
        flex-direction: column;
        font-size: 16px;
    }
    .labelInfo{
        font-size: 14px;
    }
    .popupTitle{
        font-size: 16px;
    }    
    .popupText{
        font-size: 14px;
    }

    .deviceWrap {
        gap: 16px;
    }

    .timeLunch {
        font-size: 14px;
    }

    .time {
        font-size: 14px;
    }

    .appNumber {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .listHalf .boxList {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 16px;
    }

    /* .listHalf .boxList .checkboxCustom{
        width: 100%;
    } */
    .modeTop {
        font-size: 16px;
    }

    .modeBtnWrap {
        gap: 6px;
        margin-bottom: 6px;
    }

    .modeNum {
        gap: 6px;
    }

    .modeNum div {
        font-size: 14px;
    }

    .checkboxCustom.modeLight,
    .checkboxCustom.modeDark {
        padding: 16px;
    }

    .listHalf .boxList .checkboxCustom {
        width: calc(50% - 8px);
    }

    .modeBox {
        max-width: 160px;
        margin-bottom: 10px;
        padding: 10px;
    }

    .labelInfo {
        padding-bottom: 6px;
    }

    .printBox {
        max-width: 100px;
    }

    .deviceBtn {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 6px;
    }

    .codeWrap input {
        font-size: 18px;
        line-height: 40px;
    }

    .codeWrap input::-webkit-input-placeholder {
        font-size: 18px;
        line-height: 40px;
    }

    .codeWrap input::-moz-placeholder {
        font-size: 18px;
        line-height: 40px;
    }

    .codeWrap input:-ms-input-placeholder {
        font-size: 18px;
        line-height: 40px;
    }

    .codeWrap input::-ms-input-placeholder {
        font-size: 18px;
        line-height: 40px;
    }

    .codeWrap input::placeholder {
        font-size: 18px;
        line-height: 40px;
    }

    .cautionText {
        font-size: 14px;
    }

    .btnStart {
        padding: 0 20px;
        min-width: 80px;
        line-height: 44px;
        font-size: 18px;
        width: 100%;
    }

    .numberWrap span {
        display: inline-block;
        min-width: 50px;
        text-align: left;
    }

    .mainTitle {
        font-size: 24px;
    }

    .mainText {
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 0px;
    }

    /* .slideWrap{
        flex-direction: column;
    } */
    .slideText {
        display: none;
        width: 100%;
    }

    .slidetextWrap {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
        text-align: center;
        width: 100%;
    }

    .swiperContent {
        width: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .swiper-pagination {
        width: 100% !important;
    }

    .swiperText {
        margin-top: 10px;
    }

    .timeText {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 0px;
    }

    
    /* .btnTab {
        min-width: 30%;
    } */
}

/* 374이하일때 */
@media all and (max-width:373px) {}