html,body{height: 100%;width: 100%;margin: 0;font-family: Pretendard;}
p,h3,h4,h5,ul{margin: 0;padding: 0;}
ul{list-style-type: none}
a{color: #000000;text-decoration: none;}
a.link{text-decoration: underline;text-underline-position : under;}
li{list-style-type: none;}
.d-none{display: none !important;}
em{font-style: normal;}
.colorRed{color: #ff0000 !important;}
.noScroll{overflow: hidden !important;}
.text-conter{text-align: center;}

/* print */
@media print{
    .printDiv{display: block !important}
    .insOder{display: none !important;}
    .oderList{display: none;}
    .topDiv{display: none;}
    .divKakaoTalkChat{display: none;}
    .printDiv > div > p{padding: 20px 7px;}
    @page {
      margin-top: 0;
      margin-bottom: 0;
    }
    thead { display: none; }
    tfoot { display: none; }
}

/* loding bar */
.loadingBox .dim {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.2);}
.loadingBox .circle {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:40px; height:40px; border:3px solid #fff; border-top:3px solid #02B763; border-radius:50em; transition:all .2s;animation-name:spinCircle;animation-duration:.8s;animation-iteration-count:infinite;animation-timing-function:linear;}
img.loadingBar {transform: translate(-50%, -50%);width: 40px;transition: all 0.2s;animation-name: spinCircle;animation-duration: 1.5s;animation-iteration-count: infinite;animation-timing-function: linear;}
@keyframes spinCircle {
    from {transform:translate(-50%, -50%) rotate(0);}
    to {transform:translate(-50%, -50%) rotate(360deg);}
}

/* button */
button{cursor: pointer;}
button.btn{border-radius: 1000px;font-weight: 700;font-size: 16px;line-height: 24px;text-align: center;letter-spacing: -0.02em;color: #FFFFFF;border: none;height: 56px;width: 100%;}
button.green{background: #02B763;box-shadow: 0px 4px 16px rgba(0, 206, 110, 0.2);}
button.navy{background: #4D5980;}
button.gray{background: #A7ADBF;}
button.iconText{position: absolute;width: 70px;background: #717A99;border-radius: 100px;font-weight: 500;font-size: 12px;line-height: 20px;text-align: center;letter-spacing: -0.02em;color: #FFFFFF;height: 36px;display: flex;align-items: center;justify-content: center;top: 10px;right: 90px;box-shadow: none;}
button.iconText img{padding-right: 4px;}
button.iconText.green{background: #02B763;right: 16px;}
button.icon{background: #F4F6FB;border-radius: 8px;width: 28px;height: 28px;border: none;}
button.icon img{width: 16px;height: 16px;}
button.btnImg{border: none;background: none;padding: 0;}

/* 로그인 */
.content-login{width: 100%;height: 100%;background-image: url("/static/images/bg/bgLogin.svg");background-position: 50% 50%;background-repeat: no-repeat;position: absolute;}
.content-login > div{background: #FFFFFF;box-shadow: 0px 8px 32px rgba(77, 89, 128, 0.1);border-radius: 32px;width: 292px;margin: 0 auto;transform: translateY(-50%);top: 50%;position: relative;padding: 32px;}
.content-login > div .logo{text-align: right;padding: 8px 8px 0 0;}
.content-login > div h3{font-weight: 700;font-size: 24px;line-height: 32px;letter-spacing: -0.02em;color: #363A44;padding-top: 61px;}
.content-login > div p{font-weight: 500;font-size: 14px;line-height: 22px;letter-spacing: -0.02em;color: #787E91;padding-top: 8px;}
.content-login > div .idDiv{margin-top: 32px;background: #F8F9FC;border-radius: 100px;height: 56px;display: flex;align-items: center;}
.content-login > div .idDiv img{padding: 0 16px 0 24px;}
.content-login > div .idDiv input{font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;color: #363A44;border: none;outline: none;background: transparent;}
.content-login > div .idDiv input::placeholder{color: #A7ADBF;}
.content-login > div .pwDiv{margin: 8px 0 24px;background: #F8F9FC;border-radius: 100px;height: 56px;display: flex;align-items: center;}
.content-login > div .pwDiv img{padding: 0 16px 0 24px;}
.content-login > div .pwDiv input{font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;color: #363A44;border: none;outline: none;background: transparent;}
.content-login > div .pwDiv input::placeholder{color: #A7ADBF;}
.content-login > div .smsDiv{margin: 0 0 24px;background: #F8F9FC;border-radius: 100px;height: 56px;display: flex;align-items: center;padding-left: 20px;}
.content-login > div .smsDiv input{font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;color: #363A44;border: none;outline: none;background: transparent;}
.content-login > div .smsDiv input::placeholder{color: #A7ADBF;}
/* 로그인 - 모바일 */
.body-m .content-login{background-size: 220%;}

/* 로그인 - 비밀번호 변경 모달 */
.pwdChgModal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:5;justify-content:center;align-items:center;}
.pwdChgModal > div{background:#FFFFFF;box-shadow:0px 8px 32px rgba(77,89,128,0.1);border-radius:32px;padding:32px;width:500px;box-sizing:border-box;}
.pwdChgModal > div h3{font-weight:700;font-size:18px;line-height:26px;letter-spacing:-0.02em;color:#363A44;padding-top:0;margin-bottom:12px;}
.pwdChgModal > div .pwdChgNotice{font-weight:500;font-size:13px;line-height:1.6;letter-spacing:-0.02em;color:#FF8718;background:#FFF6EE;border:1px solid #FFC38B;border-radius:12px;padding:10px 14px;margin-bottom:20px;}
.pwdChgModal > div .pwdChgNotice strong{font-weight:700;}
.pwdChgModal .pwdDiv{margin:0 0 12px;background:#F8F9FC;border-radius:100px;height:56px;display:flex;align-items:center;padding-left:20px;}
.pwdChgModal .pwdDiv input{font-weight:500;font-size:16px;line-height:24px;letter-spacing:-0.02em;color:#363A44;border:none;outline:none;background:transparent;width:100%;}
.pwdChgModal .pwdDiv input::placeholder{color:#A7ADBF;}
.pwdChgModal .pwdDiv:last-of-type{margin-bottom:24px;}
.body-m .pwdChgModal > div{width:100%;height:100%;border-radius:0;}
.pwdChgModal .btnRow{display:flex;gap:8px;}
.pwdChgModal .btnRow button.btn{flex:1;}
.body-m .pwdChgModal .btnRow{flex-direction:column;}

/* alert / confirm */
.alertPopup{background-color: rgba(0, 0, 0, 0.15);position: fixed;z-index: 10;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;top: 0;left: 0;}
/*.alertPopup > div > div{width: 280px;background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 32px;padding: 32px 16px 16px;transition: 0.2s all;transform: scale(0.8);a}*/
.alertPopup > div > div{width: 280px;background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 32px;padding: 32px 16px 16px;transition: 0.2s all;animation-duration: 0.2s;opacity: 0;animation-fill-mode: forwards;}
/*.alertPopup.show > div > div{transform: scale(1);}*/
.alertPopup.show > div > div{animation-name: aniAertShow;}
.alertPopup.hide > div > div{animation-name: aniAertHide;}
/*.alertPopup.hide > div > div{opacity: 0.5;}*/
.alertPopup > div > div > span{font-weight: 700;font-size: 20px;line-height: 28px;text-align: center;color: #363A44;display: block;}
.alertPopup > div > div > p{font-weight: 500;font-size: 14px;line-height: 22px;text-align: center;color: #787E91;padding: 4px 0 32px;}
.alertPopup > div > div > button{height: 48px;box-shadow: none;}
.confirmPopup > div > div > div{display: flex;}
.confirmPopup > div > div > div button{height: 48px;box-shadow: none;flex: 1;}
.confirmPopup > div > div > div button:first-child{width: 112px;margin-right: 8px;flex: none;}
@keyframes aniAertShow {
    0%{opacity: 1;transform: scale(0.8);}
    100%{transform: scale(1);opacity: 1;}
}
@keyframes aniAertHide {
    0%{opacity: 1;transform: scale(1);}
    100%{transform: scale(0.8);opacity: 0;}
}

/* top */
.topDiv > div{display: flex;height: 40px;align-items: center;padding: 0 16px;border-bottom: 1px solid #F0F2F9;}
.topDiv > div .cstHome + span{position: relative;top: -1px;}
.topDiv > div .menuDiv{position: relative;flex: 1;text-align: center;display: flex;justify-content: center;}
.topDiv > div .menuDiv ul li{float: left;display: flex;align-items: center;height: 40px;margin: 0 8px;align-items: center;justify-content: center;}
.topDiv > div .menuDiv ul li.on{border-bottom: solid 2px #22242A;}
.topDiv > div .menuDiv ul li a{width: 80px;font-weight: 700;font-size: 13px;line-height: 22px;text-align: center;letter-spacing: -0.02em;color: #22242B;display: inline-block;position: relative;}
.topDiv > div .ramtDiv{background: #F2FCF7;border: 1px solid #D9F8EA;border-radius: 100px;display: flex;align-items: center;padding: 2px 12px 2px 4px;position: relative;}
.topDiv > div .ramtDiv span{font-weight: 700;font-size: 12px;line-height: 21px;text-align: center;letter-spacing: -0.02em;color: #00AB5B;display: inline-block;padding-left: 4px;}
.topDiv > div .ramtDiv > div{background: #363A44;box-shadow: 0px 8px 8px -4px rgba(34, 36, 42, 0.15);border-radius: 4px;font-weight: 600;font-size: 12px;line-height: 20px;display: flex;align-items: center;text-align: center;color: #FFAB5E;position: absolute;padding: 4px 10px;top: 40px;width: 80px;left: 50%;transform: translateX(-50%);}
.topDiv > div .ramtDiv > div:after{content: '';position: absolute;width: 10px;height: 10px;background: #363A44;top: -5px;left: 50%;transform: translateX(-50%) rotateZ(45deg);}
/* PWA 앱 다운로드 버튼 */
.topDiv > div .pwaInstallBtn{background: none;border: 1px solid #02B763;border-radius: 4px;padding: 2px 4px;margin-left: 12px;cursor: pointer;display: flex;align-items: center;justify-content: center;height: 26px;width: 26px;}
.topDiv > div .pwaInstallBtn:hover{background: #F2FCF7;}
.topDiv > div .pwaInstallBtn img{width: 16px;height: 16px;}
.topDiv > div .logout{margin-left: 16px;cursor: pointer;}
@media (max-width: 750px) {

    .topDiv > div .menuDiv ul li{width: 70px;}
}@media (max-width: 695px) {

    .topDiv > div .menuDiv ul li{width: 55px;}
}

/* top - mobile*/
.body-m .topDiv{position: sticky;top: 0;background-color: #FFFFFF;z-index: 1;}
.body-m .topDiv > div{height: 98px;display: block;padding: 0;}
.body-m .topDiv.cst > div{height: 50px;}
.body-m .topDiv > div .logoDiv{display: flex;padding: 17px 20px 13px;}
.body-m .topDiv > div .logoDiv .logo{flex: 1;display: flex;align-items: center;}
.body-m .topDiv > div .logoDiv .logo > span{position: relative;top: -1px;}
.body-m .topDiv > div .menuDiv{display: block;}
.body-m .topDiv > div .menuDiv ul{display: flex;padding: 0 8px;}
.body-m .topDiv > div .menuDiv ul li{float: none;flex: 1;margin: 0;}
.body-m .topDiv > div .ramtDiv > div{top: 0;left: -65px;}
.body-m .topDiv > div .ramtDiv > div:after{top: 9px;left: calc(100% - 5px);transform: rotateZ(45deg);}
/* PWA 앱 다운로드 버튼 — 모바일 */
.body-m .topDiv > div .pwaInstallBtn{margin-left: 8px;height: 24px;width: 24px;padding: 2px;}
.body-m .topDiv > div .pwaInstallBtn img{width: 14px;height: 14px;}
.body-m .topDiv > div .logout{margin-left: 12px;}

/* input */
.inputSpan,.dateSpan{position: relative;width: 100%;}
.inputSpan input[type=text],.dateSpan input[type=text],.inputSpan input[type=tel],.inputSpan input[type=password]{background: #FFFFFF;border-radius: 8px;font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #363A44;padding: 8px 36px 8px 16px;border: 1px solid #DFE4F1;width: calc(100% - 54px);}
.inputSpan input[type=text]:disabled,.inputSpan input[type=tel]:disabled{background: #F8F9FC;}
.inputSpan input[type=text]:focus,.inputSpan input[type=tel]:focus{outline: none;}
.inputSpan input[type=text]::placeholder .inputSpan input[type=tel]::placeholder{color: #A7ADBF;}
.dateSpan input[type=text] + i{background-image: url("/static/images/icon/iconCalendar.svg");background-size: 16px 16px;width: 16px;height: 16px;position: absolute;right: 15px;transform: translateY(-50%);top: 50%;}
.inputSpan input[type=text]:not(:placeholder-shown) + i, .inputSpan input[type=tel]:not(:placeholder-shown) + i{background-image: url("/static/images/icon/iconInputClear.svg");background-size: 30px 30px;width: 30px;height: 30px;position: absolute;right: 4px;transform: translateY(-50%);top: 50%;}
.inputSpan input[type=text]:read-only + i, .inputSpan input[type=tel]:read-only + i{display: none;}
@media (max-height: 716px) {

    /* PC */
    .inputSpan input[type=text], .inputSpan input[type=tel]{font-size: 11px;padding: 5px 36px 5px 10px;}
    .inputSpan input[type=text]:not(:placeholder-shown) + i, .inputSpan input[type=tel]:not(:placeholder-shown) + i{background-size: 20px 20px;background-repeat: no-repeat;width: 20px;height: 20px;right: 12px;}

    /* 모바일 */
    .body-m .inputSpan input[type=text], .body-m .inputSpan input[type=tel]{font-size: 12px;padding: 8px 36px 8px 16px;}
}

/* input - 모바일*/
.body-m .inputSpan input[type=text]:not(:placeholder-shown) + i, .body-m .inputSpan input[type=tel]:not(:placeholder-shown) + i{background-image: url("/static/images/icon/iconInputClear.svg");background-size: 20px 20px;width: 20px;height: 20px;position: absolute;right: 10px;transform: translateY(-50%);top: 50%;}

/* checkbox */
.checkbox{display: flex;align-items: center;padding-right: 16px;}
.checkbox label{display: flex;align-items: center;cursor: pointer;}
.checkbox label input[type=checkbox]{display: none;}
.checkbox label input[type=checkbox] + i{background: url("/static/images/icon/iconCheckboxOff.svg") no-repeat center;background-size: 24px 24px;width: 24px;height: 24px;display: inline-block;padding-right: 12px;background-position-x: 0;}
.checkbox label input[type=checkbox]:checked + i{background-image: url("/static/images/icon/iconCheckboxOn.svg");}

/* radio */
.radiobox{display: flex;align-items: center;padding-right: 16px;}
.radiobox label{display: flex;align-items: center;cursor: pointer;}
.radiobox label input[type=radio]{display: none;}
.radiobox label input[type=radio] + i{background: url("/static/images/icon/iconRadioOff.svg") no-repeat center;background-size: 24px 24px;width: 24px;height: 24px;display: inline-block;padding-right: 12px;background-position-x: 0;}
.radiobox label input[type=radio]:checked + i{background-image: url("/static/images/icon/iconRadioOn.svg");}

/* select */

select{background: #FFFFFF;border-radius: 8px;font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #363A44;padding: 8px 28px 8px 16px;border: 1px solid #DFE4F1;height: 36px;  -webkit-appearance:none;-moz-appearance:none;appearance:none;background-image: url("/static/images/icon/iconArrow.svg");background-size: 12px 12px;background-repeat: no-repeat;background-position: calc(100% - 16px) center;}
@media (max-height: 716px) {

    /* PC */
    select{font-size: 11px;padding: 0px 10px;height: 32px;}

}
/* 모바일 */
.body-m select{font-size: 12px;height: 36px;background-position: calc(100% - 11px) center;}

/* datepicker */
.ui-datepicker{width: 320px;border-radius: 20px;left: calc(50% - 164px) !important;top: 50% !important;transform: translateY(-50%);}
.ui-datepicker .ui-datepicker-header{background: none;border: none;padding-top: 10px;}
.ui-datepicker thead th:first-child, .ui-datepicker tbody td:first-child > a {color: #eb4f5d;}
.ui-datepicker thead th:last-child, .ui-datepicker tbody td:last-child > a {color: #5a6ef6;}
.ui-datepicker td a, .ui-datepicker td span{width: 36px;margin: 0 auto;background-color: #FFFFFF !important;border: none !important;padding: 10px 0;text-align: center;}
.ui-datepicker select.ui-datepicker-year{width: 44%;margin-right: 1%;}
.ui-datepicker select.ui-datepicker-month{width: 44%;margin-left: 1%;}
.ui-datepicker .ui-datepicker-today a{background: #d1d1d1 !important;color: #fff !important;border-radius: 50%;}
.ui-datepicker td.ui-datepicker-current-day a{background: #02B763 !important;color: #fff !important;border-radius: 50%;}
.ui-datepicker .ui-datepicker-prev{top: 13px;left: 10px;}
.ui-datepicker .ui-datepicker-prev span{background-image: url("/static/images/icon/iconArrowLeft.svg");background-position: 0px;top: 53%;left: 50%;}
.ui-datepicker .ui-datepicker-next{top: 13px;right: 10px;}
.ui-datepicker .ui-datepicker-next span{background-image: url("/static/images/icon/iconArrowRight.svg");background-position: 0px;top: 53%;left: 50%;}
.dimm{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2);}

/* search top */
.searchTopDiv{position: relative;width: 720px;height: 56px;margin: 16px auto 16px;background: #F4F6FB;border-radius: 100px;}
.searchTopDiv > div{text-align: center;padding-top: 10px;}
.searchTopDiv > div .dateSpan input,.searchTopDiv > div .inputSpan input{border: none !important;width: 128px !important;}
.searchTopDiv > div .dateSpan + .dateSpan{padding-left: 10px;}
.searchTopDiv .dateSpan input[type=text]:read-only + i, .searchTopDiv .dateSpan input[type=tel]:read-only + i{display: block;}

/* search top - mobile */
.body-m .searchTopDiv{width: 100%;}
.body-m .searchTopDiv > div .inputSpan input{width: 70px !important;}

/* table */
.tableDiv table{margin: 0 auto; border-spacing: 0;border: 1px solid #DFE4F1;border-radius: 16px;width: 728.2px;table-layout: fixed;}
.tableDiv table thead tr th{background: #F8F9FC;height: 36px;font-weight: 500;font-size: 11px;line-height: 19px;text-align: center;letter-spacing: -0.02em;color: #787E91;}
.tableDiv table thead tr th:first-child{border-top-left-radius: 16px;}
.tableDiv table thead tr th:last-child{border-top-right-radius: 16px;}
.tableDiv table tbody tr td{padding: 12px 0;font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #535867;border-bottom: 1px solid #DFE4F1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.tableDiv table tbody tr td.one{padding: 140px 0;font-size: 16px;text-align: center;cursor: default;}
.tableDiv table tbody tr td a{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #535867;}
.tableDiv table tbody tr:last-child td{border-bottom: none;}
.tableDiv table tbody tr td.center{text-align: center}
.tableDiv table tbody tr td.right{text-align: right}
.tableDiv table tbody tr td button + button{margin-left: 5px;}

/* table - mobile*/
.body-m .tableDiv table{width: 100%;border-radius: 0;}
.body-m .tableDiv table thead tr th:first-child{border-radius: 0;}
.body-m .tableDiv table thead tr th:last-child{border-radius: 0;}

/* paging */
.paging{text-align: center;position: relative;padding-top: 20px;max-width: 800px;margin: 0 auto;}
.paging > div{display: inline-flex;align-items: center;justify-content: center;border-radius: 100px;border: 1px solid #C8CFE2;background: #FFFFFF;width: 240px;margin: 0 auto;padding: 3px 0;}
.paging > div > span{font-weight: 500;font-size: 12px;line-height: 20px;text-align: center;letter-spacing: -0.02em;color: #363A44;background: #F8F9FC;border-radius: 100px;padding: 10px 28px;}
.paging > div > a{width: 100%;}
.paging > div > a > img{padding: 10px 0;}
.paging > button{width: 120px;height: 48px;position: absolute;right: 39px;top: 20px;}

/* form */
form > ul > li{padding-bottom: 16px;}
form > ul > li label{font-weight: 500;font-size: 11px;line-height: 19px;letter-spacing: -0.02em;color: #787E91;padding-bottom: 4px;display: block;position: relative;}
form > ul > li label em{color: #00AB5B;font-size: 10px;position: absolute;right: 0;}
form > ul > li > div{display: flex;}
form > ul > li > div.half > div{flex: 1;}
form > ul > li > div.half > div:last-child{padding-left: 8px;}
form > ul > li > div .inputSpan + .inputSpan{padding-left: 8px;}
form > ul > li > div + div{padding-top: 8px;}
form > ul > li > div.addr{position: relative;}
form > ul > li > div.addr img{position: absolute;width: 12px;height: 12px;top: 12px;right: 12px;}
form > ul > li > div.addrDtpt .inputSpan:first-child{width: 120px;}
form > ul > li > div.addrDtpt .inputSpan:first-child input{width: calc(100% - 32px);padding: 8px 16px;}
form > ul > li > div .ldtnDiv{display: flex;}
ul.list > li{padding: 8px 0;display: flex;align-items: center;border-bottom: 1px solid #F8F9FC;}
ul.list > li:last-child{border-bottom: none;}
ul.list > li label{font-weight: 500;font-size: 14px;line-height: 20px;letter-spacing: -0.02em;color: #787E91;width: 64px;padding-right: 24px;}
ul.list > li p{flex: 1;font-weight: 500;font-size: 16px;line-height: 24px;color: #363A44;}
@media (max-height: 716px) {

    /* PC */
    form > ul > li{padding-bottom: 10px;}
    form > ul > li label{font-size: 10px;}
    form > ul > li > div.addrDtpt .inputSpan:first-child input{padding: 5px 22px 5px 10px;}

    /* 모바일 */
    .body-m form > ul > li{padding-bottom: 16px;}
    .body-m form > ul > li label{font-size: 12px;}
    .body-m form > ul > li > div.addrDtpt .inputSpan:first-child input{padding: 8px 16px;}
}

/* 고객입력 */
.insCst{width: 478px;margin: 0 auto;}
.insCst h3{font-weight: 700;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;color: #22242B;padding: 30px 0;position: relative;}
.insCst h3 button{position: absolute;right: 0;top: 25px;}
.insCst .buttonDiv{position: fixed;bottom: 24px;width: 100%;text-align: center;height: 48px;left: 0;}
.insCst .buttonDiv button{height: 48px;}

.body-m .insCst{width: calc(100% - 40px);margin: 0 20px;}

/* 레이어 팝업 */
.layerPopup{position: fixed;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2);top: 0;left: 0;display: none;}
.layerPopup.show{display: block;z-index: 1;}
.layerPopup > div{width: 700px;background-color: #FFFFFF;margin: 10px auto 0;padding: 0 34px 16px;border-radius: 20px;transition: 0.2s all;animation-duration: 0.2s;opacity: 0;top: 50%;position: relative;transform: translateY(100%);position: relative;max-height: 720px;overflow: auto;}
.layerPopup.show > div.show{transform: translateY(-50%);opacity: 1;}
.layerPopup .headerDiv{display: flex;align-items: center;height: 40px;padding: 16px 0;position: sticky;top: 0;z-index: 1;background-color: #FFFFFF;}
.layerPopup .headerDiv h3{flex: 1;font-weight: 700;font-size: 16px;line-height: 24px;color: #363A44;}

/*  레이어 팝업 - mobile*/
.body-m .layerPopup > div{width: calc(100% - 40px);height: 100%;max-height: 100%;border-radius: 0;padding: 0 20px 0;margin-top: 0;}

/* 주소 검색 팝업 */
.ppAddrSerc .closeDiv{text-align: right;padding-bottom: 10px;}
.ppAddrSerc .closeDiv button{width: 40px;height: 40px;}
.ppAddrSerc .closeDiv button img{padding-top: 6px;width: 18px;}
.ppAddrSerc .searchTopDiv{width: 100%;margin-top: 0;}
.ppAddrSerc .searchTopDiv > div .inputSpan input{width: 200px !important;}
.ppAddrSerc .tableDiv{height: 357px;}
.ppAddrSerc .tableDiv table{width: 100%;}
.ppAddrSerc .tableDiv table td{padding: 0 0 0 10px;height: 51px;white-space: normal;}
.ppAddrSerc .tableDiv table td.one{padding: 120px;font-size: 16px;}
.ppAddrSerc .tableDiv table td.btn{padding: 0;}
.ppAddrSerc .tableDiv table td.btn button{width: 55px;height: 34px;font-size: 12px;}
.ppAddrSerc .paging > button{right: 0;}

/* 주소 검색 팝업 - mobile */
.body-m .ppAddrSerc .headerDiv{width: 100%;}
.body-m .ppAddrSerc > div{width: calc(100% - 32px);padding: 16px;}
.body-m .ppAddrSerc .tableDiv table td.one{width: calc(100% - 32px);padding: 16px;}
.body-m .searchTopDiv > div{text-align: left;padding-left: 20px;}
.body-m .ppAddrSerc .searchTopDiv > div .inputSpan input{width: calc(100% - 150px) !important;}
.body-m .ppAddrSerc button.iconText{right: 17px;}

/* 주문상세 팝업 */
.ppOderDtpt > div{width: calc(640px - 68px);}
.ppOderDtpt .info .header{background: #ECFCF5;border-radius: 16px;padding: 24px;position: relative;}
.ppOderDtpt .info .header > p{font-weight: 500;font-size: 14px;line-height: 22px;color: #00AB5B;padding-bottom: 8px;}
.ppOderDtpt .info .header > p span{margin-left: 6px;padding-left: 6px;border-left: 1px solid #DFE4F1;}
.ppOderDtpt .info .header > span{font-weight: 700;font-size: 14px;line-height: 22px;color: #363A44;}
.ppOderDtpt .info .header > a{font-weight: 700;font-size: 14px;line-height: 22px;color: #363A44;text-underline-position: under;text-decoration: underline;}
.ppOderDtpt .info .header > h5{font-weight: 700;font-size: 16px;line-height: 24px;color: #363A44;}
.ppOderDtpt .info .header:after{font-weight: 700;font-size: 12px;line-height: 18px;letter-spacing: -0.02em;background: #FFFFFF;border-radius: 100px;width: 64px;height: 64px;display: flex;align-items: center;justify-content: center;transform: rotateZ(15deg);position: absolute;right: 30px;top: 30px;}
.ppOderDtpt .info.type02 .header{background: #ECFCF5;}
.ppOderDtpt .info.type02 .header:after{content: '픽업대기';color: #02B763;border: 1px solid #80DBB1;}
.ppOderDtpt .info.type03 .header{background: #FFF6EE;}
.ppOderDtpt .info.type03 .header p{color: #FF8718}
.ppOderDtpt .info.type03 .header:after{content: '픽업예정';color: #FF8718;border: 1px solid #FFC38B;}
.ppOderDtpt .info.type04 .header{background: #FFF6EE;}
.ppOderDtpt .info.type04 .header p{color: #FF8718}
.ppOderDtpt .info.type04 .header:after{content: '픽업예정';color: #FF8718;border: 1px solid #FFC38B;}
.ppOderDtpt .info.type05 .header{background: #EFF7FF;}
.ppOderDtpt .info.type05 .header p{color: #0C75F1}
.ppOderDtpt .info.type05 .header:after{content: '배달중';color: #0C75F1;border: 1px solid #85BAF8;}
.ppOderDtpt .info.type06 .header, .ppOderDtpt .info.type07 .header, .ppOderDtpt .info.type08 .header{background: #F4F6FB;}
.ppOderDtpt .info.type06 .header p, .ppOderDtpt .info.type07 .header p, .ppOderDtpt .info.type08 .header p{color: #787E91;}
.ppOderDtpt .info.type06 .header:after, .ppOderDtpt .info.type07 .header:after, .ppOderDtpt .info.type08 .header:after{content: '배달완료';color: #787E91;border: 1px solid #C8CFE2;}
.ppOderDtpt .info .imgList h5{font-weight: 700;font-size: 16px;line-height: 24px;color: #22242B;padding: 24px 0 12px;}
.ppOderDtpt .info ul{padding-top: 8px;padding-bottom: 7px;}
.ppOderDtpt .info .imgList .swiper-slide{width: 120px;height: 120px;border-radius: 16px;overflow: hidden;}
.ppOderDtpt .info .imgList .swiper-slide:after{content: '';position: absolute;background-image: url("/static/images/icon/iconImgView.svg");width: 30px;height: 30px;right: 8px;bottom: 8px;background-size: 30px 30px;background-repeat: no-repeat;pointer-events: none;}
.ppOderDtpt .info .imgList .swiper-slide img{width: 100%;height: 100%;object-fit: cover;cursor: pointer;}
.ppOderDtpt .info .buttonDiv{text-align: center;}

/*  주문상세 - mobile*/
.body-m .ppOderDtpt .info .header:after{top: 16px;right: 16px;}
.body-m .ppOderDtpt .info .header > div{background: #FFFFFF;border-radius: 8px;text-align: center;margin-top: 16px;}
.body-m .ppOderDtpt .info .header > div p{font-weight: 500;font-size: 14px;line-height: 20px;letter-spacing: -0.02em;color: #535867;padding: 12px 0;}
.body-m .ppOderDtpt .info ul{padding-top: 32px;}
.body-m .ppOderDtpt .info .buttonDiv{position: fixed;bottom: 32px;left: 0;display: flex;width: calc(100% - 40px);padding: 0 20px;}
.body-m .ppOderDtpt .info .buttonDiv button{width: 116px;}
.body-m .ppOderDtpt .info .buttonDiv button:last-child{width: 100%;flex: 1;margin-left: 8px;}

/* 고객 리스트 */
.cstList .tableDiv{height: 385px;}
.cstList .tableDiv > p{width: 720px;margin: 0 auto;text-align: right;padding-bottom: 10px;font-size: 15px;}
.body-m .cstList{text-align: right;padding-bottom: 100px;}
.body-m .cstList button.iconText{right: 17px;}
.body-m .cstList .searchTopDiv{margin-bottom: 10px;}
.body-m .cstList > button{height: 48px;width: 200px;margin: 0 auto;display: block;position: fixed;bottom: 32px;left: 50%;transform: translateX(-50%);}

/*  주문 리스트 */
.oderList .searchTopDiv{width: 800px;}
.oderList .searchTopDiv select{width: 100px;border: none;}
.oderList .searchTopDiv > div .dateSpan input{width: 60px !important;}
.oderList .tableDiv{height: 385px;}
.oderList .tableDiv table td{cursor: pointer;}
.oderList .badge{background: #E9EDF6;border-radius: 100px;width: 58px;font-weight: 700;font-size: 10px;line-height: 18px;display: flex;align-items: center;text-align: center;letter-spacing: -0.02em;justify-content: center;height: 24px;margin: 0 auto;}
.oderList .badge.type02{background: #02B763;color: #FFFFFF;}
.oderList .badge.type03{background: #FFEDDC;color: #FF8718;}
.oderList .badge.type04{background: #DFEEFF;color: #0C75F1;}
.oderList .oderCancel ul{margin: 0 auto;width: 130px;font-weight: 500;font-size: 14px;line-height: 22px;color: #787E91;padding-bottom: 10px;}
.oderList .oderCancel ul li{padding: 5px 0;}
.oderList .oderCancel ul li input{position: relative;top: 1px;}
.oderList .oderCancel p{padding-bottom: 5px;}
.oderList .tableDiv > p{width: 800px;margin: 0 auto;text-align: right;padding-bottom: 10px;font-size: 15px;}

/*  주문 리스트 - mobile*/
.body-m .oderList .searchTopDiv{width: 100%;}
.body-m .oderList .searchTopDiv select{width: 100px;}
.body-m .oderList .tableDiv table td.one{padding: 140px 0;}
.body-m .oderList button.iconText{right: 17px;}

/* 주문 */
.insOder{display: flex;max-width: 1000px;margin: 0 auto;}
.insOder #delyMensDiv{flex-wrap: wrap;display: flex;gap: 5px 16px;}
.insOder #delyMensDiv > span{padding: 0;}
.insOder .inpDiv{padding: 15px 30px 0;width: 400px;flex: 1;position: relative;}
.insOder .inpDiv .rpreNoDiv{height: 36px;position: relative;}
.insOder .inpDiv .rpreNoDiv > button{top: 0;right: 0;}
.insOder .inpDiv .rpreNoDiv > span{display: flex;align-items: center;justify-content: center;font-weight: 500;font-size: 11px;line-height: 19px;letter-spacing: -0.02em;color: #363A44;background: #F2FCF7;height: 36px;width: 162px;border-radius: 8px;}
.insOder .inpDiv .rpreNoDiv > span em{color: #00AB5B;font-style: normal;padding-left: 8px;}
.insOder .inpDiv .rpreNoDiv > div{background: #F2FCF7;display: inline-block;}
.insOder .inpDiv .rpreNoDiv > div p{font-weight: 500;font-size: 11px;color: #363A44;}
.insOder .inpDiv form > ul{padding-top: 16px;}
.insOder .inpDiv form > ul > li > div.half > div:first-child{width: 270px;flex: none;}
.insOder .inpDiv form > ul > li > div.half .flex{display: flex;}
.insOder .inpDiv > button{height: 48px;width: 200px;margin: 0 auto;display: block;}
.insOder .inpDiv .inputSpan select{width: 100%;}
.insOder .inpDiv .inputSpan input[type=checkbox]{display: none;}
.toastOderCpl{border-radius: 12px;background: #22242A;box-shadow: 0px 8px 16px 0px rgba(34, 36, 42, 0.10);color: #FFF;font-size: 16px;font-style: normal;font-weight: 700;line-height: 22px;letter-spacing: -0.32px;padding: 21px 0;position: absolute;width: calc(100% - 80px);z-index: 1;transition: 0.5s all;opacity: 0;top: -30px;pointer-events: none;max-width: 1000px;left: 50%;transform: translateX(-50%);}
.toastOderCpl.show{opacity: 1;top: 55px;}
.toastOderCpl div{display: flex;align-items: center;justify-content: center;}
.toastOderCpl div img{padding-right: 8px;}
.insOder .rightDiv{width: calc(100% - 710px);display: flex;flex-direction: column;background: #F4F6FB;}
.insOder .rightDiv .cst{height: 100%;display: flex;}
.insOder .rightDiv .cst ul{calc(100% - 32px);flex: 1;padding: 16px;display: flex;flex-direction: column;gap: 8px;}
.insOder .rightDiv .cst ul li{background: #FFFFFF;border-radius: 8px;color: #363A44;display: flex;align-items: center;padding: 5px 16px;min-height: 73px;height: 100%;}
.insOder .rightDiv .cst ul li.on{border: 1px solid #C8CFE2;}
.insOder .rightDiv .cst ul li.on i{background-image: url("/static/images/icon/iconCheckbox.svg");background-size: 24px 24px;width: 24px;height: 24px;}
.insOder .rightDiv .cst ul li div{flex: 1;}
.insOder .rightDiv .cst ul li div h5{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;}
.insOder .rightDiv .cst ul li div p{font-weight: 500;font-size: 12px;line-height: 16px;letter-spacing: -0.02em;color: #787E91;}
.insOder .rightDiv .cst ul li div span{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #787E91;}
.insOder .rightDiv .cst .btnUnDownDiv{display: flex;flex-direction: column;padding: 16px 16px 9px 0;}
.insOder .rightDiv .cst .btnUnDownDiv button{height: 100%;background: #FFFFFF;border: 1px solid #DFE4F1;border-radius: 8px;width: 55px;background-image: url("/static/images/icon/iconArrowDown.svg");background-position: center;background-repeat: no-repeat;background-size: 24px;}
.insOder .rightDiv .cst .btnUnDownDiv button:active{background-color: #02B763;color: #FFFFFF;background-image: url("/static/images/icon/iconArrowDownWhite.svg");}
.insOder .rightDiv .cst .btnUnDownDiv button.btnUp{margin-bottom: 8px;background-image: url("/static/images/icon/iconArrowUp.svg");}
.insOder .rightDiv .cst .btnUnDownDiv button.btnUp:active{background-image: url("/static/images/icon/iconArrowUpWhite.svg");}
.insOder .sideDiv{width: calc(100% - 780px);}
.insOder .sideDiv h5{padding: 13px 10px;}
.insOder .sideDiv ul{padding-left: 10px;}
.insOder .sideDiv ul li{padding: 8px;font-size: 14px;margin-bottom: 10px;background: #E9EDF6;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);border-radius: 10px;}
.insOder .sideDiv ul li.type02{background: #02B763;color: #FFFFFF;}
.insOder .sideDiv ul li.type02 a{color: #FFFFFF;}
.insOder .sideDiv ul li.type03{background: #FFEDDC;color: #FF8718;}
.insOder .sideDiv ul li.type03 a{color: #FF8718;}
.insOder .sideDiv ul li.type04{background: #DFEEFF;color: #0C75F1;}
.insOder .sideDiv ul li.type04 a{color: #0C75F1;}
.insOder .sideDiv ul li div{display: flex;align-items: center;padding-bottom: 5px;}
.insOder .sideDiv ul li div .badge{border: 1px solid;border-radius: 100px;width: 58px;font-weight: 700;font-size: 10px;line-height: 18px;display: flex;align-items: center;text-align: center;letter-spacing: -0.02em;justify-content: center;height: 24px;margin-right: 5px;}
.insOder .sideDiv ul li > p{padding-top: 5px;}
.insOder .oderCancel ul{margin: 0 auto;width: 130px;font-weight: 500;font-size: 14px;line-height: 22px;color: #787E91;padding-bottom: 10px;}
.insOder .oderCancel ul li{padding: 5px 0;}
.insOder .oderCancel ul li input{position: relative;top: 1px;}
.insOder .oderCancel p{padding-bottom: 5px;}
.insOder form > ul > li{padding-bottom: 10px;}

@media (max-width: 1000px) {
    .insOder .sideDiv{display: none;}
    .insOder .rightDiv{width: 320px;};
}

/* 주문 - 모바일*/
.body-m .insOder .inpDiv{padding: 15px 20px;width: 100%;}
.body-m .insOder .inpDiv form{padding-bottom: 70px;}
.body-m .toastOderCpl{width: calc(100% - 40px);top: -90px;left: 50%;transform: translateX(-50%);}
.body-m .toastOderCpl.show{top: 10px;}
.body-m .insOder .inpDiv .searchDiv{padding-bottom: 20px;}
.body-m .insOder .inpDiv .searchDiv div.cphoneDiv{position: relative;}
.body-m .insOder .inpDiv .searchDiv div.cphoneDiv input{padding: 13px 16px;font-size: 16px;width: calc(100% - 34px);}
.body-m .insOder .inpDiv .searchDiv div.cphoneDiv i{right: 50px;}
.body-m .insOder .inpDiv .searchDiv.active div.cphoneDiv input{border-radius: 8px 8px 0 0;}
.body-m .insOder .inpDiv .searchDiv div.cphoneDiv img{position: absolute;right: 16px;top: 0;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv{height: 264px;background: #F4F6FB;border: 1px solid #DFE4F1;border-radius: 0px 0px 8px 8px;display: none;}
.body-m .insOder .inpDiv .searchDiv.active div.cstDiv{display: flex;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul{padding: 9px 16px;flex: 1;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li{background: #FFFFFF;border-radius: 8px;color: #363A44;min-height: 58px;display: flex;align-items: center;padding: 6px 0 6px 16px;margin-top: 8px;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li.on{border: 1px solid #C8CFE2;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li.on i{background-image: url("/static/images/icon/iconCheckbox.svg");background-size: 24px 24px;width: 24px;height: 24px;margin-right: 16px;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li div{flex: 1;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li div h5{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li div p{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #787E91;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li div span{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #787E91;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv{display: flex;flex-direction: column;padding: 16px 16px 9px 0;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv button{height: 100%;background: #FFFFFF;border: 1px solid #DFE4F1;border-radius: 8px;width: 50px;background-image: url("/static/images/icon/iconArrowDown.svg");background-position: center;background-repeat: no-repeat;background-size: 24px;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv button:active{background-color: #02B763;color: #FFFFFF;background-image: url("/static/images/icon/iconArrowDownWhite.svg");}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv button.btnUp{margin-bottom: 8px;background-image: url("/static/images/icon/iconArrowUp.svg");}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv button.btnUp:active{background-image: url("/static/images/icon/iconArrowUpWhite.svg");}
.body-m .insOder .inpDiv .searchDiv .inputSpan input[type=text]:not(:placeholder-shown) + i + img{display: none;}
.body-m .insOder .inpDiv .searchDiv .inputSpan input[type=text]:not(:placeholder-shown) + i{right: 16px;}
.body-m .insOder .inpDiv > button{position: sticky;bottom: 32px;}
.body-m #oderDrcLdtnAmt{padding-right: 27px;width: calc(100% - 45px);}

/* 주문(고객) */
.insCstOder{height: calc(100% - 51px);overflow: hidden}
.insCstOder > div{height: 100%;position: relative;box-sizing: initial;transition: 0.3s all;width: 100%;display: flex;}
.insCstOder > div.step1{transform: translate3d(-100%, 0px, 0px);}
.insCstOder > div.step2{transform: translate3d(-200%, 0px, 0px);}
.insCstOder > div > div{width: 100%;height: 100%;flex-shrink: 0;display: flex;}
.insCstOder > div > div.cstSelectBox{display: flex;align-items: center;justify-content: center;gap: 20px;padding: 0 20px;width: calc(100% - 40px);}
.insCstOder > div > div.cstSelectBox > button{height: 170px;border-radius: 10px;font-size: 20px;font-weight: 700;}
.insCstOder > div > div.cstSelectBox > button span{font-size: 16px;display: block;padding-top: 20px;font-weight: 400;word-break: keep-all;}
.insCstOder > div > div.cstSelectBox > button:first-child{background-color: #FFFFFF;color: #363A44;border: 1px solid #DFE4F1;}
.insCstOder > div > div.cstSelectBox > button:last-child{background-color: #02B763;}
.insCstOder > div .inpDiv{overflow-y: auto;}
.insCstOder > div .inpDiv > button{display: none;position: sticky;left: 0;transform: translateX(0);}
.insCstOder > div.step1 .inpDiv > button,
.insCstOder > div.step2 .inpDiv > button{display: block;}
.insCstOder > div .phoneAuthArea{display: flex;justify-content: center;width: 100%;height: 100%;padding-top: 40%;}
.insCstOder > div .phoneAuthArea ul{width: 250px;}
.insCstOder > div .phoneAuthArea ul li{padding-bottom: 20px;}
.insCstOder > div .phoneAuthArea ul li label{font-size: 16px;padding-bottom: 10px;display: block;}
.insCstOder > div .phoneAuthArea ul li input{font-size: 16px;padding: 12px 36px 12px 16px;}

@media (max-width: 500px) {
    .body-m .insCstOder > div .cstSelectBox > button{width: 200px;}
}

.cstHome{border: none;background: none;}
.cstHome > img{width: 20px;}

/* keypad */
.keypadDiv{display: none;}
.keypadDiv.show{display: block;}
.keypadDiv .keypad{position: fixed;right: 0;bottom: 0;width: 250px;animation-duration: 0.2s;animation-fill-mode: forwards;transition: 0.2s all;z-index: 99999999;;}
.keypadDiv.show .keypad{animation-name: keypadShow;}
.keypadDiv.hide .keypad{animation-name: keypadHide;}
.keypadDiv .keypad .btnDiv{display: flex;padding: 10px 0;}
.keypadDiv .keypad .btnDiv button{height: 48px;box-shadow: none;flex: 1;}
.keypadDiv .keypad .btnDiv button:first-child{width: 92px;margin-right: 8px;flex: none;}
.keypad{background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 16px 16px 0px 0px;padding: 17px 16px 0;}
.keypad input{margin-bottom: 16px;}
.keypad table{width: 100%;border-spacing: 4px;}
.keypad table tbody td button{background: #F4F6FB;border-radius: 8px;height: 48px;text-align: center;font-weight: 500;font-size: 18px;line-height: 26px;letter-spacing: -0.02em;color: #4D5980;width: 100%;border: none;}
.keypad table tbody td button:active{background: #02B763;color: #FFFFFF;}
@keyframes keypadShow {
    0%{transform: translateY(100%);}
    100%{transform: translateY(0);}
}
@keyframes keypadHide {
    0%{transform: translateY(0);}
    100%{transform: translateY(100%);}
}

/* 결제 */
.ldtnList > div{width: 478px;margin: 0 auto;padding-top: 16px;}
.ldtnList > div .tab{background: #F8F9FC;border: 1px solid #F0F2F9;border-radius: 1000px;height: 40px;width: 350px;display: flex;margin: 0 auto;}
.ldtnList > div .tab li{font-weight: 700;font-size: 14px;line-height: 22px;text-align: center;letter-spacing: -0.02em;color: #787E91;width: 100%;padding: 9px 0 11px;cursor: pointer;}
.ldtnList > div .tab li.active{background: #FFFFFF;border: 1px solid #535867;box-shadow: 0px 4px 8px rgba(34, 36, 43, 0.1);border-radius: 1000px;color: #535867;}
.ldtnList > div > p{margin-top: 16px;padding: 10px 0;background: #F2FCF7;border-radius: 8px;font-weight: 500;font-size: 11px;line-height: 19px;letter-spacing: -0.02em;text-align: center;}
.ldtnList > div > p span{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #00AB5B;}
.ldtnList > div .list li{display: flex;background: #FFFFFF;border: 1px solid #F0F2F9;border-radius: 8px;padding: 11px 24px;margin-top: 8px;align-items: center;}
.ldtnList > div .list li span{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #535867;}
.ldtnList > div .list li span.cstNm{width: 80px}
.ldtnList > div .list li span.dtc{width: 60px}
.ldtnList > div .list li span.date{flex: 1;}
.ldtnList > div .list li span.amt{color: #363A44;font-weight: 700;}
.ldtnList > div .list li span.amt:before{content: '';background: url("/static/images/icon/iconPay.svg") no-repeat;background-size: 16px 16px; width: 16px;height: 16px;display: inline-block;position: relative;top: 4px;right: 4px;}
.ldtnList > div .list li.noData{justify-content: center;padding: 150px 0;}
.ldtnList > div .list.card li span:first-child{flex: 1;text-align: left;display: flex;align-items: center;padding-right: 5px;}
.ldtnList > div .list.card li span:nth-child(2){width: 180px;text-align: left;}
.ldtnList > div .list.card li span:nth-child(3){width: 30px;}
.ldtnList > div .list.card li span > img{width: 30px;}
.ldtnList > div .list.card li span a{color: #535867;text-decoration: underline;text-underline-position: under;}
.ldtnList .tabContent{position: relative;}
.ldtnList .tabContent > button{width: 200px;top: 400px;position: absolute;transform: translateX(-50%);}

/* 결제 - 모바일 */
.body-m .ldtnList > div{width: 100%}
.body-m .ldtnList .tabContent > button{width: 200px;position: fixed;bottom: 32px;left: 50%;top: auto;}
.body-m .ldtnList > div .list.card li span:nth-child(2){width: 140px;}

/* 공지 */
.anncList > div.tabDiv{width: 478px;margin: 0 auto;padding-top: 16px;}
.anncList > div.tabDiv .tab{background: #F8F9FC;border: 1px solid #F0F2F9;border-radius: 1000px;height: 40px;width: 250px;display: flex;margin: 0 auto;}
.anncList > div.tabDiv .tab li{font-weight: 700;font-size: 14px;line-height: 22px;text-align: center;letter-spacing: -0.02em;color: #787E91;width: 100%;padding: 9px 0 11px;cursor: pointer;}
.anncList > div.tabDiv .tab li.active{background: #FFFFFF;border: 1px solid #535867;box-shadow: 0px 4px 8px rgba(34, 36, 43, 0.1);border-radius: 1000px;color: #535867;}
.anncList > div.tableDiv{padding-top: 20px;height: 357px;}

/* 공지 - 모바일 */
.body-m .anncList > div.tabDiv{width: 100%;}

/* 공지 상세 */
.ppAnncDtpt .header{background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 32px;display: flex;padding: 24px;background: #F4F6FB;border-radius: 16px;align-items: flex-end;margin-bottom: 16px;}
.ppAnncDtpt .header p{font-weight: 700;font-size: 16px;line-height: 24px;color: #363A44;flex: 1;padding-right: 24px;}
.ppAnncDtpt .header span{font-weight: 500;font-size: 14px;line-height: 22px;display: flex;align-items: center;color: #787E91;}
.ppAnncDtpt .ck.ck-editor__editable_inline{padding: 0;}
.ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){border: none;height: 356px;}
.ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar{width: 5px;}
.ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar-track{background: #F1F1F1;}
.ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar-thumb{background: #C1C1C1;height: 20%;border-radius: 10px;}
.ppAnncDtpt.urgency .headerDiv button{display: none;}
.ppAnncDtpt.urgency .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){border: none;height: 250px;}
.ppAnncDtpt.urgency .bottom{display: block !important;text-align: center;}
.ppAnncDtpt.urgency .bottom > span{justify-content: center;padding: 18px 0;}
.ppAnncDtpt.urgency .bottom > button{width: 200px;}
.ppAnncDtpt.urgency .bottom > button:disabled{cursor: default;background-color: #E9EDF6;color: #A7ADBF;box-shadow: none;}
.ppAnncDtpt.urgency h3:before{content: '';background-image: url("/static/images/icon/iconUrgency.svg");height: 24px;width: 24px;display: inline-block;position: relative;top: 7px;margin-right: 8px;}

/* 공지 상세 - 모바일 */
.body-m .ppAnncDtpt .header{border-bottom: 1px solid #F0F2F9;background: none;box-shadow: none;border-radius: 0;display: block;padding: 0 0 25px 0;}
.body-m .ppAnncDtpt .header p{font-weight: 500;font-size: 24px;line-height: 36px;color: #363A44;padding-bottom: 8px;padding-right: 0;}
.body-m .ppAnncDtpt .header span{display: block;}
.body-m .ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){height: auto;}
.body-m .ppAnncDtpt.urgency .bottom{padding-bottom: 20px;}
.body-m .ppAnncDtpt.layerPopup .headerDiv h3{text-align: center;}
.body-m .ppAnncDtpt.urgency h3:before{height: 24px;width: 24px;top: 6px;}

/* 긴급 공지 상세 */
.ppUrgtAnncDtpt .header{background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 32px;display: flex;padding: 24px;background: #F4F6FB;border-radius: 16px;align-items: flex-end;margin-bottom: 16px;}
.ppUrgtAnncDtpt .header p{font-weight: 700;font-size: 16px;line-height: 24px;color: #363A44;flex: 1;padding-right: 24px;}
.ppUrgtAnncDtpt .header span{font-weight: 500;font-size: 14px;line-height: 22px;display: flex;align-items: center;color: #787E91;}
.ppUrgtAnncDtpt .ck.ck-editor__editable_inline{padding: 0;}
.ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){border: none;height: 356px;}
.ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar{width: 5px;}
.ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar-track{background: #F1F1F1;}
.ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar-thumb{background: #C1C1C1;height: 20%;border-radius: 10px;}

/* 긴급 공지 상세 - 모바일 */
.body-m .ppUrgtAnncDtpt .header{border-bottom: 1px solid #F0F2F9;background: none;box-shadow: none;border-radius: 0;display: block;padding: 0 0 25px 0;}
.body-m .ppUrgtAnncDtpt .header p{font-weight: 500;font-size: 24px;line-height: 36px;color: #363A44;padding-bottom: 8px;padding-right: 0;}
.body-m .ppUrgtAnncDtpt .header span{display: block;}
.body-m .ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){height: auto;}

/* 이미지 확대 */
.img-expand{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #22242A;z-index: 1;border-radius: 16px;}
.img-expand > div{position: relative;margin: 0 auto;height: 100%;}
.img-expand > div .head{padding: 16px 16px 4px;text-align: right;}
.img-expand > div .head .close{width: 40px;height: 40px;background-color: #000000;border: none;border-radius: 8px;display: inline-flex;align-items: center;justify-content: center;}
.img-expand > div .cont{height: 90%;}
.img-expand > div .cont img{width: 80%;position: relative;top: 45%;transform: translateY(-50%);margin: 0 auto;display: block;}
.img-expand > div.height .cont{position: relative;margin: 0 auto;max-width: 80%;}
.img-expand > div.height .cont img{height: 100%;position: unset;transform: none;width: auto;}

/* 이미지 확대 */
.body-m .img-expand{border-radius: 0;}
.body-m .img-expand > div .head{width: calc(100% - 32px);}
.body-m .img-expand > div .cont{height: 90%;width: 100%;}

/* editor */
.ppAnncDtpt .ck.ck-editor__main>.ck-content p{margin-bottom: 1rem;}

/* 카카오톡 채널 */
.divKakaoTalkChat{position: fixed;right: 47px;bottom: 10px;}
.divKakaoTalkChat img{box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);border-radius: 100%;width: 60px;}
.body-m .divKakaoTalkChat{right: 14px;bottom: 70px;}
.body-m .divKakaoTalkChat img{width: 45px;}

/* 카드 정보 */
.ppCardDtpt ul.list > li label{width: 100px;}
.ppCardDtpt ul.list > li input{padding: 8px;width: calc(100% - 18px);font-size: 14px;}
.ppCardDtpt ul.list > li .space{padding: 0 3px;}
.ppCardDtpt ul.list > li div{display: flex;align-items: center;}
.ppCardDtpt > .show{width: 400px;}
.ppCardDtpt > .show .info > p{font-size: 14px;color: #ff0000;}
.ppCardDtpt .buttonDiv{padding-top: 10px;text-align: center;margin-top: 10px;}

/* 카드 정보 - 모바일 */
.body-m .ppCardDtpt ul.list > li{flex-direction: column;align-items: flex-start;padding-bottom: 0px;}
.body-m .ppCardDtpt ul.list > li label{width: 100%;padding-bottom: 5px;}
.body-m .ppCardDtpt .buttonDiv{display: flex;gap: 10px;justify-content: center;}
.body-m .ppCardDtpt > .show .info > p{padding-top: 10px;}

/* 장보기 주문 toast */
.toast-popup {position: fixed;bottom: 100px;left: 50%;transform: translateX(-50%);background-color: #4CAF50;color: white;padding: 14px 24px;border-radius: 8px;font-size: 16px;box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);display: flex;align-items: center;animation: fadeInOut 1s ease-in-out, toastGlow 1s infinite alternate;z-index: 0;cursor: pointer;}
.toast-icon {margin-right: 10px;font-size: 20px;}

/* 장보기 주문 toast - 모바일 */
.body-m .toast-popup{width: 280px;}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(50%); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastGlow {
  0% {box-shadow: 0 0 8px rgba(76, 175, 80, 0.1);}
  100% {box-shadow: 0 0 14px rgba(1, 1, 1, 0.6);}
}

/* 장보기 내역 팝업 */
.ppOderShppDtpt .header ul{display: flex;align-items: center;gap: 10px;padding-bottom: 20px;}
.ppOderShppDtpt .header ul li{}
.ppOderShppDtpt .header ul li button{color: #000000;height: auto;padding: 5px 15px;font-size: 14px;letter-spacing: 0;font-weight: 500;}
.ppOderShppDtpt .header ul li button.on{color: #ffffff;background-color: #02B763;}
.ppOderShppDtpt .header .swiper-slide{width: 120px;}
.ppOderShppDtpt .header .swiper-slide button{color: #000000;height: auto;padding: 5px 15px;font-size: 14px;letter-spacing: 0;font-weight: 500;}
.ppOderShppDtpt .header .swiper-slide button.on{color: #ffffff;background-color: #02B763;font-weight: 700;}
.ppOderShppDtpt .buttonDiv{padding-top: 10px;text-align: center;margin-top: 10px;}

.body-m .ppOderShppDtpt .buttonDiv{position: fixed;bottom: 32px;left: 0;display: flex;width: calc(100% - 40px);left: 50%;transform: translateX(-50%);justify-content: center;}

/* 주문 완료 - 고객 모바일용 */
.body-m .oderCpl div{display: flex;flex-direction: column;align-items: center;padding-top: 200px;font-size: 20px;}
.body-m .oderCpl div img{width: 50px;margin-bottom: 20px;}
.body-m .oderCpl{background: linear-gradient(135deg, #f0f4f8, #d9e4f5);display: flex;justify-content: center;align-items: center;margin: 0;height: 100vh;}
.body-m .oderCpl .container {background: #ffffff;padding: 40px;border-radius: 12px;box-shadow: 0 8px 20px rgba(0,0,0,0.1);text-align: center;max-width: 400px;}
.body-m .oderCpl .container h1 {font-size: 22px;color: #333;margin-bottom: 20px;}
.body-m .oderCpl .container p {font-size: 16px;color: #555;line-height: 1.6;margin: 10px 0;}
.body-m .oderCpl .container .highlight {color: #2a6edc;font-weight: bold;}