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

.layerHoken .popupList {
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.layerHoken .cautionText {
    text-align: left;
    margin-bottom: 0;
}

.wrap {
    overflow-y: visible;
}

.subTitle {
    font-size: 30px;
    margin-bottom: 10px;
}
.success .subTitle{
    color: #05141f;
    font-size: 40px;
    margin-bottom: 30px;
    
    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;
}
.success .subTitle span{
    font-size: 40px;
    display: inline;
    color: #7AAF39;
    font-weight: 600;
    line-height: 1.2;
}
.layerPopup {
    height: 100%;
}

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

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

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

}


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

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

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

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

.headerClock {
    gap: 10px;
}

.kioskHeader .headerBox {
    gap: 10px;
    margin: 0 auto;
}

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

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

.headerDate {
    font-size: 14px;
}

.main .headerWrap {
    height: 60px;
}

.settingMain .headerWrap {
    height: 60px;
}

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

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

.headerCenter {
    font-size: 20px;
}

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

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


.inputPopup select {
    width: 100%;
    background: url(../../img/icon_select.svg)#fff center no-repeat;
    background-size: 16px;
    background-position: 98%;
}

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

.inputPopup .btnClose {
    background: none;
    color: inherit;
    height: 50px;
    padding: 0 20px;
    font-size: 16px;
    min-width: 140px;
    border-radius: 30px;
    border: solid 1px #dde0e7;
}

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

.inputPopup .btnClose:hover,
.inputPopup .btnClose:active {
    border: solid 1px #C2C7D0;
    background: rgba(0, 0, 0, 0.05);
}

.dark .inputPopup .btnClose:hover,
.dark .inputPopup .btnClose:active {
    border: solid 1px #666B77;
    background: rgba(0, 0, 0, 0.1);
}

.inputPopup .btnCom {
    background: #7BCC12;
    color: #fff;
    height: 50px;
    font-size: 16px;
    min-width: 140px;
    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;
}

.hokenWrap {
    width: 100%;
    font-size: 16px;
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    border: solid 1px #D7DBE9;
    margin: 16px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 10px;
    max-width: 100%;
}

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

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

.hokenWrap {
    display: none;
}

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

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

.dark .hokenWrap p {
    color: #fff;
}

.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: 20px;
    font-weight: 600;
}

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

.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;
    gap: 4px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.dark .hokenEditText {
    color: #fff;
}

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

.popupWrap {
    max-height: 520px;
}

.popupWrap.layerHoken {
    max-height: 480px;
    width: 500px;
    max-width: 90%;
}

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

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

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

.bodyWrap {
    padding: 50px 0px 20px 0px;
    min-width: 300px;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
    min-height: 100vh;
}

.bodyWrap.subHalf {
    padding-top: 50px;
}

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

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

.mainArea {
    padding: 0;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

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

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

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

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

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

.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%;
    padding-left: 20px;
    padding-right: 20px;
}

.main .areaBottom {
    height: 100%;
    width: 55%;
    max-height: 560px;
    padding: 20px;
}

.main .fixedRight {
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.mainTitle {
    margin-top: 60px;
    font-size: 40px;
    text-align: center;
}

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

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

.mainImg {
    background: url(../../img/img_receiptCar2.png) center no-repeat;
    background-size: 104%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    aspect-ratio: 350 / 196;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 300px;
    overflow: hidden;
}

.mainImg video {
    width: 104%;
    margin-left: -2%;
    margin-right: -2%;
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;

}

.mainImgArea {
    width: 100%;
    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;
    background: url(../../img/img_receiptCar_bg.png) center repeat-x;
    background-size: auto 104%;
}

.btnRegi .mainImgArea {
    width: 100%;
    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;
    background: url(../../img/img_reserveCar_bg.png) center repeat-x;
    background-size: auto 104%;
}

.dark .mainImgArea {
    width: 100%;
    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;
    background: #364651;
}

.btnRegi .mainImg {
    background: url(../../img/img_reserveCar1.png) center no-repeat;
    background-size: 104%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.dark .mainImg {
    background: url(../../img/img_receiptCarDark1.png) center no-repeat;
    background-size: 104%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.dark .btnRegi .mainImg {
    background: url(../../img/img_reserveCarDark1.png) center no-repeat;
    background-size: 104%;
}

.mainImg video.videoDark {
    display: none;
}

.mainImg video.videoLight {
    display: inline-block;
}

.dark .mainImg video.videoDark {
    display: inline-block;
}

.dark .mainImg video.videoLight {
    display: none;
}

.mainImg video.videoLight {
    background: url(../../img/img_receiptCar2.png) center no-repeat;
    background-size: cover;
}

.btnRegi .mainImg video.videoLight {
    background: url(../../img/img_reserveCar1.png) center no-repeat;
    background-size: cover;
}

.dark .mainImg video.videoDark {
    background: url(../../img/img_receiptCarDark1.png) center no-repeat;
    background-size: cover;
}

.dark .btnRegi .mainImg video.videoDark {
    background: url(../../img/img_reserveCarDark1.png) center no-repeat;
    background-size: cover;
}


.mainTop {
    width: 100%;
}

.mainReceipt {
    margin: auto;
    text-align: center;
    width: 100%;
    display: none;
}

.mainBottom {
    width: 100%;
}

.intro .subTitle p {
    display: inline;
    line-height: inherit;
}

.checkAgree .labelText p.red {
    color: #F52932;
    display: inline-block;
    margin-left: 0;
    font-weight: 600;
}

.mainBtn {
    position: relative;
    font-size: 34px;
    border-radius: 10px;
    width: 100%;
    background: #cfd6df;
    color: #fff;
    background: -o-linear-gradient(180deg, #2CAC65 30%, #6AD87E 40%);
    background: -o-linear-gradient(top, #2CAC65 30%, #6AD87E 40%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #2CAC65), color-stop(40%, #6AD87E));
    background: linear-gradient(180deg, #2CAC65 30%, #6AD87E 40%);
    -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-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
}

.mainBtnWrap {
    gap: 16px;
    width: 100%;
}

.dark .mainBtn {
    background: #364752;
    color: #fff;

}

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

.mainBtn:hover,
.mainBtn:active {
    background: #bbc1c9;
    -webkit-box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.2);
    background: -o-linear-gradient(180deg, #2CAC65 30%, #6AD87E 40%);
    background: -o-linear-gradient(top, #2CAC65 30%, #6AD87E 40%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #2CAC65), color-stop(40%, #6AD87E));
    background: linear-gradient(180deg, #2CAC65 30%, #6AD87E 40%);
}

.mainBtn:hover video {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    opacity: 0;
}

.mainBtnWrap:active video {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    opacity: 0;
}

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

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

.mainBtn.btnRegi {
    height: auto;
    background: #cfd6df;
    color: #fffF;
    background: -o-linear-gradient(180deg, #3670DC 30%, #74A0FF 40%);
    background: -o-linear-gradient(top, #3670DC 30%, #74A0FF 40%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #3670DC), color-stop(40%, #74A0FF));
    background: linear-gradient(180deg, #3670DC 30%, #74A0FF 40%);

}

.dark .mainBtn.btnRegi {
    height: auto;
    background: #364651;
    color: #fff;
}

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

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

.mainBtnWrap .mainBtn {
    font-size: 44px;
    padding: 30px 0;
    overflow: hidden;
    -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;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    font-weight: 600;
    word-break: keep-all;
    white-space: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}


.mainBottom {
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 0px;
}

.dark .mainBottom {
    background: none;
}

.btnMainList {
    padding: 16px 0;
    font-size: 26px;
    gap: 10px;

}

.btnViewList {
    padding: 0 20px;
    font-size: 16px;
    border: solid 1px #C2C7D0;
    border-radius: 30px;
    height: 36px;
    line-height: 36px;
    gap: 4px;
    color: #666B77;
}

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

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

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

.btnViewList .icon {
    width: 12px;
    height: 24px;
}

.mainList {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

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

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


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

.mainListSub .btnText p {
    font-size: 20px;
    line-height: 36px;
}

.btnMainListSub {
    padding: 10px 14px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);

}

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

.btnMainListSub .btnTitle {
    min-width: 90px;
    margin-bottom: 0;
    font-size: 16px;
    gap: 14px;
}


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

.btnListTab .icon {
    display: none;
}

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

.btnListTab .icon {
    display: none;
}

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

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

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

.subWrap {
    padding-top: 40px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

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

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

.listShadow {
    height: 40px;
}

.listBox {
    padding: 14px;
    border-width: 1px;
    border-radius: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
}

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

.carNum {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 150px;
    margin-bottom: 0;
}

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

.carInfo {
    gap: 10px;
    font-size: 16px;
    width: 100%;

}

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

.listWrap {
    padding: 0;
}


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


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

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

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

}

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

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

.inputCarNum .inputTitle {
    font-size: 22px;
    margin-bottom: 10px;
}

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

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

.inputCarNum input::-webkit-input-placeholder {
    font-size: 26px;
    line-height: 48px;
}

.inputCarNum input::-moz-placeholder {
    font-size: 26px;
    line-height: 48px;
}

.inputCarNum input:-ms-input-placeholder {
    font-size: 26px;
    line-height: 48px;
}

.inputCarNum input::-ms-input-placeholder {
    font-size: 26px;
    line-height: 48px;
}

.inputCarNum input::placeholder {
    font-size: 26px;
    line-height: 48px;
}

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

.mobileArea {
    gap: 6px;
}

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

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

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

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

.mb {
    margin-bottom: 20px;
}

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

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

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

.inputDelete {
    width: 22px;
    right: 16px;
    top: 12px;
}

.inputCarNum .inputBox {
    gap: 14px;
    padding-bottom: 20px;
}

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

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

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

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

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

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

}

.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;
    border-width: 1px;
}

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

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

.reserveTitle {
    font-size: 16px;
    line-height: inherit;
    padding-bottom: 4px;
    top: 0;
    padding-top: 10px;
    margin-bottom: 0;
}

.reserveText {
    overflow: auto;
    max-height: 10vh;
    font-size: 16px;
    line-height: 24px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;

}

.reserveText p {
    padding: 0;
}

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

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

.inputCarCustomer .failWrap,
.inputCarCustomer .successWrap {
    max-width: 500px;
}

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

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

}

.popupTitle {
    border-bottom: solid 1px #D7DBE9;
    font-size: 18px;
    padding: 14px 0;
    border-radius: 20px 20px 0 0;
}

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

}

.popupListArea {
    padding: 10px 10px;
}

.popupAgreeArea {
    padding: 30px;
}

.popupListBox {
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    padding: 20px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
}

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

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

}

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

.popupListTop {
    gap: 20px;
}

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

.listName {
    font-size: 20spx;
}

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

.btnClose {
    font-size: 18px;
    padding: 0 20px;
    height: 34px;
    font-size: 16px;
    border-radius: 20px;
    border: solid 1px #d1d5e1;
    color: #666B77;
}

.dark .btnClose {
    border: solid 1px #d1d5e1;
    color: #d1d5e1;

}

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

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

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

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

}

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

.popupBottom {
    padding-bottom: 40px;
}

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

.checkboxCustom {
    gap: 8px;
}

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

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

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

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

.labelText {
    font-size: 16px;
    line-height: 22px;
    display: inline-block;
}

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

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

.popupAgree {
    font-size: 14px;
}

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

.checkList .subContents.maxWidth {
    max-width: 100%;
    margin-bottom: 30px;
}

.reserveArea {
    max-width: 100%;
    margin: 30px auto 20px auto;
    padding: 16px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);

}

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

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

.listFlex {
    gap: 10px;
}

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

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

.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);
    /* width: 100%; */
    margin-left: -20px;
    left: 0;
    max-width: 100vw;
    gap: 10px;
    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;
}


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

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

.boxCategory .checkboxCustom {
    border-radius: 8px;
    padding: 16px;
    width: calc(33.333333% - 7px);

}

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

.listNameSmall {
    font-size: 20px;
}

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

.textList {
    gap: 6px;

}


.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: 30px;
    min-width: 100px;
}

.endTimerTitle {
    margin-bottom: 20px;
    font-size: 16px;

}

.endTimer {
    margin-top: 40px;
}

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



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

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

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

.btnStay {
    border-radius: 30px;
    height: 34px;
    font-size: 16px;
    border: solid 1px #7BCC12;
    padding: 0 20px;

}

.btnGoHome {
    border-radius: 30px;
    height: 38px;
    font-size: 16px;
    padding: 0 20px;
    border: solid 1px #d1d5e1;
}

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

.popupWrap .timerBox {
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 10px;

}

.row {
    gap: 6px;
}

dotlottie-wc {
    width: 80px;
    margin: 0 auto;
    height: 80px;
    margin-top: 40px;
    margin-bottom: 20px;
    display: inline-block;
}


.endTimerText {
    font-size: 16px;
    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: 1px solid #D7DBE9;
}

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


.labelText p {
    margin: 0 4px;
}

.checkAgree .labelText p {
    /* margin-right: 6px; */
    margin-left: 0;
    white-space: nowrap;
    line-height: inherit;
}

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

.btnSub {
    font-size: 18px;
    min-width: 150px;
    line-height: 60px;
    padding: 0 40px;
    white-space: nowrap;
}

.btnPrev {
    font-size: 26px;
    line-height: 60px;
    border-radius: 40px;
    border: solid 1px #C0CDD8;
    background: none;
    font-size: 18px;
    padding: 0 40px;
    min-width: 150px;
}

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

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

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

.successWrap,
.failWrap {
    border-radius: 6px;
    padding: 16px 16px;
    margin: 0 auto 0 auto;
    width: 100%;

}

.checkList .failWrap .message span {
    margin-bottom: 0;
}

.checkList .failWrap .icon {
    margin-bottom: 0;
}

.messageArea {
    padding-bottom: 0px;
}

.fixedRight {
    margin: 0 auto;
    max-width: 500px;
    width: calc(100% - 40px);
    margin-top: 0;
}

.fixedRight .messageArea {
    margin: 0 auto;
    margin-top: 0;
    width: 100%;
}

.fixedRight.inline {
    width: 100%;
    display: none;
}

.messageArea.alertVisitHpNo .successWrap,
.messageArea.alertVisitHpNo .failWrap {
    margin: 0 auto;
    max-width: 500px;
}

.message span a {
    display: inline;
}

.message span {
    font-size: 16px;
    line-height: 22px;
    gap: 6px;
    margin-bottom: 6px;
    font-weight: 600;
    display: inline-block;
    width: 100%;
}

.popupBtnWrap {
    padding-top: 20px;
}

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

.popupResult {
    padding: 20px 0;
}

.popupResult .message span {
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.4;
}


.popupResult .message {
    font-size: 14px;
    line-height: 1.4;
}


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

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

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

.receiptType {
    border-radius: 40px;
    padding: 0 20px;
    line-height: 38px;
    font-size: 24px;
    margin-bottom: 6px;
    border-width: 1px;
}

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


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

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

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

.selectCategory {
    padding: 0 20px;
    /* padding-bottom: 20px; */
    width: 100%;
}

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

.areaBottom .mainBtnWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
    width: 100%;
    height: 100%;
}

.areaBottom .mainReceipt {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

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

.main .areaTop {
    height: 100%;
    padding: 20px;
    width: 45%;
    max-height: 560px;
}

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

.bannerArea {
    display: none;
}

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

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

.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: 170px;
    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;
    border-radius: 10px;
    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;
    display: none;
    background: -o-linear-gradient(bottom, #F3F5F9 0%, rgba(243, 245, 249, 0) 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#F3F5F9), to(rgba(243, 245, 249, 0)));
    background: linear-gradient(360deg, #F3F5F9 0%, rgba(243, 245, 249, 0) 100%);

}

.bannerName {
    margin: 0 auto;
    padding: 0 20px;
    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: 60px;
    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);
    border: 1px solid rgba(255, 255, 255, 1);
    color: #fff;
    text-align: center;
    font-size: 22px;
}

.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: -o-linear-gradient(bottom, #06141F 0%, #06141f00 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#06141F), to(#06141f00));
    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;
}

.banner.mainTitleBox {
    margin-top: 0;
    width: 100%;
}

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

.subContents {
    margin: 0 auto;
    padding: 0 20px;
}

.inputExample {
    margin: 0 auto;
    margin-bottom: 20px;
    height: 120px;
    border-radius: 10px;
    max-width: 500px;
}

.inputArea {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}

.layerHoken .inputArea {
    max-width: 100%;
}

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

.listTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
}

.reserveArea .carNum {
    font-size: 24px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: auto;
}

.subWait {
    padding: 0;
    padding-top: 20px;
}

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

.carType {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.carNumber {
    font-size: 16px;
}

select:hover {
    border: solid 1px #aeaeb3;
}

::-webkit-scrollbar {
    border-left: solid 1px #D7DBE9;
    width: 6px;
    height: 6px;
    background-color: #D7DBE9;
}

.dark ::-webkit-scrollbar {
    border-left: solid 1px #2A3740;
    width: 6px;
    height: 6px;
    background-color: #06141F;
}

.popupAgreeBg {
    -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);

}

.categoryWrap .boxCategory {
    margin-bottom: 40px;
}

.boxCategory .checkboxCustom {
    -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
}

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

.timerBox {
    -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
}

.checkBox {
    -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
}

.mainBtn {
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1);

}

.mainBtn:hover,
.mainBtn:active {
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}

.cautionText {
    font-size: 16px;
    margin-top: 4px;
}

.main .contentsWrap {
    max-width: 1280px;
}

.contentsWrap.categoryWrap {
    max-width: 1240px;
}

.introImg {
    height: 200px;
    width: 100%;
    margin-bottom: 0px;
}

.introImgFail {
    height: 140px;
    width: 100%;
    margin-bottom: 20px;

}
.introImgBubble {
    height: 140px;
    width: 100%;
    margin-bottom: 20px;

}

.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: 40px;
    line-height: 1;
    display: inline-block;
    font-weight: 600;
    width: 10px;
    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%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;
}

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

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

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

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

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

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

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

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

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

.popupWrap.layerPassAuth {
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
    max-width: 360px;
}

.inputCarCustomer .messageArea {
    max-width: 500px;
    margin: 0 auto;
}

.inputCarNum .inputDelete {
    top: 16px;
}

.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 1px #fff;
}

.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 .labelText {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 12px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

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

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

.bottomBox {
    padding-bottom: 10px;
    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: 10px;
    padding-top: 10px;
}

.inputPopup .btnClose {
    background: none;
    color: inherit;
    height: 46px;
    padding: 0 20px;
    font-size: 16px;
    min-width: 120px;
    border-radius: 30px;
    border: solid 1px #dde0e7;
}

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

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

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

.inputPopup .btnCom {
    background: #7BCC12;
    color: #fff;
    height: 46px;
    font-size: 16px;
    min-width: 120px;
    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;
}

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

/* 251027 */
.infoWrapText {
    font-size: 14px;
    border-radius: 10px;
    background: #dde0e7;
    width: calc(100% - 40px);
    max-width: 400px;
    text-align: center;
    margin: 0 auto;
    padding: 10px;
    color: #666B77;
    margin-top: 10px;
    margin-bottom: 10px;
}

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

.infoWrapText span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.listBoxWrap.already {
    width: 500px;
    margin: 10px 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;
    width: 100%;
    -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;
}

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

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

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

.dark .infoWrapText {
    background: #364651;
}

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


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

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

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

.passTitle span {
    color: #7BCC12;
}

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

.passText span {
    color: #ff2727;
}

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

.passArea {
    text-align: center;
}

.passImg {
    width: 80px;
    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: 10px auto;
    max-width: 500px;
    text-align: left;
}

.timerText {
    color: #666B77;
    font-size: 14px;
    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: 46px;
    -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: 10px;
    border: solid 1px #D7DBE9;
    font-size: 18px;
    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;
}

.popupWrap.layerNotFindCar {
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
    width: 460px;
}
.popupWrap.layerPolicy{
    max-height: 1000px;
}
.popupWrap.layerPolicy .popupAgreeBg{
padding: 10px;
}
.bottomBox {
    padding-bottom: 30px;
    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: 0px;
}

.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: 20px;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}

.inputBox.owner {
    margin-bottom: 20px;
}

.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: 46px;
    -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: 10px;
    border: solid 1px #D7DBE9;
    font-size: 18px;
    cursor: pointer;
}

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

.radioBtn input {
    display: none;
}

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

.radioGroup:has(input:checked) .radioBtn input:not(:checked)+span {
    background: #E4E6EF;
    color: #666B77;
    border: solid 1px #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;
}

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

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

.btnOver {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px) grayscale(100%);
            backdrop-filter: blur(10px) grayscale(100%);
    padding: 20px 0;
    -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;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: default;
}

.dark .btnOver {
    background: rgba(0, 28, 47, 0.3);
}

.overTitle {
    font-size: 30px;
    color: #fff;
    margin-bottom: 30px;
    width: 80%;
    word-break: keep-all;
    white-space: normal;

}

.overTime {
    padding: 30px 30px;
    max-width: 80%;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #fff;
    -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
}

.btnOver {
    display: none;
}

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

.btnOver .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../../img/icon_over.svg) center no-repeat;
    background-size: contain;
    margin-bottom: 10px;
}

.btnOver .time p,
.btnOver .time {
    color: #fff;
    white-space: inherit;
    word-break: keep-all;
    font-size: 20px;
    max-width: 100%;
}

.btnOver .time span {
    color: #fff;
    display: inline-block;
    font-size: 20px;
}

.btnOver .timeLunch {
    width: 100%;
    max-width: 100%;
    color: #fff;
    display: inline-block;
    white-space: inherit;
    word-break: keep-all;
    gap: 4px;
    margin-top: 16px;
}

.brLine {
    display: none;
}

/* 1240 이하일때 : 태블릿 세로*/
@media all and (max-width:1239px) {
    .brLine {
        display: inline-block;
    }
}

/* 999 이하일때 : 태블릿 세로*/
@media all and (max-width:999px) {
    .brLine {
        display: none;
    }

    .bannerGradient {
        display: inline-block;
    }

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

    .bannerImgBox {
        height: 220px;
    }

    .banner .mainTitle p {
        font-size: 22px;
    }

    .receiptType {
        font-size: 18px;
        line-height: 28px;
    }

    .popupResult {
        padding: 0px;
    }

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

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

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

    .bannerWrap {
        border-radius: 0;
    }

    .mainWrap {
        padding-left: 0;
        padding-right: 0;
    }

    .main .areaTop {
        padding: 0;
    }

    .main .areaTop {
        width: 100%;
    }

    .main .areaBottom {
        display: none;
    }

    .mainReceipt {
        padding: 0 20px;
        max-width: 720px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
    }

    .mainBottom {
        padding: 0 20px;
        max-width: 720px;
        padding-bottom: 40px;
        margin-top: 20px;
    }

    .passText {
        font-size: 14px;
    }

    .passImg {
        width: 60px;
    }

    .reserveTitle {
        font-size: 14px;
    }

    .checkList .checkBox {
        margin-bottom: 0;
    }

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

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

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

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

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

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

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

    .hokenWrap {
        margin: 10px 0;
    }

    .subWrap {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-top: 20px;
    }

    .mainTitle {
        font-size: 36px;
        margin-top: 40px;
    }

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

    .inputDelete {
        top: 14px;
    }


    .mainImg {
        max-width: 260px;
    }

    .mainBtn .arrows span {
        font-size: 60px;
        width: 14px;
    }

    .btnViewTerms {
        font-size: 14px;
    }

    .btnViewTerms .icon {
        width: 14px;
    }

    .labelText {
        font-size: 15px;
    }

    .btnGoHome {
        font-size: 16px;
    }

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

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


    .carNum {
        font-size: 22px;
        min-width: 140px;
    }

    .carInfo {
        font-size: 14px;
    }

    .btnTabText {
        font-size: 18px;
    }

    .listBox {
        padding: 14px;
        margin-bottom: 10px;
    }


    .mainListLeft {
        font-size: 22px;
    }



    input {
        padding-right: 40px;
    }

    .popupList {
        padding: 10px;
    }

    .listNameSmall {
        font-size: 18px;
    }

    .messageArea {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .inputDelete {
        width: 18px;
    }

    .boxCategory .checkboxCustom {
        padding: 10px;
    }

    .hokenWrap {
        padding: 10px;
        margin-bottom: 0;
        font-size: 14px;
    }

    .reserveArea .carNum {
        font-size: 24px;
    }

    .reserveText {
        font-size: 16px;
    }

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

    .pageTimeline {
        padding-bottom: 20px;
    }


    .reserveArea {
        margin-top: 20px;
    }


    .inputExample {
        height: 100px;
    }

    .cautionText {
        font-size: 16px;
    }

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

    .reserveText p {
        padding: 2px 0;
    }

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

    .reserveText {
        max-height: 10vh;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        font-size: 14px;
    }

    .subText .blueText {
        font-size: inherit
    }

    .headerWrap {
        padding: 0 20px;
    }

    .infoCall {
        margin-left: 10px;
    }

    .headerService {
        gap: 6px;
    }

    .serviceBtn {
        font-size: 14px;
    }



    .inputMessage {
        font-size: 14px;
    }

    .reserveList .inputTitle {
        font-size: 14px;
        padding-bottom: 0;
    }

    .btnOver .time span {
        font-size: 16px;
    }

    .btnOver .time p,
    .btnOver .time {
        font-size: 16px;
    }

    .overTime {
        padding: 20px;
        border-radius: 10px;
    }

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

    .btnOver .icon {
        width: 32px;
        height: 32px;
    }

}

/* 999 이하이면서 가로화면일때 : 태블릿 가로 */
@media all and (max-width:1240px) and (aspect-ratio: 4/3) {
    .btnMainList {
        font-size: 24px;
        padding: 14px 0;
    }

    .bannerImgBox {
        height: 180px;
    }

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

    .mainTitle {
        font-size: 26px;
    }

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

    .banner .mainTitle p {
        font-size: 22px;
    }

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

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

    .inputExample {
        height: 60px;
    }


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

    .pageTimeline {
        padding-bottom: 30px;
    }



    .mainBtn .arrows span {
        font-size: 40px;
        width: 10px;
    }

    .reserveText {
        max-height: 13vh;
    }



    .mainBtnWrap .mainBtn {
        padding-top: 20px;
        padding-bottom: 20px;
    }


    .reserveArea {
        margin-top: 20px;
    }



    .carNum {
        font-size: 22px;
    }

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

    .mb {
        margin-bottom: 20px;
    }

    .reserveText {
        font-size: 14px;
        line-height: 1.5;
    }

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

}

/* 700 이하일때*/
@media all and (max-width:700px) {
    .overTitle {
        font-size: 20px;
    }

    .btnOver .icon {
        width: 22px;
        height: 22px;
    }

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

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

    .passArea .failWrap {
        text-align: center;
    }

    .subBtn {
        padding-bottom: 20px;
    }

    .mb {
        margin-bottom: 10px;
    }

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


    .inputTitle {
        min-width: 50px;
        font-size: 14px;
    }

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

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

    .pageLine {
        height: 1px;
    }

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

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

    .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;
        margin: 0 auto;
    }

    .fixedRight {
        text-align: center;
    }

    .introImgFail {
        height: 80px;
        margin-bottom: 20px;
    }
    .introImgBubble {
        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;
    }

    .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 0px 20px 0px;
        min-width: 300px;

    }

    .mainWrap {
        padding-top: 60px;
    }

    .mainTitle {
        font-size: 30px;
    }

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



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

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

    .mainBottom {
        max-width: 700px;
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 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;
        line-height: 36px;
        gap: 4px;
    }

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

    .btnViewList .icon {
        width: 12px;
        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;
    }

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

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

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

    .waitingTab {
        gap: 12px;
    }

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

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

    .carInfo {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        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: 10px;
    }

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

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


    .scrollBox {
        padding: 0 10px;
    }

    .waitingList .scrollBox {
        padding: 0;
    }


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


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


    .inputDelete {
        right: 16px;
        top: 14px;
    }

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

    .inputCarCustomer .inputBox {
        gap: 10px;
    }

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

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

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

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

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

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

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

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

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

    .popupWrap.layerNotFind {
        height: auto;
    }

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

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

    .layerHoken .popupList {
        padding: 0 10px;
    }

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

    }

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

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

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

    .layerNotFind .popupResult {
        padding: 10px 0;
    }

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

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

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

    .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 20px auto;
        padding: 16px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 4px 10px rgba(0, 22, 54, 0.1);
        box-shadow: 0px 4px 10px 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: 14px;
        line-height: 1.5;
        max-height: 60px;
        overflow: auto;
        max-height: 80px;
    }

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

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

    .popupListBottom {
        text-align: left;
    }


    .boxCategory {
        gap: 12px;
    }

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

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

    }

    .boxCategory .labelText {
        font-size: 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: 12px;
    }

    .textList {
        gap: 6px;
    }

    .dotlottie {
        max-height: 300px;
    }

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


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

    .endTimerTitle {
        margin-bottom: 20px;
        font-size: 18px;

    }

    .endTimer {
        margin-top: 30px;
    }


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

    .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;
        height: 36px;
        border-width: 1px;
        padding: 0 20px;
        font-size: 16px;

    }

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

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

    }

    .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 {
        padding: 0 30px;
        line-height: 50px;
        min-width: 120px;
    }

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

    .successWrap,
    .failWrap {
        /*max-width: 500px;*/
        margin: 0 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;
        padding: 14px 14px;
    }

    .mainBottom {
        padding-top: 10px;
    }

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

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


    .message span {
        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: 100%;
        margin: auto;
        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;
    }


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

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

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

    .btnClose {
        font-size: 16px;
    }

    .mainBtn .arrows span {
        font-size: 30px;
        width: 8px;
    }
.success .subTitle{
    font-size: 30px;
    margin-bottom: 20px;
}
.success .subTitle span{
    font-size: 30px;
}
    .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;
    }

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

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

    .reserveList .reserveBox {
        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-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .reserveList .reserveText p {
        padding-top: 10px;
        font-size: 14px;
        padding-bottom: 0px;
    }
}

/* 512 이하일때 : 모바일*/
@media all and (max-width:512px) {
    .checkList .subContents.maxWidth {
        margin-bottom: 0px;
    }

    .banner .mainTitle p {
        font-size: 16px;
    }

    .inputText {
        padding: 0 14px;
    }

    .reserveList .inputTitle {
        padding-top: 10px;
    }
/* 
    .subWrap {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    } */

    .boxCategory .checkboxCustom {
        width: 100%;
    }

    .inputPopup select {
        font-size: 16px;
    }

    .inputPopup .btnClose {
        min-width: 100px;
    }

    .inputPopup .btnCom {
        min-width: 100px;
    }

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


    .waitingWrap {
        margin-top: 10px;
        padding-bottom: 0;
    }

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

    .checkList .checkBox {
        padding: 0 14px;
    }

    .reserveArea {
        padding: 14px;
    }

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

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

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

    .bodyWrap {
        padding-top: 20px;
        min-width: 280px;
        padding-top: 50px;
    }

    .inputCarNum .inputBox {
        padding-bottom: 0;
    }

    .intro {
        padding-bottom: 40px;
    }

    .carNum {
        font-size: 20px;
        width: 100%;
    }

    .cautionText {
        font-size: 14px;
    }

    .checkList .reserveTitle {
        padding-top: 10px;

    }

    .reserveText {
        max-height: 100px;
    }


    .contentsWrap {
        max-width: 100%;
    }

    .layerSelectCar .popupListCar {
        text-align: left;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;

    }

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

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

    .carInfo {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 4px;
        width: 100%;
        white-space: nowrap;
    }

    .headerClock {
        gap: 6px;
    }

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

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

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

    .listReserve {
        margin-top: 10px;
        gap: 8px;
    }


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

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

    .popupListBottom {
        text-align: left;
    }

    .mainBtnWrap {
        gap: 10px;
    }

    .inputExample {
        height: 80px;
    }

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


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


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

    .popupListBox {
        padding: 14px;
    }

    .listNameSmall {
        font-size: 16px;
    }

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

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

    .btnTabText {
        font-size: 16px;
    }

    .carNumber {
        font-size: 14px;
    }

    .mainWrap {
        padding-top: 60px;
    }

    .mainTitle {
        font-size: 24px;
    }

    .mainText {
        font-size: 16px;
    }

    .headerText {
        font-size: 18px;
    }

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


    .btnListChoice {
        padding: 0 14px;
        font-size: 16px;
    }

    .receiptType {
        font-size: 14px;
        line-height: 22px;
        padding: 0 14px;
    }

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

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



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

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

    .radioBtn span,
    .inputText {
        font-size: 16px;
    }

    input {
        line-height: 44px;
        font-size: 16px;
        padding-left: 14px;
    }

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

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

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

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

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

    .popupBottom {
        padding-bottom: 40px;
    }

    .popupWrap {
        height: 90%;
        max-width: 90%;
        width: 100%;
        min-width: 280px;
        max-height: 460px;
    }

    .popupResult {
        padding-bottom: 10px;
    }

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

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

    .btnViewTerms {
        font-size: 12px;
    }

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

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

    .btnSub,
    .btnPrev {
        line-height: 50px;
        min-width: 120px;
    }

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

    .bannerImgBox {
        height: 150px;
    }

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

    .btnMainListSub .btnTitle {
        min-width: 90px;
        margin-bottom: 0;
        font-size: 14px;
    }

    .btnMainList {
        padding-top: 14px;
        padding-bottom: 14px;
    }

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

    .mainListSub .btnText p {
        font-size: 14px;
        line-height: 26px;
    }

    .mainListSub .btnText {
        gap: 4px;
    }

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

    .popupListCar {
        font-size: 14px;
    }

    .boxCategory .checkboxCustom {
        padding: 10px;
    }

    .popupAgreeArea {
        padding: 20px;
    }


    .message {
        font-size: 14px;
    }

    .successWrap,
    .failWrap {
        gap: 0px;
        margin: 0px 0;
        padding: 14px 14px;
        gap: 4px;
        border-radius: 10px;
    }


    .successWrap .icon,
    .failWrap .icon {
        margin-right: 0;
    }

    .subText .blueText {
        font-size: 15px;
    }

    dotlottie-wc {
        width: 60px;
        height: 60px;
        margin-top: 20px;
        margin-bottom: 10px;
    }


    .timerBox {
        margin-bottom: 0;
    }

    .areaTop .btnGoHome {
        margin-right: 0;
    }

    .reserveText {
        font-size: 14px;
        line-height: 1.5;
    }

    .introImgFail {
        height: 80px;
    }
    .introImgBubble {
        height: 80px;
    }

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

    .subTitleName {
        font-size: 16px;
        line-height: 26px;
    }

    .time {
        font-size: 16px;
    }

    .setTimeTitle {
        font-size: 16px;
    }

    .introImg {
        height: 160px;
    }

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

    .btnViewList {
        font-size: 14px;
        height: 30px;
        line-height: 30px;
    }

    .btnViewList .icon {
        width: 12px;
        height: 20px;
    }

    .mainListLeft {
        font-size: 20px;
    }

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

    .popupListTop {
        gap: 10px;
    }

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

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

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

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

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

    .btnOver {
        padding: 10px 0;
    }

    .overTitle {
        font-size: 16px;
    }

    .overTime {
        padding: 10px;
    }

    .btnOver .time span {
        font-size: 14px;
    }

    .btnOver .time p,
    .btnOver .time {
        font-size: 14px;
    }

    .btnOver .timeLunch {
        margin-top: 6px;
    }

    .brLine {
        display: inline-block;
    }

    .btnOver .icon {
        width: 18px;
        height: 18px;
        margin-bottom: 6px;
    }
}

/* 374이하일때 */
@media all and (max-width:373px) {
    .success .subTitle{
    font-size: 26px;
    margin-bottom: 20px;
}
.success .subTitle span{
    font-size: 26px;
}
    .inputCarCustomer .labelText {
        font-size: 12px;
        line-height: 1.4;
    }

    .banner .mainTitle p {
        font-size: 14px;
    }

    .btnOver .time span {
        font-size: 10px;
    }

    .btnOver .time p,
    .btnOver .time {
        font-size: 10px;
    }

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

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

    .mainListLeft {
        font-size: 16px;
    }

    .btnViewList {
        font-size: 14px;
        padding: 0 14px;
    }

    .btnMainList {
        padding-bottom: 14px;
    }

    .btnViewList .icon {
        width: 12px;
        height: 20px;
    }

    .labelText {
        font-size: 14px;
    }

    .btnViewTerms {
        font-size: 12px;
    }

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

    .mainTitle {
        font-size: 20px;
    }

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

    .carInfo {
        gap: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .layerType .popupListTop {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

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

    .popupListBottom {
        text-align: center;
    }

    .logoWrap {
        width: 100px;
    }

}