/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.wrap,
.bodyWrap,
.layerPopup,
body {
    min-height: 100dvh
}

.layerPopupInsu {
    width: 100%;
    min-height: 100dvh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    display: none;
}

.popupList {
    padding: 10px 10px;
}

.layerHoken .popupList {
    height: 100%;
}

.waitingList {
    padding: 0 10px;
}

.layerPopup {
    height: 100dvh
}

.introImg {
    width: 100%;
    height: 240px;
}

.introImgFail {
    width: 100%;
    height: 200px;
}

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

.logoWrap {
    width: 160px;
    height: 100%;
}

.logoWrap button {
    padding: 12px 0;
    font-size: 22px;
    font-size: 18px;

}

.btnBack,
.btnHome {
    font-size: 24px;
    gap: 6px;
}

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

.btnBack .icon {
    width: 24px;
    height: 46px;
    background-size: contain;
}

.popupListBox:hover .btnListChoice {
    border: solid 2px #7BCC12;
}

.headerClock {
    gap: 16px;
}

.kioskHeader .headerBox {
    gap: 20px;
}

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

.headerDate {
    font-size: 20px;
}

.headerWrap {
    height: 80px;
    padding: 0 30px;
    border-bottom: solid 2px #D7DBE9;
}

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

.headerCenter {
    font-size: 32px;
}

.contentsWrap {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0px;
}

.bodyWrap {
    padding: 80px 30px 0 30px;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
}

.main .bodyWrap {
    padding: 0;
    max-width: 100%;
}

.main .contentsWrap {
    max-width: 100%;
    padding-bottom: 0;
}

.mainArea {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* padding: 80px 30px 30px 30px; */
    max-height: 1280px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.banner .mainArea {
    padding: 0;
}

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

.banner .mainBtnWrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 20px;
}

.mainCon {
    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-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.mainTop {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.banner .mainBottom {
    padding: 0 30px 30px 30px;
}

.mainReceipt {
    max-width: 720px;
    min-width: 640px;
    margin: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.mainListLeft .icon {
    width: 40px;
    height: 40px;
    background: url(../../img/icon_wait.svg) center no-repeat;
}

.mainBg {
    background: #fff;
    width: 100%;
}

.mainWrap {
    height: 100%;
    padding-top: 80px;
}

.mainTitle {
    font-size: 42px;
    line-height: 1.3;
    white-space: nowrap;
}

.mainTitle.smallTitle {
    font-size: 36px;
}

.mainTitle p {
    line-height: inherit;
    font-weight: 500;
}

.mainText {
    font-size: 30px;
    margin-top: 14px;
    margin-bottom: 40px;
}

.mainBtn {
    font-size: 50px;
    border-radius: 20px;
}

.mainBtnWrap {
    min-height: 100%;
    width: 100%;
    padding: 0 30px;
    gap: 20px;
}

.mainBtnWrap .mainBtn {
    padding: 20px 0px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.mainBottom {
    max-width: 720px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
}

.dark .mainBottom {
    background: none;
}

.mainList {
    max-width: 720px;
    border-radius: 26px;

}

.btnMainList {
    padding: 20px 0;
    font-size: 32px;
    gap: 10px;

}

.btnViewList {
    padding: 0 30px;
    font-size: 20px;
    border: solid 2px #C2C7D0;
    border-radius: 30px;
    height: 46px;
    gap: 6px;
    color: #666B77;
}

.dark .btnViewList {
    border: solid 2px #727F87;
    color: #fff;
}

.btnViewList:hover,
.btnViewList:active {
    border: solid 2px #727F87;
}

.dark .btnViewList:hover,
.dark .btnViewList:active {
    border: solid 2px #fff;
}

.btnViewList .icon {
    width: 16px;
    height: 26px;
}

.mainListLeft {
    gap: 6px;
}

.mainListSub {
    gap: 16px;

}

.mainListSub .btnText b {
    line-height: 80px;

}

.btnMainListSub {
    padding: 26px;
    border-radius: 26px;
    -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);

}

.btnMainListSub .btnTitle {
    font-size: 24px;
    gap: 16px;
    margin-bottom: 12px;
    line-height: 30px;
}

.mainListSub .btnText b {
    line-height: 60px;

}

.btnText {
    font-size: 24px;
    gap: 8px;
}

.btnText b {
    font-size: 50px;
}

.btnBgWait,
.btnBgRepair {
    width: 30px;
    margin-right: 6px;
}

.btnListTab .icon {
    display: none;
}

.btnListTab {
    padding: 6px 0;
    font-size: 20px;
    background: #dde0e7;
    border-radius: 14px;
}

.btnListTab:hover,
.btnListTab:active {
    background: #caced6;
}

.dark .btnListTab:hover,
.dark .btnListTab:active {
    background: #364651;
}

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


.carNumber {
    font-size: 15px;
    margin-top: 4px;
}

.waitingTab {
    gap: 12px;
    padding: 0px 10px;
    border-radius: 12px;
}


.waitingList {
    padding: 0;
}

.subWrap {
    padding: 20px 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.subWrap.subWait {
    padding-top: 30px;
}

.waitingWrap {
    gap: 14px;
}

.listShadow {
    height: 40px;
}

.listBox {
    padding: 26px;
    border-radius: 18px;
    margin-bottom: 16px;
    -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
}

.carNum {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 6px;
}

.btnReserve {
    font-size: 20px;
    padding: 0 16px;
    line-height: 28px;
    border: solid 2px #7BCC12;
    border-radius: 20px;
}

.carInfo {
    gap: 16px;
    font-size: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

.waitingList .scrollBox {
    padding: 0;
}

.listWrap {
    padding-bottom: 40px;
}

.empty {
    border-radius: 18px;
    font-size: 26px;
}

.subTitle {
    font-size: 40px;
    margin-bottom: 26px;
}

.subText {
    font-size: 26px;
    margin-bottom: 30px;
}

input {
    border: solid 2px #D7DBE9;
    padding: 0 20px;
    padding-right: 46px;
    border-radius: 12px;
    font-size: 24px;
    line-height: 56px;
}

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

}

input::-webkit-input-placeholder {
    font-size: 24px;
    line-height: 60px;
}

input::-moz-placeholder {
    font-size: 24px;
    line-height: 60px;
}

input:-ms-input-placeholder {
    font-size: 24px;
    line-height: 60px;
}

input::-ms-input-placeholder {
    font-size: 24px;
    line-height: 60px;
}

input::placeholder {
    font-size: 24px;
    line-height: 60px;
}

.inputCarNum input {
    padding: 0 20px;
    padding-right: 40px;
    border-radius: 12px;
    font-size: 30px;
    line-height: 60px;
}

.inputCarNum input::-webkit-input-placeholder {
    font-size: 30px;
    line-height: 60px;
}

.inputCarNum input::-moz-placeholder {
    font-size: 30px;
    line-height: 60px;
}

.inputCarNum input:-ms-input-placeholder {
    font-size: 30px;
    line-height: 60px;
}

.inputCarNum input::-ms-input-placeholder {
    font-size: 30px;
    line-height: 60px;
}

.inputCarNum input::placeholder {
    font-size: 30px;
    line-height: 60px;
}

.dark .inputCarNum input::-webkit-input-placeholder {
    font-size: 30px;
    line-height: 60px;
}

.dark .inputCarNum input::-moz-placeholder {
    font-size: 30px;
    line-height: 60px;
}

.dark .inputCarNum input:-ms-input-placeholder {
    font-size: 30px;
    line-height: 60px;
}

.dark .inputCarNum input::-ms-input-placeholder {
    font-size: 30px;
    line-height: 60px;
}

.dark .inputCarNum input::placeholder {
    font-size: 30px;
    line-height: 60px;
}

.checkList .checkboxCustom {
    padding: 16px 0;
}

.checkList .checkBox {
    margin-bottom: 16px;
    border: solid 2px #ff2727;
    background-color: rgba(255, 39, 39, 0.2);
}

.checkList .checkBox.boxchecked {
    border: solid 2px #7BCC12;
    background: rgba(138, 198, 65, 0.2);
}

.checkList .checkBox.boxchecked p.red {
    color: #7BCC12;
    display: inline-block;
}

.checkList .checkAgree .checkmark {
    opacity: 1;
}

.checkBox {
    padding: 0 24px;
    border-radius: 10px;
}

.mb {
    margin-bottom: 40px;
}

.inputCarNum input {
    padding-left: 46px;
}

.inputDelete {
    width: 24px;
    right: 16px;
}

.inputCarNum .inputBox {
    gap: 16px;
    margin-top: 10px;
}

.inputCarCustomer .inputBox {
    margin: auto;
    gap: 30px;
    margin-top: 30px;
}

input:hover {
    border: solid 2px #7BCC12;
}

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

.inputTitle {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 12px;
}

.inputTitle p {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.inputArea.disabled input,
.inputArea.active.disabled input {
    background-color: #E4E6EF;
    border-color: #D7DBE9;
    color: #666B77;
    opacity: 0.7;
}

.inputArea.disabled select,
.inputArea.active.disabled select {
    background-color: #E4E6EF;
    border-color: #D7DBE9;
    color: #666B77;
    opacity: 0.7;
}

.dark .inputArea.disabled input,
.dark .inputArea.disabled select,
.dark .inputArea.active.disabled input .dark .inputArea.disabled select,
.dark .inputArea.active.disabled select {
    background-color: #4D606D;
    border-color: #4D606D;
    color: #b3b8bc;
    opacity: 0.7;
}

.inputArea.disabled .inputTitle,
.inputArea.active.disabled .inputTitle {
    color: #666B77;
    font-weight: 500;
}

.reserveList .inputTitle {
    position: sticky;
    top: 0;
    padding-top: 16px;
    padding-bottom: 0px;
    margin-bottom: 0;
    font-size: 20px;
}

.reserveTitle {
    font-size: 20px;
    line-height: 24px;
    padding-bottom: 0px;
    top: 0;
    padding-top: 16px;
    margin-bottom: 0;
}

.reserveText {
    overflow: auto;
    max-height: 280px;
    font-size: 20px;
    line-height: 24px;
}

.reserveText p {
    padding: 2px 0;
}

.reserveText span {
    font-size: inherit;
    line-height: inherit;
    color: #666B77;
}

.inputCarNum {
    margin-top: 30px;
    margin-bottom: 30px;
}

.inputCarCustomer {
    margin-top: 0px;
    margin-bottom: 20px;
}

.reserveList .inputCarCustomer {
    margin-bottom: 0;
    padding-bottom: 10px;
}

.popupWrap {
    border-radius: 20px;
    max-width: 610px;

}

.popupWrap.layerCarName {
    max-height: 500px;
}

.popupWrap.layerType {
    max-height: 500px;

}

.popupTitle {
    border-bottom: solid 2px #D7DBE9;
    font-size: 26px;
    padding: 24px 0;
    border-radius: 20px 20px 0 0;
}

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

}

.popupListArea {
    padding: 20px 20px;
}

.popupAgreeArea {
    padding: 40px 40px;
}

.popupListBox {
    -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
    padding: 30px 26px;
    border-radius: 18px;
    margin-bottom: 16px;
}

.dark .popupListBox {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

.popupListBox:active,
.popupListBox:hover {
    -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);

}

.dark .popupListBox:active,
.dark .popupListBox:hover {
    border: none;
}


.popupListTop {
    gap: 20px;
}

.btnListChoice {
    font-size: 20px;
    padding: 0 16px;
    line-height: 40px;
    border-radius: 30px;
    border: solid 2px #7BCC12;
    background: #7BCC12;
    color: #fff;
}

.listName {
    font-size: 24px;
}

.popupListCar {
    font-size: 18px;
    margin-top: 6px;
}

.btnClose {
    font-size: 20px;
    padding: 0 20px;
    line-height: 40px;
    border-radius: 40px;
    border: solid 2px #666B77;
}

.dark .btnClose {
    border: solid 2px #d1d5e1;

}

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

.btnClose:hover {
    border: solid 2px #727F87;
}

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

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

}

.popupAgreeBg {
    border-radius: 20px;
    padding: 26px 16px;
}

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

.checkboxCustom {
    gap: 12px;
}

.inputPopup .checkboxCustom {
    gap: 6px;
    width: 100%;
    margin-top: 10px;
}

.inputPopup .checkmark {
    background-color: #E4E6EF;
}

.dark .inputPopup .checkmark {
    background-color: #4D606D;
}

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

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

.btnViewTerms {
    font-size: 20px;
    line-height: 30px;
}

.btnViewTerms .icon {
    width: 20px;
    height: 30px;
}

.reserveArea {
    max-width: 720px;
    margin: 20px auto 0px auto;
    padding: 24px;
    border-radius: 12px;

    -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);

}

.checkList .reserveArea {
    margin-bottom: 30px;
}

.reserveBox {
    border-radius: 12px;
    padding: 0 16px;
    padding-bottom: 16px;
}



.listFlex {
    gap: 16px;
}

.listReserve {
    gap: 16px;
    margin-top: 20px;
}


.subBtn {
    position: sticky;
    bottom: 0px;
    padding-top: 20px;
    padding-bottom: 30px;
    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: #06141fa3;
}

.boxCategory {
    gap: 12px;
    margin-bottom: 30px;
}

.boxCategory .checkboxCustom {
    border-radius: 12px;
    padding: 16px 20px;
    width: calc(50% - 6px);

}

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

.listNameSmall {
    font-size: 24px;
}

.keyboardArea {
    padding-top: 20px;
    padding-bottom: 40px;
}

.keyboardArea.keyboardPopup {
    padding-top: 30px;
    padding-bottom: 0;
    margin-bottom: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.textList .icon {
    width: 16px;
    height: 28px;
}

.textList {
    gap: 6px;
    padding: 2px 0;
    font-size: inherit;
    line-height: inherit;
}

dotlottie-wc {
    margin: 0 auto;
}

.dotlottie {
    max-height: 300px;
}

.timerBox {
    margin-bottom: 60px;
    padding: 26px;
    border-radius: 26px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}

.endTimerSecond {
    font-size: 40px;
    min-width: 200px;
    margin: 0 auto;
}

.endTimerTitle {
    font-size: 20px;

}

.endTimer {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.popupWrap .endTimer {
    margin-bottom: 20px;
    margin-top: 0;
}

.popupWrap .endTimerTitle {
    margin-top: 30px;
}

.textList .blueText {
    font-size: inherit;
    line-height: inherit;
}


.subBtn.mt {
    margin-top: 20px;
    margin-bottom: 60px;
    width: 100%;
}

.subBtn.notFixed {
    position: relative;
    left: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
}

.plateInputs {
    gap: 6px;
    margin-bottom: 20px;
}

.key {
    font-size: 32px;
    max-height: 60px;
    border: solid 2px #c0cdd8;
}

.key.opacity {
    opacity: 0;
}

.dark .key {
    border: none;
}

.keyboard.showBirth .key.double {
    width: calc(66.666666% - 6px);
}

.wide {
    font-size: 18px;
    height: auto;
    width: calc(10% - 6px);
    aspect-ratio: 1/1;
    border: none;
    white-space: nowrap;
}

.keyboard.keyboardNumber .key {
    width: calc(33.333333% - 6px);
    aspect-ratio: 3/1;
}

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

.keyboard {
    gap: 6px;
}

.keyboard.keyboardHangul .key.double {
    width: 126px;
}

.keyboardWrapper {
    margin: 0 auto;
}

.keyboard.active {
    gap: 6px;
}

.keyboard.active .hangulWrap {
    gap: 6px;
}


.keyboard.active .hangulWrap.width {
    gap: 20px;
    margin-top: 40px;
}

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

.btnStay {
    border-radius: 30px;
    line-height: 40px;
    border: solid 2px #7BCC12;
    padding: 0 20px;

}

.btnGoHome {
    border-radius: 30px;
    line-height: 40px;
    padding: 0 20px;
    border: solid 2px #d1d5e1;
}

.popupWrap .timerBox {
    margin-top: 30px;
    margin-bottom: 20px;

}

.row {
    gap: 6px;
}

dotlottie-wc {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    display: inline-block;
}

.keyboard.keyboardHangul .row {
    gap: 6px;
}

.keyboardHangul,
.keyboardEnglish {
    gap: 6px;
}

.keyboardHangul .row,
.keyboardEnglish .row {
    gap: 6px;
}

.keyboard.keyboardHangul.active {
    gap: 6px;
}

.hangulWrap.mr {
    margin-right: 20px;
}

.endTimerText {
    font-size: 20px;
    margin-bottom: 8px;
}

.inputInsurance {
    padding-top: 40px;
}

.inputVehicle {
    margin-top: 20px;

}

.inputVehicle .inputWrap {
    padding-left: 30px;
    margin-top: 20px;
}

.radioCustom {
    font-size: 20px;
}


.radioMark {
    height: 24px;
    width: 24px;
    border: 2px solid #D7DBE9;
}

.radioCustom .radioMark::after {
    width: 14px;
    height: 14px;
}


.labelText p {
    margin: 0 4px;
}

.checkAgree .labelText span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #666B77;
}

.checkAgree .labelText p {
    margin-right: 6px;
    margin-left: 0;
}

.btnSub {
    font-size: 26px;
    height: 66px;
    padding: 0 40px;
    min-width: 200px
}

.btnPrev {
    font-size: 26px;
    height: 66px;
    border-radius: 40px;
    border: solid 2px #C0CDD8;
    background: none;
    font-size: 26px;
    padding: 0 40px;
    min-width: 200px;
}

.dark .btnPrev {
    border-color: #4D606D;
}

.dark .btnPrev:hover,
.dark .btnPrev:active {
    border-color: #666B77;
}

.message {
    font-size: 20px;
}

.successWrap,
.failWrap {
    border-radius: 12px;
    padding: 10px 26px;
    margin: 0 auto 20px auto;

}

.messageArea {
    margin: 0 auto;
}

.messageArea.alertVisitHpNo .successWrap,
.messageArea.alertVisitHpNo .failWrap {
    margin: 0 auto;
}

.message span a {
    display: inline;
    line-height: inherit;
    font-weight: inherit;
}

.message span {
    font-size: 24px;
    line-height: 30px;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.message p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.popupResult {
    padding: 40px 40px 20px 40px;
}

.layerNotFind .btnClose {
    line-height: 40px;
    border-radius: 40px;
}

.popupResult .message span {
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 24px;
    font-weight: 700;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.popupResult .icon {
    margin: 0 !important;
}


.successWrap .icon,
.failWrap .icon {
    width: 30px;
    height: 30px;
    margin-right: 12px;
    margin-bottom: 6px;
    margin-top: 6px;
}

.inputMessageArea {
    padding-top: 12px;
    padding-bottom: 0px;
}

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

.receiptType {
    border-radius: 40px;
    padding: 0 20px;
    line-height: 40px;
    font-size: 26px;
    margin-bottom: 6px;
    border-width: 1px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: 400;
    margin-top: 10px;
}

.btnReceipt .receiptType {
    border: solid 2px #fff;
}


.btnRegi .receiptType {
    border: solid 2px #fff;
}

.dark .btnReceipt .receiptType {
    border: solid 2px #B8C7D3;
}


.dark .btnRegi .receiptType {
    border: solid 2px #7BCC12;
}

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

}

.main .areaTop {
    min-height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.main .banner .areaTop {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

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

.areaBottom .mainBtnWrap {
    display: none;
}

.areaTop,
.areaBottom {
    width: 100%;
}

.inputExample {
    margin-bottom: 10px;
    height: 160px;
    border-radius: 12px;
}

.messageArea .failWrap.maxWidth {
    max-width: 500px;
    margin: auto;
}

.numArea .messageArea .failWrap.maxWidth {
    max-width: 720px;
}

.layerNotFind .listName {
    font-size: 30px;
    margin-bottom: 6px;
}

.layerNotFind .popupListCar {
    font-size: 24px;
}

.btnThen {
    border-radius: 12px;
}


.mainBtn .arrows {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.mainBtn .arrows span {
    font-size: 60px;
    line-height: 1;
    display: inline-block;
    font-weight: 600;
    width: 14px;
    color: rgba(255, 255, 255, 1);
    opacity: 0.3;
    /* text-shadow: 0 0 6px rgba(255,255,255,0); */
    -webkit-animation: arrowFlash 1.5s infinite;
    animation: arrowFlash 1.5s infinite;
}

.mainBtn .arrows span:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    /* 첫 번째 화살표 먼저 */
}

.mainBtn .arrows span:nth-child(2) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    /* 살짝 늦게 두 번째 화살표 */
}

@-webkit-keyframes arrowFlash {

    0%,
    80%,
    100% {
        opacity: 0.3;
        text-shadow: none;
    }

    40% {
        opacity: 1;
        /* text-shadow: 0 0 8px rgba(255,255,255,0.9); */
    }
}

@keyframes arrowFlash {

    0%,
    80%,
    100% {
        opacity: 0.3;
        text-shadow: none;
    }

    40% {
        opacity: 1;
        /* text-shadow: 0 0 8px rgba(255,255,255,0.9); */
    }
}

.mainBtnWrap .btnBox,
.mainBtnWrap .btnTitle {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.mainBtnWrap .btnBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -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;

}

.mainBtnWrap .btnTitle {
    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-wrap: nowrap;
    flex-wrap: nowrap;

}

.pageTimeline {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-bottom: 30px;
}

.pageWrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -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: 0px;
}

.pageNum {
    border: solid 2px #C0CDD8;
    aspect-ratio: 1/1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    border-radius: 50%;
    color: #C0CDD8;
    font-size: 24px;
    position: relative;
    z-index: 10;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: #C0CDD8;
}

.dark .pageNum {
    background: #364651;
    border: solid 2px #364651;
}

.pageNum.pageHere {
    border: solid 4px #F3F5F9;
    background: #7BCC12;
    -webkit-box-shadow: 0px 0px 0px 2px #7BCC12;
    box-shadow: 0px 0px 0px 2px #7BCC12;
    color: #fff;
    font-weight: 800;
    font-size: 24px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    margin: 2px;
}

.dark .pageNum.pageHere {
    background: #7BCC12;
    color: #fff;
    border-color: #06141F;
}

.pageLine {
    width: 100%;
    height: 2px;
    background: #C0CDD8;
    z-index: 2;
}

.dark .pageLine {
    color: #364651;
    background: #364651;
}

.pageLine.lineBefore {
    background: #7BCC12;
    opacity: 0.6;
}

.pageNum.pageBefore {
    color: #7BCC12;
    background: #7BCC12;
    border: solid 2px #7BCC12;
    opacity: 0.6;
}

.pageHereWrap {
    position: relative;
}

.pageText {
    position: absolute;
    width: 200px;
    text-align: center;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #7BCC12;
    font-size: 24px;
    font-weight: 600;
    margin-top: 10px;
}

.dark .pageNum.pageBefore {
    color: #ffffff90;
}

.mainRowImg {
    width: 100%;
    height: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: url(../../img/img_intro.png) center no-repeat;
    background-size: contain;
    display: none;
}

.inputBox.inputPopup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 26px;
    padding: 0;
    width: 100%;
    max-width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.inputPopup .active select {
    border-color: #7BCC12;
}

.inputPopup select {
    width: 100%;
    background: url(../../img/icon_select.svg)#fff center no-repeat;
    background-size: 20px;
    background-position: 98%;
    font-size: 24px;
    border-radius: 12px;
    line-height: 56px;
}

.dark .inputPopup select {
    background: url(../../img/dark/icon_select.svg)#435460 center no-repeat;
    background-size: 20px;
    background-position: 98%;
    border-color: #435460;
    color: #fff;
}

.dark .active select {
    border-color: #7BCC12;
}

.inputPopup .btnClose {
    background: none;
    color: inherit;
    height: 56px;
    padding: 0 20px;
    font-size: 20px;
    min-width: 180px;
    border-radius: 30px;
    border: solid 2px #dde0e7;
}

.dark .inputPopup .btnClose {
    background: none;
    border: solid 2px #4D606D;
}

.inputPopup .btnClose:hover,
.inputPopup .btnClose:active {
    border: solid 2px #C2C7D0;
    background: #dde0e7;
}

.dark .inputPopup .btnClose:hover,
.dark .inputPopup .btnClose:active {
    border: solid 2px #666B77;
    background: #364651;
}

.inputPopup .btnCom {
    background: #7BCC12;
    color: #fff;
    height: 56px;
    font-size: 20px;
    min-width: 180px;
    border-radius: 30px;
    padding: 0 20px;
}

.inputPopup .btnCom.before,
.inputPopup .btnCom.before:hover,
.inputPopup .btnCom.before:active {
    background: #C0CDD8;
    color: #fff;
    opacity: 0.7;
}

.dark .inputPopup .btnCom.before,
.dark .inputPopup .btnCom.before:hover,
.dark .inputPopup .btnCom.before:active {
    background: #4D606D;
}

.inputPopup .btnCom:hover {
    background: #67AB14;
}

select:hover {
    border-color: #7BCC12;
}

.dark .hokenWrap {
    background: #364651;
    border: none;
    color: #fff;
}

.hokenWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 20px;
    width: 100%;
    font-size: 20px;
    background: #fff;
    padding: 14px 20px;
    border-radius: 12px;
    border: solid 2px #D7DBE9;
    margin: 20px 0;
    margin-bottom: 0px;
}

.btnHokenEdit {
    border: solid 1px #7BCC12;
    background: #7BCC12;
    color: #fff;
    border-radius: 40px;
    padding: 2px 20px;
    font-size: inherit;
    height: 36px;
}

.btnHokenEdit:hover {
    background: #67AB14;
    color: #fff;
}

.hokenWrap p {
    font-size: inherit;
    margin: 0;
    color: inherit;
}

.dark .hokenTitle p {
    color: #B3B8BC;
}

.dark .hokenEditText {
    color: #fff;
}

.hokenEditWrap {
    font-size: inherit;
    color: inherit;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.hokenTitle {
    color: #7BCC12;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: inherit;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 30px;
    font-weight: 600;
}

.hokenText {
    color: #05141F;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.dark .hokenText {
    color: #fff;
}

.hokenEditText {
    color: #05141F;
    width: 100%;
    font-size: inherit;
    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;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.dark .hokenEditText {
    color: #fff;
}

select {
    width: 100%;
    padding-left: 20px;
    padding-right: 46px;
    border-radius: 10px;
    font-size: 20px;
    line-height: 48px;
}

.keyboardArea.keyboardPopup .key {
    font-size: 24px;
    aspect-ratio: 4/3;
}

.key.space {
    width: calc(40% - 6px);
    font-size: 18px;
    aspect-ratio: auto;
}

.key.space50 {
    width: calc(50% - 6px);
}

.keyboardArea.keyboardPopup .wide {
    font-size: 14px;
}

.inputCarNum .inputTitle {
    font-size: 28px;
}

.contentsWrap.wait {
    padding-bottom: 0;
}

.layerHoken .cautionText {
    text-align: left;
}

.popupWrap.layerHoken {
    max-height: 880px;
}

.popupWrap.layerHoken.hideKeyboard {
    max-height: 600px;
}

.popupWrap.layerHoken.hideKeyboard .keyboardArea {
    display: none;
}

.disabled .labelText {
    color: #7BCC12;
}

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

.setting {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.setContent {
    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;
    gap: 30px;
    margin-top: 20px;
}

.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;
    width: 100%;
}

.codeWrap .inputBox {
    width: 100%;
    max-width: 100%;
}

.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;
}

.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;
}

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

.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;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -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: 20px;
    font-size: inherit;

}

.numberWrap {
    font-size: inherit;
}

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

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

.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;
}

.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;
    gap: 20px;
}

.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;
}

.deviceWrap {
    -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 .appWrap .deviceWrap.callWrap {
    background: #16232C;
    border: none;
}

.appWrap .deviceWrap.callWrap {
    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;
    padding: 10px 20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background: #fff;
    border: solid 1px #d1d5e1;
    -webkit-box-shadow: none;
    box-shadow: none;
    gap: 10px;
}

.appWrap .deviceWrap.callWrap .deviceTitle {
    white-space: nowrap;
    word-break: keep-all;
}

.appWrap .deviceWrap.callWrap .serviceWrap {
    /* flex: 1; */
    gap: 10px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    /* flex-wrap: wrap; */
}

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

.appWrap .deviceWrap {
    gap: 0;
}

.setting .contentsWrap {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.setting .mainTitle {
    text-align: center;
    margin-bottom: 40px;
    font-size: 48px;
}

.appWrap {
    margin-bottom: 60px;
}

.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;
}

.dark .infoCall {
    background: #364651;
}

.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;
    font-size: 18px;
    background: #F3F5F9;
    line-height: 38px;
    border-radius: 40px;
    padding: 0 20px;
}

.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;

}

.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;

}

.serviceBox {
    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;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

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

.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 {
    color: #7BCC12;
    border: solid 1px #7BCC12;
}

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

.selectCategory {
    width: 100%;
}

.listTitle {
    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;
}

.inputCarCustomer .checkBox {
    max-width: 720px;
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: solid 2px #fff;
}

.inputCarCustomer .labelText {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.inputCarCustomer .labelText p {
    color: #666B77;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.inputCarCustomer .labelText b {
    color: #05141F;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
    margin-right: 6px;
}

.inputCarCustomer .checkBox.boxchecked {
    border: solid 2px #7BCC12;
    background: rgba(138, 198, 65, 0.2);
}

.inputCarCustomer .checkboxCustom {
    min-height: 56px;
    padding: 12px 0;
}

.mainCon {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.bannerArea {
    display: none;
}

.banner .bannerArea {
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    margin-bottom: 0px;
    margin-bottom: 0px;
}

.banner .mainText {
    margin-top: 30px;
}

.mainTitleBox .bannerArea {
    display: none;
}

.mainTitleBox.banner .bannerArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding: 0;
}

.bannerImgBox {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
}

.bannerWrap {
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    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;
    overflow: hidden;

}

.banner .bannerVideo {
    width: 104%;
    height: 104%;
    position: absolute;
    left: -2%;
    top: -2%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 1;
}

.banner .bannerArea img {
    display: inline-block;
    width: 104%;
    height: 104%;
    position: absolute;
    left: -2%;
    top: -2%;
    z-index: 0;
    -o-object-fit: cover;
       object-fit: cover;
}

.bannerGradient {
    position: absolute;
    bottom: -1px;
    left: -2vw;
    width: 104vw;
    height: 30px;
    z-index: 3;
    background: -webkit-gradient(linear, left bottom, left top, from(#F3F5F9), to(rgba(243, 245, 249, 0)));
    background: -o-linear-gradient(bottom, #F3F5F9 0%, rgba(243, 245, 249, 0) 100%);
    background: linear-gradient(360deg, #F3F5F9 0%, rgba(243, 245, 249, 0) 100%);

}

.bannerName {
    margin: 0 auto;
    padding: 0 30px;
    margin-top: -30px;
    width: 100%;
    position: relative;
    z-index: 4;
    max-width: 720px;
}

.banner .mainTitle {
    background: #fff;
    border-radius: 60px;
    text-align: center;
    min-height: 90px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 10px;
    -webkit-box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.1);
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 1;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(14px);
    /* 블러 핵심 */
    -webkit-backdrop-filter: blur(14px);
    /* 사파리(iOS) 호환 */
    border: 1px solid rgba(255, 255, 255, 1);
    /* 유리 테두리 느낌 */
    color: #fff;
    text-align: center;
}

.dark .banner .mainTitle {
    color: #fff;
    background: #364651;
    background: rgba(54, 70, 81, .6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    text-align: center;
}

.dark .banner .mainTitle p {
    color: #fff;
}

.dark .bannerGradient {
    background: -webkit-gradient(linear, left bottom, left top, from(#06141F), to(#06141f00));
    background: -o-linear-gradient(bottom, #06141F 0%, #06141f00 100%);
    background: linear-gradient(360deg, #06141F 0%, #06141f00 100%);
}

.banner .mainTitle p {
    color: #05141F;
}

.bannerLeft {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    max-width: 65%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.bannerRight {
    height: 100%;
    max-width: 35%;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.bannerImg {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}


.infoWrapText {
    font-size: 18px;
    border-radius: 12px;
    background: #dde0e7;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    color: #666B77;
    margin-top: 20px;
}

.infoWrapText p,
.infoWrapText span {
    color: inherit;
    font-size: inherit;
    word-break: keep-all;
}

.listBoxWrap.already {
    width: 500px;
    margin: 20px auto;
    max-width: 60%;
    min-width: 220px;
}

.listBoxWrap.already .carNum {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 12px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.listBoxWrap.already .btnListChoice {
    background: none;
    color: #7BCC12;
    line-height: inherit;
    border: none;
    padding: 0;
}

.infoWrapTitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.infoQuestion {
    margin-top: 30px;
    font-size: 20px;
}

.dark .infoWrapText {
    background: #364651;
}

.dark .infoWrapText p {
    color: #B3B8BC;
}


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

.passWrap p,
.passWrap b,
.passWrap span {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.passTitle {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.passTitle span {
    color: #7BCC12;
}

.passText {
    color: #666B77;
    font-size: 20px;
}

.passText span {
    color: #ff2727;
}

.passText b {
    color: #7BCC12;
    font-weight: 600;
}

.passImg {
    width: 120px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background: #fff;
    -webkit-box-shadow: 3px 3px 12px rgba(0, 22, 54, 0.1);
    box-shadow: 3px 3px 12px rgba(0, 22, 54, 0.1);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

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

.dark .passText {
    color: #B3B8BC;
}

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

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

.passRight {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.passArea .cautionText {
    text-align: center;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 40px;
    font-size: 24px;
    padding-top: 10px;
    margin-top: 0;
}

.passArea .failWrap {
    margin: 20px auto;
}

.timerText {
    color: #666B77;
    font-size: 20px;
    text-align: center;
}

.timerText p,
.inputText p {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.inputText {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 60px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-line-pack: center;
    align-content: center;
    /* justify-content: center; */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 12px;
    border: solid 2px #D7DBE9;
    font-size: 24px;
    background: #E4E6EF;
    color: #666B77;
    border: solid 2px #D7DBE9;
    padding: 0 20px;
}

.dark .inputText {
    background: #2A3740;
    border-color: #2A3740;
    color: #B3B8BC;
}

.textFull {
    width: 100%;
}

.layerPassAuth {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.bottomBox {
    padding-bottom: 40px;
    width: 100%;
    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;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    padding-top: 40px;
}

.selectBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

.selectLabel {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

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

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

.radioGroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
}

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

.radioBtn span {
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 60px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 12px;
    border: solid 2px #D7DBE9;
    font-size: 24px;
    cursor: pointer;
}

.radioBtn span:hover {
    border-color: #7BCC12;
}

.radioBtn input {
    display: none;
}

.radioBtn input:checked+span {
    background: #e9f7e9;
    border: 2px solid #7BCC12;
    color: #05141f;
    font-weight: 500;
}

.radioGroup:has(input:checked) .radioBtn input:not(:checked)+span {
    background: #E4E6EF;
    color: #666B77;
    border: solid 2px #D7DBE9;
}

.dark .radioBtn span {
    background: #364651;
    border-color: #364651;
}

.dark .radioBtn input:checked+span {
    border-color: #7BCC12;
    background: rgba(138, 198, 65, 0.2);
    color: #fff;
}

.dark .radioGroup:has(input:checked) .radioBtn input:not(:checked)+span {
    background: #2A3740;
    border-color: #2A3740;
    color: #B3B8BC;
}

.checkboxCustom.disabled,
.checkboxCustom.disabled.checked {
    background: #dfe3eb;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: default;
    border-color: #dfe3eb;
}

.checkboxCustom.disabled:hover,
.checkboxCustom.disabled:active {
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: default;
    border-color: #dfe3eb;
}

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

.dark .checkboxCustom.disabled,
.dark .checkboxCustom.disabled.checked {
    background: #2A3740;
    border-color: #2A3740;
}

.mainTitleBox {
    margin-top: 60px;
}

.banner.mainTitleBox {
    margin-top: 0;
}


/* 1000이상이면서 가로비율일때 */
@media screen and (min-width: 999px) and (orientation: landscape) {

    .mainTitle {
        margin-top: 60px;
    }

    .mainTitleBox {
        margin-top: 0px;
    }

    .passArea .failWrap {
        max-width: 500px;
        margin: 10px auto;
    }

    .endTimerText {
        font-size: 16px;
    }

    .endTimer {
        margin: 0 auto;
    }

    .endTimerSecond {
        font-size: 30px;
    }

    .endTimerTitle {
        font-size: 16px;
    }

    .main .areaTop {
        padding-left: 30px;
    }

    dotlottie-wc {
        width: 80px;
        height: 80px;
        margin-bottom: 0;
    }

    .successWrap .icon,
    .failWrap .icon {
        width: 20px;
        height: 20px;
    }

    .message span {
        line-height: 20px;
        font-size: 18px;
    }

    .message {
        font-size: 20px;
    }

    .failWrap .message,
    .successWrap .message {
        font-size: 14px;
    }

    .popupWrap .failWrap .message,
    .popupWrap .successWrap .message {
        font-size: 20px;
    }

    .selectCategory {
        margin-bottom: 20px;
    }

    .inputText,
    .radioBtn span {
        height: 52px;
        border-radius: 10px;
        font-size: 20px;
    }

    .inputCarCustomer .labelText {
        font-size: 18px;
    }

    .btnViewTerms {
        font-size: 18px;
    }

    .checkList .labelText {
        font-size: 18px;
    }

    .layerHoken .popupList {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 30px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .reserveList .inputTitle {
        font-size: 16px;
        padding-top: 16px;
    }

    .popupWrap.layerHoken {
        height: 90vh;
        max-height: 500px;
        max-width: 1200px;
        width: 90vw;
    }

    .popupWrap.layerHoken.hideKeyboard {
        max-width: 610px;
        max-height: 500px;
    }

    .main .bodyWrap {
        max-width: 1920px;
    }

    .carInfo {
        font-size: 16px;
    }

    .key {
        font-size: 26px;
    }

    .wide {
        font-size: 14px;
    }

    .mb {
        margin-bottom: 20px;
    }

    .mainRowImg {
        display: inline-block;
        display: none;
    }

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

    .keyboardArea.keyboardPopup {
        max-width: 100%;
    }

    .keyboardArea.keyboardPopup .wide {
        font-size: 16px;
    }

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

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

    .btnBack .icon {
        width: 14px;
        height: 46px;
        background-size: contain;
    }

    .kioskHeader .headerBox {
        gap: 10px;
    }

    .headerWrap {
        height: 50px;
    }

    .main .kioskHeader .headerWrap {
        height: 60px;
        padding: 0 40px;
    }

    .kioskHeader .header {
        gap: 10px;
    }

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

    .headerCenter {
        font-size: 20px;
    }

    .bodyWrap {
        padding-top: 50px;
    }

    input::-webkit-input-placeholder {
        font-size: 20px;
        line-height: 48px;
    }

    input::-moz-placeholder {
        font-size: 20px;
        line-height: 48px;
    }

    .introImg {
        height: 200px;
    }

    .introImgTime {
        height: 160px;
    }

    .introImgFail {
        height: 160px;
    }

    input:-ms-input-placeholder {
        font-size: 20px;
        line-height: 48px;
    }

    input::-ms-input-placeholder {
        font-size: 20px;
        line-height: 48px;
    }

    input::-webkit-input-placeholder {
        font-size: 20px;
        line-height: 48px;
    }

    input::-moz-placeholder {
        font-size: 20px;
        line-height: 48px;
    }

    input::placeholder {
        font-size: 20px;
        line-height: 48px;
    }

    .reserveText {
        max-height: 100px;
        font-size: 16px;

    }

    .inputExample {
        max-width: 500px;
        margin: 0 auto;
        margin-bottom: 0px;
        height: 100px;
    }

    .contentsWrap {
        max-width: 100%;
        padding-bottom: 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-top: 0;
    }

    .mainWrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 0px;
        padding-top: 60px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
    }

    .main .areaTop {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-left: 20px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .main .areaBottom {
        width: 55%;
    }

    .main .areaTop {
        width: 45%;
    }

    .areaTop,
    .areaBottom {
        max-width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 20px 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
    }

    .areaTop {
        max-height: 100vh;
        width: 100%;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .mainBottom {
        padding-top: 0px;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

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

    .mainArea {
        padding: 20px;
        width: 100%;
        background: #F3F5F9;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

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


    .mainTitle {
        font-size: 26px;
    }

    .mainTitle.smallTitle {
        font-size: 22px;
    }

    .areaTop .mainBtnWrap {
        display: none;
    }

    .areaBottom .mainBtnWrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 20px 0;
    }

    .mainListSub .btnText b {
        font-size: 30px;
        line-height: 42px;
    }

    .mainListSub {
        gap: 10px;
    }

    .mainReceipt {
        height: 100%;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        padding: 24px 0;
        display: none;
    }

    .fixedRight {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    .fixedRight .mainReceipt {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 0;
        padding-bottom: 0;
    }

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

    .mainBtnWrap .mainBtn {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: 46px;
        padding: 20px 0;
        height: 100%;
    }


    .subWrap .areaTop,
    .subWrap .areaBottom {
        padding: 0;
    }

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

    .subTitle.timeWrap {
        font-size: 30px;
    }

    .subTitleName {
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 10px;
    }

    .subText {
        font-size: 18px;
        padding: 0 20px;
        margin-bottom: 20px;
    }

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

    .setTime .icon {
        width: 24px;
        height: 24px;
    }

    .time {
        font-size: 24px;
    }

    .categoryWrap .blueText {
        font-size: 24px;
        margin-top: 10px;
    }

    .inputTitle {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 12px;
    }

    .inputPopup select {
        padding-right: 46px;
        border-radius: 10px;
        font-size: 20px;
        line-height: 48px;
    }

    input {
        padding-right: 46px;
        border-radius: 10px;
        font-size: 20px;
        line-height: 48px;
    }

    .inputCarCustomer .inputBox {
        gap: 30px;
    }


    .fixedRight {
        position: fixed;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        background: #eaedf3;
        width: 50%;
        height: calc(100% - 50px);
        right: 0;
        bottom: 0;
        padding: 0 30px;
        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 .fixedRight {
        background: #16232C;
    }

    .mainBtnWrap {
        gap: 16px;
    }

    .main .fixedRight {
        background: none;
        padding: 0 20px;
        padding-left: 0;
        padding-right: 20px;
        position: absolute;
        right: 0;
        bottom: 50%;
        -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
        transform: translateY(50%);
        width: 100%;
        height: 100%;
    }

    .mainList {
        max-width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .btnMainListSub {
        border-radius: 10px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 6px 20px;
    }

    .keyboardArea {
        width: 100%;
        max-width: 100%;
        height: auto;
        right: 0;
        top: 60%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-negative: 0;
        flex-shrink: 0;

    }

    .btnText {
        font-size: 20px;
    }

    .btnMainList {
        font-size: 24px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .btnViewList {
        height: 40px;
        font-size: 16px;
        padding: 0 20px;
    }

    .btnMainListSub .btnTitle {
        font-size: 18px;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .subHalf {

        padding-right: calc(50% + 30px);
    }

    .subHalf .subWrap {
        min-height: calc(100dvh - 80px);
        max-height: 100dvh;
        position: relative;
        /* overflow-y: auto; */
    }

    .popupBottom {
        padding-bottom: 40px;
    }

    .areaTop,
    .areaBottom {
        height: auto;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        width: 100%;
        position: relative;
    }

    .main .areaTop,
    .main .areaBottom {
        max-height: 600px;
        padding-top: 0;
        padding-bottom: 0;
        min-height: auto;
        height: 100%;
    }

    .banner .mainBottom {
        padding: 0 20px 20px 20px;
    }

    .bannerImgBox {
        height: 160px;
    }

    .banner .mainTitle {
        min-height: 60px;
    }

    .bannerGradient {
        display: none;
    }

    .banner .bannerArea {
        padding: 20px;
    }

    .bannerName {
        padding: 0 20px;
    }

    .banner .bannerArea .bannerWrap {
        border-radius: 10px;

    }

    .mainTop {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start
    }

    .banner .mainText {
        margin-bottom: 0;
        margin-top: 20px;
    }

    .boxCategory .checkboxCustom {
        width: calc(33.333333% - 8px);
    }

    .categoryWrap .areaBottom {
        width: 100%;
    }

    .categoryWrap .areaBottom {
        max-width: 1400px;
        width: 100%;
    }

    .btnSub {
        font-size: 18px;
        height: 60px;
        padding: 0 30px;
        min-width: 140px;
    }

    .btnPrev {
        font-size: 20px;
        height: 60px;
        padding: 0 30px;
        min-width: 140px;
    }

    .popupBtnWrap {
        padding-top: 30px;
    }

    .dark .mainArea {
        background: none;
    }


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

    .subBtn.mt {
        margin-bottom: 0px;
    }



    .popupListCar {
        font-size: 18px;
    }

    .carNum {
        /* font-size: 24px;
        line-height: 24px; */
        margin-bottom: 6px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        padding-right: 20px;
    }

    .listBoxWrap.already .carNum {
        width: 100%;
    }

    .btnReserve {
        line-height: 20px;
        font-size: 16px;
        padding: 0 10px;
    }

    .reserveArea {
        margin: 20px auto 0px auto;
        padding: 24px;
        border-radius: 10px;
    }

    .reserveTitle {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 0px;
    }

    .textList {
        padding: 0;
    }

    .textList .icon {
        width: 16px;
        height: 28px;
    }


    /* .dark .subBtn {
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(6, 20, 31, 0)), to(rgba(6, 20, 31, 1)));
        background: -o-linear-gradient(top, rgba(6, 20, 31, 0), rgba(6, 20, 31, 1));
        background: linear-gradient(to bottom, rgba(6, 20, 31, 0), rgba(6, 20, 31, 1));
    } */

    .popupListArea {
        padding: 20px;
    }

    .popupListBottom {
        text-align: left;
    }

    .messageArea.maxWidth .failWrap,
    .messageArea.maxWidth .successWrap {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .checkList .messageArea.maxWidth .failWrap,
    .checkList .messageArea.maxWidth .successWrap {
        margin-bottom: 0;
    }


    .popupAgreeArea {
        padding: 20px 20px;
    }


    .checkAgree {
        margin-bottom: 20px;
    }

    .subWrap.subWait {
        padding-bottom: 0;
        max-width: 720px;
        width: 100%;
        display: inline-block;
        margin-bottom: 0;
        margin: 0 auto;
    }

    .popupTitle {
        padding: 10px 0;
        font-size: 20px;
    }

    .timerBox {
        margin-bottom: 40px;
        padding: 20px;
        border-radius: 14px;
    }

    .notFixed {
        position: relative;
        left: 0;
        top: 0;
        bottom: 0;
    }

    .listReserve {
        margin-top: 20px;
        gap: 16px;
    }

    .checkList .listReserve {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .successWrap,
    .failWrap {
        max-width: 720px;
        margin-bottom: 0;
    }

    .categoryWrap .failWrap {
        max-width: 100%;
        width: 100%;
    }

    .keyboardArea {
        max-width: 720px;
        padding-bottom: 20px;
        margin: 0 auto;
    }

    .inputBox {
        max-width: 500px;
    }


    .listNameSmall {
        font-size: 26px;
    }

    .cautionText {
        font-size: 18px;
    }

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

    .popupWrap.layerIdleTimeout {
        height: auto;
    }

    .btnSend,
    .btnCheck {
        border-radius: 10px;
        padding: 0 20px;
        font-size: 18px;
    }

    .dark .mainBtn.btnRegi {
        height: 100%;
    }

    .mainTitle {
        font-size: 30px;
    }

    .mainTitle.smallTitle {
        font-size: 22px;
    }

    .checkList .checkBox {
        margin-bottom: 10px;
    }

    .checkAgree {
        margin-bottom: 0;
    }

    .boxCategory {
        margin-bottom: 20px;
    }


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

    .pageTimeline {
        padding-bottom: 20px;
        max-width: 100%;
        width: 500px;
    }

    .mainTop {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .passImg {
        width: 80px;
    }

    .passWrap {
        gap: 20px;
        margin-bottom: 20px;
    }

    .passTitle {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .passText {
        font-size: 14px;
    }

    .passArea .cautionText {
        font-size: 18px;
        padding-bottom: 20px;
    }

    .passWrap {
        max-width: 500px;
        gap: 20px;
        margin-bottom: 20px;
    }

    .passStep {
        gap: 20px;
    }
}

/* 1200이상일때 */
@media screen and (min-width: 1200px) {
    .areaBottom .mainBtnWrap {
        max-height: 600px;
    }

    .bannerImgBox {
        height: 180px;
    }

    .main .areaTop {
        max-height: 100%;
        max-height: 600px;
    }

    .main .fixedRight {
        padding-right: 30px;
    }

    .main .areaBottom {
        width: 60%;
        max-height: 100%;
        max-height: 600px;
    }

    .setting .mainTitle {
        font-size: 48px;
    }
}

/* 1400이상일때 */
@media screen and (min-width: 1431px) {
    .mainTitle {
        font-size: 30px;
    }

    .mainTitle.smallTitle {
        font-size: 24px;
    }


}

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

    .mainTitleBox {
        margin-top: 40px;
    }

    .banner.mainTitleBox {
        margin-top: 0px;
    }

    .textBox {
        gap: 20px;
    }

    .listBoxWrap.already {
        margin: 0 auto;
    }

    .bannerImgBox {
        border-radius: 0;
        height: 180px;
    }

    .banner .bannerWrap {
        border-radius: 0;
    }

    .banner .mainCon {
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    }

    .banner .mainTitle {
        min-height: 45px;
    }

    .banner .mainTop {
        padding: 20px;
    }

    .banner .mainBottom {
        padding: 0 20px 20px 20px;
    }

    .bannerName {
        padding: 0 20px;
    }

    .inputText,
    .radioBtn span {
        height: 46px;
        border-radius: 10px;
        font-size: 16px;
        border-width: 1px;
    }

    .radioBtn input:checked+span,
    .radioGroup:has(input:checked) .radioBtn input:not(:checked)+span {
        border-width: 1px;
    }

    .serviceWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
    }


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

    .inputCarCustomer .checkBox {
        border-width: 1px;
    }

    .inputCarCustomer .checkBox.boxchecked {
        border-width: 1px;
    }

    .inputCarCustomer .checkboxCustom {
        min-height: 44px;
    }

    .checkList .reserveArea {
        margin-bottom: 20px;
    }

    .serviceWrap .serviceBtn {
        width: 100%;
    }

    .popupWrap.layerCarName {
        max-height: 390px;
    }

    .popupWrap.layerType {
        max-height: 320px;
    }

    .popupWrap.layerSelectCar {
        max-height: 480px;
    }

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

    .setting .mainTitle {
        font-size: 32px;
    }

    .appNumber {
        gap: 0px;
    }

    .numberWrap span {
        width: 60px;
        display: inline-block;
    }

    .btnStart {
        min-width: 100%;
    }

    .hokenWrap {
        border-width: 1px;
    }

    .hokenEditText {
        -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;
    }

    .key.space {
        font-size: 12px;
    }

    .popupWrap.layerHoken {
        max-height: 720px;
    }

    .popupWrap.layerHoken.hideKeyboard {
        max-height: 470px;
    }

    .pageLine {
        height: 1px;
    }

    .dark input {
        border-width: 1px;
    }

    .infoWrapTitle {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .infoWrapText {
        font-size: 14px;
        margin-top: 10px;
    }

    .infoQuestion {
        margin-top: 10px;
        font-size: 16px;
    }

    .timerText {
        font-size: 16px;
        margin-top: 10px;
    }

    .bottomBox {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .inputPopup .btnCom,
    .inputPopup .btnClose {
        font-size: 18px;
        min-width: 120px;
        border-width: 1px;
    }

    .layerHoken .labelText {
        font-size: 16px;
    }

    .keyboardArea.keyboardPopup .key {
        font-size: 16px;
    }

    .keyboardArea.keyboardPopup .wide {
        font-size: 10px;
    }

    .boxCategory .checkboxCustom.checked {
        border-width: 1px;
    }

    .checkList .checkBox {
        border-width: 1px;
        margin-bottom: 0;
    }

    .checkList .checkBox.boxchecked {
        border-width: 1px;
    }

    .checkList .labelText {
        font-size: 16px;
    }

    .messageArea {
        max-width: 500px;
    }

    .fixedRight {
        text-align: center;
    }

    .introImgFail {
        height: 80px;
        margin-bottom: 20px;
    }

    .introImg {
        height: 160px;
        margin-bottom: 0;
    }

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

    .logoWrap {
        width: 120px;
    }

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

    .headerWrap {
        border-bottom: solid 1px #D7DBE9;
    }

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

    .logoWrap {
        padding: 0;
        height: 59px;
    }

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

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

    .btnBack .icon {
        width: 14px;
        height: 46px;
        background-size: contain;
    }

    .headerClock {
        gap: 6px;
    }

    .kioskHeader .headerBox {
        gap: 10px;
    }

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

    .headerDate {
        font-size: 12px;
        white-space: nowrap;
    }

    .headerWrap {
        height: 50px;
    }

    .main .headerWrap {
        height: 60px;
    }

    .kioskHeader .header {
        gap: 10px;
    }

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

    .headerCenter {
        font-size: 20px;
    }

    .contentsWrap {
        max-width: 100%;
        margin: 0 auto;
    }

    .bodyWrap {
        padding: 50px 20px 0px 20px;
        min-width: 300px;
        /* min-height: 100%; */

    }

    .mainWrap {
        padding-top: 60px;
    }

    .mainTitle {
        font-size: 26px;
    }

    .mainTitle.smallTitle {
        font-size: 24px;
    }

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

    .banner .mainText {
        margin-top: 16px;
        margin-bottom: 20px;
    }


    .mainBtn {
        font-size: 34px;
        border-radius: 10px;
    }

    .mainBtnWrap .mainBtn {
        font-size: 34px;
        padding: 20px 0px;
    }

    .mainBottom {
        max-width: 700px;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .mainList {
        padding: 0;
        border-radius: 14px;

    }

    .smallExample {
        max-width: 300px;
    }

    .btnMainList {
        /* height: 80px; */
        padding: 20px 0;
        font-size: 26px;
        gap: 10px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    }

    .btnViewList {
        padding: 0 20px;
        font-size: 16px;
        border-width: 1px;
        border-radius: 40px;
        height: 36px;
        gap: 4px;
    }

    .btnViewList:hover {
        border-width: 1px;
    }

    .btnViewList .icon {
        width: 16px;
        height: 26px;
    }

    .mainListLeft {
        gap: 6px;
        font-size: 20px;
    }

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


    .btnMainListSub {
        padding: 4px 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;

    }

    .btnMainListSub .btnTitle {
        min-width: 90px;
        margin-bottom: 0;
        font-size: 18px;
        gap: 14px;
        line-height: 30px;
    }

    .mainListSub .btnText b {
        font-size: 26px;
        line-height: 40px;

    }

    .btnText {
        font-size: 20px;
        gap: 6px;
    }

    .btnText b {
        font-size: 60px;
    }

    .btnBgWait,
    .btnBgRepair {
        width: 30px;
        margin-right: 6px;
    }

    .btnListTab .icon {
        display: none;
    }

    .btnListTab {
        gap: 8px;
        height: auto;
        padding: 6px 0;
        font-size: 18px;
        border-radius: 10px;
        word-break: keep-all;
    }

    .dark .btnReceipt .receiptType {
        border: solid 1px #B8C7D3;
    }

    .dark .btnRegi .receiptType {
        border: solid 1px #7BCC12;
    }

    .btnRegi .receiptType,
    .btnReceipt .receiptType {
        border-width: 1px;
    }

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

    .btnListTab {
        gap: 12px;
        font-size: 20px;
        border-width: 1px;
    }

    .btnListTab:hover {
        border-width: 1px;
    }

    .btnListTab.active {
        border-width: 1px;
    }

    .waitingTab {
        gap: 12px;
    }

    .subWrap {
        padding-top: 20px;
    }

    .btnListTab.active:hover {
        border-width: 1px;
    }

    .waitingWrap {
        gap: 10px;
        padding-bottom: 14px;
    }

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

    .listShadow {
        height: 40px;
    }

    .listBox {
        padding: 14px;
        border-width: 1px;
        border-radius: 10px;
        margin-bottom: 16px;
    }

    .carNum {
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 4px;
    }

    .btnReserve {
        font-size: 14px;
        padding: 0 10px;
        line-height: 22px;
        border-width: 1px;
        border-radius: 20px;
    }


    .scrollBox {
        padding: 0 10px;
    }

    .waitingList .scrollBox {
        padding: 0px;
    }

    .listWrap {
        padding-bottom: 40px;
    }

    .empty {
        border-width: 1px;
        border-radius: 10px;
        font-size: 14px;
    }

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

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

    input {
        border-width: 1px;
        padding: 0 20px;
        padding-right: 46px;
        border-radius: 10px;
        line-height: 44px;
        font-size: 16px;
        padding-left: 14px;
    }

    input::-webkit-input-placeholder {
        font-size: 18px;
        line-height: 44px;
    }

    input::-moz-placeholder {
        font-size: 18px;
        line-height: 44px;
    }

    input:-ms-input-placeholder {
        font-size: 18px;
        line-height: 44px;
    }

    input::-ms-input-placeholder {
        font-size: 18px;
        line-height: 44px;
    }

    input::placeholder {
        font-size: 18px;
        line-height: 44px;
    }

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

    .inputCarNum input::-webkit-input-placeholder {
        font-size: 20px;
        line-height: 60px;
    }

    .inputCarNum input::-moz-placeholder {
        font-size: 20px;
        line-height: 60px;
    }

    .inputCarNum input:-ms-input-placeholder {
        font-size: 20px;
        line-height: 60px;
    }

    .inputCarNum input::-ms-input-placeholder {
        font-size: 20px;
        line-height: 60px;
    }

    .inputCarNum input::placeholder {
        font-size: 20px;
        line-height: 60px;
    }

    .inputCarNum input {
        padding-left: 46px;
    }

    .inputDelete {
        width: 24px;
        right: 16px;
    }

    .inputCarNum .inputBox {
        gap: 14px;
    }

    .inputCarCustomer .inputBox {
        margin: auto;
        gap: 20px;
    }

    .inputPopup select {
        border-width: 1px;
        padding: 0 20px;
        padding-right: 46px;
        border-radius: 10px;
        line-height: 44px;
        font-size: 18px;
        padding-left: 14px;
    }

    input,
    select {
        border-width: 1px;
    }

    input:hover,
    select:hover {
        border-width: 1px;
    }

    input.active {
        border-width: 1px;
    }

    .inputTitle {
        line-height: 24px;
        padding-top: 0px;
        font-size: 16px;
        margin-bottom: 6px;
    }

    .inputCarNum .inputTitle {
        font-size: 18px;
    }

    .reserveList .inputTitle {
        padding-top: 15px;
        padding-top: 10px;
        font-size: 15px;
        padding-bottom: 0px;
        margin-bottom: 0;
    }

    .reserveTitle {
        font-size: 16px;
        line-height: 1.5;
    }

    .checkList .reserveTitle {
        padding-bottom: 0px;
        top: 0;
        padding-top: 10px;
    }

    .inputCarNum {
        margin: auto;
        max-width: 500px;
    }

    .inputCarCustomer {
        max-width: 500px;
        margin: auto;
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .popupWrap {
        border-radius: 10px;
        max-width: 610px;
        width: calc(100% - 40px);
        overflow-y: auto;
        max-height: 90%;
        /* height: fit-content; */
    }

    .popupTitle {
        border-width: 1px;
        font-size: 20px;
        padding: 14px 0;
        border-radius: 20px 20px 0 0;
    }

    .popupListArea {
        padding: 20px 0px 20px 0px;
    }

    .popupAgreeArea {
        padding: 20px;
    }

    .popupListBox {
        /* border: solid 1px #2B3740; */
        -webkit-box-shadow: 0px 1px 12px rgba(0, 22, 54, 0.1);
        box-shadow: 0px 1px 12px rgba(0, 22, 54, 0.1);
        padding: 14px;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .popupListBox:active {
        -webkit-box-shadow: 0px 1px 12px rgba(0, 22, 54, 0.2);
        box-shadow: 0px 1px 12px rgba(0, 22, 54, 0.2);

    }

    .keyboardArea.keyboardPopup {
        max-width: 100%;
    }

    .btnListChoice {
        font-size: 16px;
        padding: 0 14px;
        line-height: 30px;
        border-radius: 20px;
        border-width: 1px;
    }

    .listName {
        font-size: 15px;
        line-height: 1.2;
    }

    .popupListCar {
        font-size: 14px;
        margin-top: 6px;
    }

    .layerNotFind .popupResult {
        padding: 30px 0 16px 0;
    }

    .popupResult .message {
        font-size: 16px;
    }

    .popupResult .message span {
        font-size: 20px;
    }

    .popupBtnWrap {
        padding-top: 10px;
    }

    .popupResult .successWrap,
    .popupResult .failWrap {
        margin-top: 0;
    }

    .btnClose {
        font-size: 18px;
        padding: 0 20px;
        line-height: 34px;
        border-radius: 20px;
        border-width: 1px;
    }

    .btnClose:hover {
        border-width: 1px;
    }

    .popupAgreeBg {
        border-radius: 10px;
        padding: 20px 10px;
        -webkit-box-shadow: 0px 1px 12px rgba(0, 22, 54, 0.1);
        box-shadow: 0px 1px 12px rgba(0, 22, 54, 0.1);
    }

    .checkmark {
        width: 18px;
        height: 18px;
        background-size: 12px;
        border-radius: 4px;
    }

    .checked .checkmark {
        background-size: 12px;
    }

    .checkboxCustom {
        gap: 8px;
    }

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

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

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

    .btnViewTerms {
        font-size: 16px;
        line-height: 30px;
    }

    .btnViewTerms .icon {
        width: 20px;
        height: 30px;
    }

    .reserveArea {
        margin: 20px auto 0px auto;
        padding: 16px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 9px 16px rgba(0, 22, 54, 0.1);
        box-shadow: 0px 9px 16px rgba(0, 22, 54, 0.1);

    }

    .reserveList .inputCarCustomer {
        max-width: 700px;
    }

    .reserveList .inputCarCustomer {
        margin-bottom: 0;
    }

    .btnTabText p {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    .reserveBox {
        border-radius: 10px;
        padding: 0 10px;
        padding-bottom: 10px;
    }

    .areaTop .btnGoHome {
        margin-right: 0;
        font-size: 16px;
        height: 36px;
    }

    .reserveText {
        font-size: 15px;
        line-height: 1.5;
        max-height: 60px;
        overflow: auto;
        max-height: 60px;
    }

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

    .listReserve {
        gap: 6px;
        margin-top: 14px;
    }

    .popupListBottom {
        text-align: left;
    }

    .mb {
        margin-bottom: 20px;
    }

    .subBtn.mt {
        margin-top: 0px;
        margin-bottom: 40px;
    }


    .boxCategory {
        gap: 12px;
        margin-bottom: 20px;
    }

    .categoryWrap .failWrap {
        margin-bottom: 20px;
    }

    .boxCategory .checkboxCustom {
        border-radius: 10px;
        -webkit-box-shadow: 0px 1px 12px rgba(0, 22, 54, 0.1);
        box-shadow: 0px 1px 12px rgba(0, 22, 54, 0.1);
        padding: 10px;
        border-width: 1px;
    }

    .dark .boxCategory .checkboxCustom {
        border-width: 1px;

    }

    .boxCategory .labelText {
        font-size: 16px;
    }

    .hokenWrap {
        font-size: 16px;
        padding: 10px 16px;
    }

    .listNameSmall {
        text-align: center;
        word-break: keep-all;
        font-size: 18px;
    }

    .keyboardArea {
        padding-top: 10px;
        padding-bottom: 10px;
        max-width: 500px;
        margin: 0 auto;
    }

    .cautionText {
        font-size: 15px;
    }

    .textList .icon {
        width: 14px;
        height: 22px;
    }

    .reserveText p {
        padding: 0;
    }

    .textList {
        gap: 6px;
        padding: 0
    }

    .dotlottie {
        max-height: 300px;
    }

    .timerBox {
        margin-bottom: 0;
        padding: 14px;
        border-radius: 14px;
    }


    .popupWrap .endTimerSecond {
        font-size: 30px;
        min-width: 200px;
    }

    .endTimerTitle {
        font-size: 14px;
    }

    .popupWrap .endTimerTitle {
        margin-bottom: 20px;
        font-size: 18px;
        margin-top: 0;
    }

    dotlottie-wc {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .popupWrap .endTimer {
        margin-top: 30px;
    }

    .blueText {
        margin-top: 4px;
    }

    .plateInputs {
        gap: 4px;
        margin-bottom: 20px;
    }

    .key {
        font-size: 20px;
        border-width: 1px;
        width: calc(10% - 4px);
    }

    .wide {
        font-size: 10px;
    }

    .keyboard.keyboardHangul .key.double {
        width: 114px;
    }

    .keyboardWrapper {
        margin: 0 auto;
    }


    .keyboard.active .hangulWrap {
        gap: 4px;
    }


    .keyboard.active .hangulWrap.width {
        gap: 20px;
        margin-top: 40px;
    }

    .inputArea.active input {
        border-width: 1px;
    }

    .btnStay {
        border-radius: 30px;
        line-height: 36px;
        border-width: 1px;
        padding: 0 20px;
        font-size: 16px;

    }

    .btnGoHome {
        border-radius: 30px;
        line-height: 36px;
        /* margin-right: 12px; */
        padding: 0 20px;
        border-width: 1px;
        font-size: 16px;
    }


    .keyboard.keyboardHangul .row {
        gap: 4px;
    }

    .keyboardHangul,
    .keyboardEnglish {
        gap: 4px;
    }

    .keyboardHangul .row,
    .keyboardEnglish .row {
        gap: 4px;
    }

    .keyboard.keyboardHangul.active {
        gap: 4px;
    }

    .hangulWrap.mr {
        margin-right: 20px;
    }

    .endTimerText {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .inputInsurance {
        padding-top: 40px;
    }

    .inputVehicle {
        margin-top: 20px;

    }

    .inputVehicle .inputWrap {
        padding-left: 30px;
        margin-top: 20px;
    }

    .radioCustom {
        padding-left: 36px;
        font-size: 16px;
    }


    .radioMark {
        height: 24px;
        width: 24px;
        border-width: 1px;
    }

    .radioCustom .radioMark::after {
        width: 14px;
        height: 14px;
    }

    .checkAgree {
        margin-bottom: 40px;
    }

    .checkAgree .labelText p {
        margin-right: 6px;
    }

    .btnSub {
        font-size: 20px;
        padding: 0 20px;
        height: 50px;
        min-width: 140px;
    }

    .btnPrev {
        font-size: 20px;
        padding: 0 20px;
        height: 50px;
        min-width: 140px;
        border-width: 1px;
    }

    .message {
        font-size: 14px;
    }

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

    .successWrap,
    .failWrap {
        /*max-width: 500px;*/
        margin: 16px auto;
        border-radius: 10px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4px;
        text-align: center;
        width: 100%;
        padding: 14px 14px;
    }

    .categoryWrap .messageArea {
        max-width: 100%;
    }

    .mainArea {
        padding: 0;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }

    .mainReceipt {
        min-width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .mainCon {
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    }

    .successWrap .icon,
    .failWrap .icon {
        width: 22px;
        margin: 0;
    }


    .message span {
        font-size: 18px;
        gap: 4px;
        font-weight: 600;
        line-height: 1.2;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 0;
    }

    .inputMessageArea {
        padding-top: 12px;
        /* padding-bottom: 20px; */

    }

    .mainBtnWrap {
        max-width: 700px;
        padding: 0 20px;
        margin: 0;
        gap: 10px;
    }

    .inputMessage {
        line-height: 20px;
        font-size: 15px;
    }

    .receiptType {
        border-radius: 40px;
        padding: 0 14px;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 6px;
    }

    .popupListTop {
        gap: 10px;
        text-align: left;
        width: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .popupList {
        padding: 0 10px
    }

    .btnTabText {
        padding: 0 10px;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    .carNumber {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    .popupBottom {
        padding-bottom: 40px;
    }

    .btnSend,
    .btnCheck {
        border-radius: 10px;
        height: 46px;
        min-height: 46px;
        font-size: 18px;
    }

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

    .areaTop,
    .areaBottom {
        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;
    }

    .inputCarNum .inputArea {
        margin-bottom: 10px;
    }

    .messageArea.maxWidth {
        max-width: 100%;
        max-width: 700px;
    }


    .subWrap.subWait {
        padding-top: 20px;
        max-width: 700px;
        width: 100%;
        margin: auto;
        padding-bottom: 0;
    }

    .popupAgree {
        font-size: 14px;
    }

    .popupAgree b {
        font-size: 16px;
        margin-bottom: 10px;
        display: inline-block;
    }

    .reserveArea .checkAgree {

        margin: 20px 0 0 0;
    }

    .checkList .checkboxCustom {
        height: 44px;
        padding: 0;
    }

    .checkBox {
        width: 100%;
        margin: 0 auto;
        padding: 0 16px;
        border-radius: 10px;
    }


    .checkBox .checkAgree {
        margin: 0;
        padding: 0;
    }

    .failWrap.maxWidth {
        max-width: 500px;
        margin: 20px auto;
    }


    .areaBottom .mainBtnWrap {
        display: none;
    }

    .inputExample {
        height: 100px;
        max-width: 500px;
        margin-bottom: 20px;
        border-radius: 14px;
    }

    dotlottie-wc {
        width: 80px;
        height: 80px;
    }

    .btnClose {
        font-size: 16px;
        line-height: 36px;
    }

    .popupListBox:hover .btnListChoice {
        border: solid 1px #7BCC12;
    }

    .btnClose {
        font-size: 16px;
    }

    .mainBtn .arrows span {
        font-size: 30px;
        width: 8px;
    }

    .pageTimeline {
        padding-bottom: 20px;
        max-width: 500px;
    }

    .pageNum {
        font-size: 16px;
        width: 10px;
        height: 10px;
    }

    .pageNum.pageHere {
        font-size: 14px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border: solid 2px #F3F5F9;
        -webkit-box-shadow: 0px 0px 0px 1px #7BCC12;
        box-shadow: 0px 0px 0px 1px #7BCC12;
    }

    .introImgTime,
    .introImgLunch {
        width: 140px;
        height: 140px;
    }

    .subTitle.timeWrap {
        font-size: 20px;
    }

    .subTitleName {
        font-size: 18px;
        line-height: 30px;
        border-width: 1px;
        margin-bottom: 10px;
    }

    .setTimeTitle {
        font-size: 18px;
        line-height: 24px;
    }

    .setTime .icon {
        width: 24px;
        height: 24px;
    }

    .time {
        font-size: 18px;
    }

    .setTime {
        gap: 6px;
        padding: 14px;
        margin-top: 20px;
    }

    .introImgTime,
    .introImgLunch {
        margin-top: 10px;
    }

    .setTimeArea {
        padding: 10px;
    }

    .passWrap {
        max-width: 500px;
        gap: 20px;
        margin-bottom: 20px;
    }

    .passStep {
        gap: 20px;
    }

    .passImg {
        width: 80px;
    }

    .passTitle {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .passText {
        font-size: 14px;
    }

    .passArea .cautionText {
        font-size: 18px;
        padding-bottom: 20px;
    }

    .popupResult {
        padding: 20px;
    }
}

@media all and (max-width:519px) {

    .bannerImgBox {
        height: 160px;
    }

    .boxCategory .checkboxCustom {
        width: 100%;
    }

    .setting .mainTitle {
        font-size: 26px;
    }

    .mainTitle {
        font-size: 24px;
    }

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

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

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

    .popupWrap.layerHoken {
        max-height: 700px;
    }

    .layerHoken .cautionText {
        font-size: 14px;
    }

    .slideText {
        display: none;
        width: 100%;
    }

    .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;
    }

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

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

    .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;
    }

    .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;
    }

    .mainTitle.smallTitle {
        font-size: 20px;
    }

}

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

    .bannerImgBox {
        height: 120px;
    }

    .mainTitle {
        font-size: 20px;
    }

    .mainTitle.smallTitle {
        font-size: 16px;
    }

    .mainListLeft {
        font-size: 16px;
        ;
    }

    .textList {
        font-size: 14px;
    }

    .btnViewList {
        font-size: 14px;
    }

    .mainBtnWrap .mainBtn {
        font-size: 20px;
    }

    .labelText {
        font-size: 14px;
    }

    .btnViewTerms {
        font-size: 14px;
    }

    .kioskHeader .header {
        gap: 6px;
    }

    .logoWrap {
        width: 100px;
    }
}