#sub_container {
    padding: 120px 0 50px 0;
    margin: 0;
}

#sub_container2 {
    padding: 120px 0 50px 0;
    margin: 0;
}

.auto-order-m-finish-wrap{padding:10px;box-sizing:border-box;}
.auto-order-m-finish-wrap .inner-box{border:1px solid #C2133A;padding:10px;box-sizing:border-box;}
.auto-order-m-finish-wrap .text-box{margin:20px auto;text-align:center;}
.auto-order-m-finish-wrap div strong{color:#D31640;font-size:18px;}
.auto-order-m-finish-wrap div span{color:#787878;font-size:14px;}

.auto-order-m-btn-box{display: flex;justify-content: space-between;margin: 10px 0;padding: 0 10px;}
.auto-order-m-btn-box button{width:45%;height:30px;line-height:30px;color:#fff;background:#3D3C3A;border-radius:5px;font-size:14px;border:0;}
.auto-order-m-btn-box .back-r{background:#D3163E;}

.auto-mypage-back{background:#F0F0F0;}

.auto-mypage-title-box{border-bottom:1px solid #CDCAC3;background:#fff;text-align:center;position:relative;padding:10px;box-sizing:border-box;margin-bottom:8px;}
.auto-mypage-title-box span{color:#1A1A1A;font-size:20px;position:absolute;top:15px;left:20px;}
.auto-mypage-title-box strong{color:#1A1A1A;font-size:20px;}

.auto-mypage-sub-title {border-bottom:1px solid #CDCAC3;border-top:1px solid #CDCAC3;background:#fff;text-align:center;padding:10px 0;box-sizing:border-box;}
.auto-mypage-sub-title span{color:#1A1A1A;font-size:15px;}
.auto-mypage-sub-title strong{color:#D11B43;font-size:18px;}

.auto-mypage-list-box{padding:20px 10px;box-sizing:border-box;}
.auto-mypage-list-box .list-box{background:#fff;border-radius:5px;-webkit-box-shadow: 4px 2px 13px 1px #8C8C8C;box-shadow: 4px 2px 13px 1px #8C8C8C;;margin-bottom:20px;}

.auto-mypage-list-box .list-box .list-box-top{position:relative;padding:10px;box-sizing:border-box;text-align:left;border-bottom:1px solid #F0F0F0;}
.auto-mypage-list-box .list-box .list-box-top span{color:#000;font-size:14px;word-spacing:-1px;}
.auto-mypage-list-box .list-box .list-box-top strong{color:#000;font-size:14px;margin-left:8px;}
.auto-mypage-list-box .list-box .list-box-top a{color:#CF193F;font-size:14px;position:absolute;top:10px;right:15px;font-weight:bold;}

.auto-mypage-list-box .list-box .list-box-content{}
.auto-mypage-list-box .list-box .list-box-content .img-box{width:30%;float:left;padding:10px;box-sizing:border-box;}
.auto-mypage-list-box .list-box .list-box-content .img-box img{border-radius:5px;min-height:120px;} 

.auto-mypage-list-box .list-box .list-box-content .text-box{width:70%;float:left;padding:10px;box-sizing:border-box;}
.auto-mypage-list-box .list-box .list-box-content .text-box ul{}
.auto-mypage-list-box .list-box .list-box-content .text-box ul li{margin-bottom:5px;}
.auto-mypage-list-box .list-box .list-box-content .text-box ul li.color-g{color:#929091;font-size:14px;}
.auto-mypage-list-box .list-box .list-box-content .text-box ul li.font-row-2{color:#000;font-size:14px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 40px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;}
.auto-mypage-list-box .list-box .list-box-content .text-box ul li.color-r{color:#D11B43;font-size:14px;}
.auto-mypage-list-box .list-box .list-box-content .text-box ul li strong{}

.auto-month-css{background:#898989;color:#fff;font-size:12px;padding:5px;box-sizing:border-box;border-radius:5px;width:125px;height:30px;;margin-left:10px;display:inline-block;}
.auto-month-css span{display:inline-block;vertical-align:middle;}
.auto-month-css img{width:22px;height:22px;display:inline-block;vertical-align:middle;}

.auto-mypage-btn-box{display:flex;justify-content: space-between;margin-top:20px;}
.auto-mypage-btn-box button{width:48%;background:#3D3C3A;color:#fff;font-size:14px;border-radius:5px;border:0;text-align:center;height:35px;line-height:35px;}
.auto-mypage-btn-box button.back-r{background:#D3163E;}

.auto-mypage-detail-wrap{padding:10px;box-sizing:border-box;}

.btn_zone1.auto-cart-btn-box{display: flex;justify-content: space-between;padding: 10px 0;}
.btn_zone1.auto-cart-btn-box.no-bm{border-top:0;margin:0;padding:0;}
.btn_zone1.auto-cart-btn-box .btn{width:48%}
.m-mypage-auto-pay-detail-wrap{padding:10px;box-sizing:border-box;}
.m-mypage-auto-pay-detail-wrap .detail-title{font-size:14px;text-align:left;padding:5px 0;}
.m-mypage-auto-pay-detail-wrap .order-number-box{border:1px solid #D0D0D0;background:#F4F4F4;text-align:center;
padding:20px;box-sizing:border-box;margin-bottom:20px;}
.m-mypage-auto-pay-detail-wrap .order-number-box span{font-size:14px;color:#000;}
.m-mypage-auto-pay-detail-wrap .order-number-box span strong{font-size:14px;color:#0F84B0;}

.number {position:relative;width:90px;float:right;    right: 10px;}
.minus, .plus{width:20px;height:20px;background:none;border-radius:0;border:0;display: inline-block;vertical-align: middle;text-align: center;color:#000;}
.minus{position:absolute;top:0;left:0;}
.plus{position:absolute;top:0;right:-10px;}
.number input{height:20px;width: 100px;text-align: center;font-size: 14px;border:1px solid #D0D0D0;border-radius:4px;display: inline-block;vertical-align: middle;}			

.auto-mypage-list-box.detail{display: flex; justify-content: space-between;align-content: space-between;padding:0 10px}
.auto-mypage-list-box.detail .list-box{box-shadow:none;border:1px solid #D0D0D0;width:95%;}
.auto-mypage-list-box.detail .list-box .ckbox{width:auto;}
.list-box-top img{position:absolute;top:9px;right:10px;}

.m-mypage-auto-pay-detail-wrap .table-css-1{border-collapse:collapse;width:100%;margin-bottom:20px;}
.m-mypage-auto-pay-detail-wrap .table-css-1 th{background:#F4F4F4;border:1px solid #E1E1E1;font-size:14px;color:#000;padding:5px;width:30%;}
.m-mypage-auto-pay-detail-wrap .table-css-1 td{background:#fff;border:1px solid #E1E1E1;font-size:14px;color:#000;padding:5px;width:70%;}
.m-mypage-auto-pay-detail-wrap .table-css-1 td img{width:auto;}
.m-mypage-auto-pay-detail-wrap .table-css-1 td.color-r{color:#D2153F;font-weight:bold;}
.m-mypage-auto-pay-detail-wrap .table-css-1 th .color-r{color:#D2153F;font-weight:bold;}

.m-mypage-auto-pay-detail-wrap .detail-btn-box{padding:10px;background:#D6D6D6;text-align:center;display: flex;justify-content: space-around;margin-top:20px;}
.m-mypage-auto-pay-detail-wrap .detail-btn-box button{border:0;border-radius:5px;background:#919191;color:#fff;font-size:14px;margin:0 5px;height:30px;line-height:30px;width:50%;display:inline-block;}
.m-mypage-auto-pay-detail-wrap .detail-btn-box button.back-r{background:#D3163E;}

.auto-order-pay-date{width:70px;border-bottom:1px solid #000;text-align:center;font-size:16px;font-weight:bold;color:#BA1816;display:inline-block;}
.verti{display:inline-block;vertical-align:middle;margin:0 5px;}

.auto-del-btn{background:none;border:0;cursor:pointer;}

.auto-date-css-1{width: 20px;position: absolute; top: 8px;left: 114px; background: 0; border: 0;cursor:pointer;opacity:0;}
.auto-date-css-2 {width: 31px;position: absolute;top: 11px;left: 93px; background: 0; border: 0;  cursor: pointer; opacity: 0;}

/* 230124 일반구매 정기구분 같이 노출하기 위해 카트에 탭 추가 */                           
/* ------------------- Tab ------------------- */
.tabItem { flex:1 1 50%; max-width:100%; margin:10px 0 0; padding:0 0 1.0rem; border-bottom:1px solid #d6d6d6; }
.tabArea { width:100%; }
.tabArea .tabLinks { display:flex; list-style:none; margin:0 0; padding:0 0; border-bottom:1px solid #d6d6d6; text-align:center; }
.tabArea .tabLinks > li > a { position:relative; float:left; margin:0 0rem 0 0; font-size:16px; padding:1.0rem; border:1px solid #d6d6d6;border-radius:2px 2px 0 0;box-sizing: border-box; text-decoration:none; }
.tabArea .tabLinks > li > a:hover { border-color:#D3023B #D3023B transparent #D3023B; }
.tabArea .tabLinks > li.active > a,
.tabArea .tabLinks > li.active > a:hover,
.tabArea .tabLinks > li.active > a:focus { color:#fff; font-weight:bold; background:#D3023B; border:1px solid #D3023B; border-bottom-color:transparent; }

.tabArea .tabLinks > li:nth-child(2).active > a,
.tabArea .tabLinks > li:nth-child(2).active > a:hover,
.tabArea .tabLinks > li:nth-child(2).active > a:focus { color:#fff; font-weight:bold; background:#2e5fff; border:1px solid #2e5fff; border-bottom-color:transparent; }

.tabArea .tabContent { width:100%; color:#545454; font-size:16px; }
.tabArea .tabContent > .tabPane { display:none; }
.tabArea .tabContent > .tabPane.active { display:block; padding:1.5rem 0; background-color:#fff; }
.tabArea .tabContent > .active { display:block; }

.tabJustified .tabLinks { display:flex; justify-content:space-between; align-items: center; padding:0 10px; }
.tabJustified .tabLinks > li { width:50%; height:55px; margin:0; }
.tabJustified .tabLinks > li > a { width:100%; }

.tabArea .tabContent > .tabPane .btn-wrap { display:flex; justify-content:center; align-items:center; }
.tabArea .tabContent > .tabPane .btn-wrap button { width:calc((100% - 12px) / 2); height:50px; max-width:200px; font-size:16px; border:0; margin:0 0 0 6px; cursor:pointer; }
.tabArea .tabContent > .tabPane .btn-wrap button:first-child { margin:0; }
.tabArea .tabContent > .tabPane .btn-wrap button.btnAdd {color:#2e5fff; border:1px solid #2e5fff; background:#fff;} /* 상품추가하기 */
.tabArea .tabContent > .tabPane .btn-wrap button.btnOrder {color:#fff; font-weight:bold; background:#2e5fff;} /* 정기구매하기 */

#s21 .btn_06 { background: url(/SKIN/HTML/1/IMG/icon/btn_06.png) 0 50% no-repeat; background-size: 22%; padding-left: 30% !important; box-sizing: border-box; }


#s22 .btn_zone2 { display:flex; justify-content:space-between; align-items: center; }
#s22 .btn-default { width:49%; color: #fff; background-color: #919191; border-color: #919191; }
#s22 .btn-warning { width:49%; color: #fff; background-color: #2e5fff; border-color: #2e5fff; }
#s22 .btn_06 { background: url(/SKIN/HTML/1/IMG/icon/btn_06.png) 0 50% no-repeat; background-size: 22%; padding-left: 12% !important; box-sizing: border-box; }

/* 230124 일반구매 정기구분 같이 노출하기 위해 카트에 탭 추가 */

/* 230122 카드 추가 관련 화면구성. modal 추가 */
/* ------------------- cardSelect ------------------- */
.cardSelectArea { width:100%; }
.cardSelectBtn { display: flex; justify-content: flex-start; align-items: center; }
.cardSelectBtn a { display: flex; justify-content: center; align-items: center;  width:74px; height:26px; font-size:12px; line-height: 12px; border:1px solid #767676; color:#000; letter-spacing: -0.48px; border-radius:4px; margin:0 0 0 6px; cursor:pointer; }
.cardSelectBtn a:hover { text-decoration: none; }
.cardSelectBtn a:first-child { margin:0; }
.cardSelectBtn a.btnCardAdd {color:#000; border:1px solid #767676; background:#fff;} /* 상품추가하기 */
.cardSelectBtn a.btnCardSetting {color:#000; border:1px solid #767676;  background:#fff;} /* 정기구매하기 */

.cardWrap { width:100%; padding:0 10px; margin:10px 0 0; }
.cardWrap a { cursor: pointer; }
.cardWrap label { width: 100%; }
.cardWrap .cardInput { display: none; }
.cardWrap .cardChoice:hover { cursor: pointer; }
.cardWrap .cardInput:checked + .cardChoice { transform:scale(1.01); }
.cardWrap img { max-width:95%; }

.cardWrap .slick-prev:before, .cardWrap .slick-next:before { opacity:0; }
.cardWrap .slick-prev { position:absolute; top:36%; left:0px; content: ""; width: 15px; height: 15px; transform: rotate(315deg); border-top: 2px solid rgb(217, 217, 217); border-left: 2px solid rgb(217, 217, 217); transition: all 1s ease 0s; }
.cardWrap .slick-next { position:absolute; top:36%; right:0px; content: ""; width: 15px; height: 15px; transform: rotate(135deg); border-top: 2px solid rgb(217, 217, 217); border-left: 2px solid rgb(217, 217, 217); transition: all 1s ease 0s; }

.cardInfo { width:100%; text-align: center; margin:10px 0 0; border-top:1px solid #767676; font-size:16px; }

.cardSelectArea .btn-wrap { display:flex; justify-content:center; align-items:center; margin:10px 0 0; }
.cardSelectArea .btn-wrap button { width:calc((100% - 12px) / 2); height:50px; max-width:200px; font-size:16px; border:0; margin:0 0 0 6px; cursor:pointer; }
.cardSelectArea .btn-wrap button:first-child { margin:0; }
.cardSelectArea .btn-wrap button.btnAdd {color:#2e5fff; border:1px solid #2e5fff; background:#fff;} /* 이전 */
.cardSelectArea .btn-wrap button.btnOrder {color:#fff; font-weight:bold; background:#2e5fff;} /* 정기구매하기 */

#cardAddModal { display: none; position: fixed; top:0; right:0; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%; background:rgb(0, 0, 0, 0.9); transition: all 1s ease-in-out; z-index:8887; }
#cardAddModal .modalContent { width:400px; height:454px; background: #fff; color:#545454; border-radius:6px; }
#cardAddModal .modalHeader { display: flex; flex-direction: row; justify-content:center; align-items: center; border-bottom: 0px solid #d9d9d9; padding:36px 20px; }
#cardAddModal .modalHeader .title { font-size: 22px; font-weight: 500; font-stretch: normal; font-style: normal; line-height:22px; letter-spacing: -0.88px; text-align: center; color: #000; }
#cardAddModal .modalClose { color: red; text-decoration: none; font-size:2.8rem; font-weight: 300; }
#cardAddModal .modalClose:hover, .modalClose:focus { text-decoration: none; cursor: pointer; }
#cardAddModal .modalBody { padding:0 20px 20px; display: flex; justify-content:space-between; flex-flow: column; }
#cardAddModal .modalBody .formList { display: flex; justify-content: flex-start; align-items: center; flex-flow: column; width:100%; box-sizing: border-box; padding:0 0 20px; border-bottom:1px solid #eee; }
#cardAddModal .modalBody .formList .itemForm { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:6px 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemLabel { display: flex; justify-content: flex-start; width:90px; margin:0 5px 0 0; font-size: 14px; line-height:28px; letter-spacing: -0.56px; color: #000; }
#cardAddModal .modalBody .formList .itemForm .itemInput { display: flex; justify-content: flex-start; width:calc(100% - 85px); }
#cardAddModal .modalBody .formList .itemForm .itemInput p { font-size: 12px; letter-spacing: -0.48px; text-align: left; color: #000; }
#cardAddModal .modalBody .formList .itemForm .itemInput input { width:62px; height:28px; margin:0 4px 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemInput input:nth-child(4) { margin:0 0 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemInput select { width:128px; height:28px; margin:0 4px 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemInput input.halfWidth { width:128px; height:28px; margin:0 4px 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemInput input.fullWidth { width:260px; height:28px; margin:0 4px 0 0; }
#cardAddModal .modalBody .agreeCheck { display: flex; justify-content: flex-start; align-items: center; margin:20px 0; }
#cardAddModal .modalBody .agreeCheck input[type="checkbox"]{ display: none; }
#cardAddModal .modalBody .agreeCheck input[type="checkbox"] + label{ display: inline-block; width: 18px; height: 18px; border:1px solid #707070; position: relative; margin:0 5px 0 0; }
#cardAddModal .modalBody .agreeCheck input[id="check1"]:checked + label::after{ content:'✔'; font-size:18px; width:18px; height:18px; color:#2e5fff; text-align: center; position: absolute; left: 0; top:-4px; }
#cardAddModal .modalBody .agreeCheck p { font-size: 12px; letter-spacing: -0.48px; color: #000; margin:0; }
#cardAddModal .modalBody .modalBtn { width:100%; display: flex; justify-content:flex-start; flex-flow: row; margin:10px 0 0;}
#cardAddModal .modalBody .modalBtn button { width:calc((100% - 10px) / 2); height:50px; font-size:16px; border:0; margin:0 10px 0 0; cursor:pointer; }
#cardAddModal .modalBody .modalBtn button.btnCancel {color:#fff; font-weight:bold; background:#454545; }
#cardAddModal .modalBody .modalBtn button.btnNext { color:#fff; font-weight:bold; background:linear-gradient(to top, #2e81ff, #2e5fff); margin:0; }

#cardSettingModal { display: none; position: fixed; top:0; right:0; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%; background:rgb(0, 0, 0, 0.9); transition: all 1s ease-in-out; z-index:8887; }
#cardSettingModal .modalContent { width:400px; height:454px; background: #fff; color:#545454; border-radius:6px; }
#cardSettingModal .modalHeader { display: flex; flex-direction: row; justify-content:center; align-items: center; border-bottom: 0px solid #d9d9d9; padding:36px 20px; }
#cardSettingModal .modalHeader .title { font-size: 22px; font-weight: 500; font-stretch: normal; font-style: normal; line-height:22px; letter-spacing: -0.88px; text-align: center; color: #000; }
#cardSettingModal .modalClose { color: red; text-decoration: none; font-size:2.8rem; font-weight: 300; }
#cardSettingModal .modalClose:hover, .modalClose:focus { text-decoration: none; cursor: pointer; }
#cardSettingModal .modalBody { padding:0 0 20px; display: flex; justify-content:space-between; flex-flow: column; }
#cardSettingModal .modalBody .cardList { display: flex; justify-content: flex-start; align-items: center; flex-flow: column; width:100%; box-sizing: border-box; padding:0 0 20px; margin:0; list-style: none; border-bottom:1px solid #eee; }
#cardSettingModal .modalBody .cardList li { display: flex; justify-content: flex-start; align-items: center; flex-flow: row; width:100%; padding:10px 20px; box-sizing: border-box; }
#cardSettingModal .modalBody .cardList li:hover { background:#eaf0ff; }
#cardSettingModal .modalBody .cardList li img { width:76px; margin:0 9px 0 0; }
#cardSettingModal .modalBody .cardList li .cardInfoDetail { margin:0 auto 0 0; }
#cardSettingModal .modalBody .cardList li .cardInfoDetail p { font-size: 14px; letter-spacing: -0.56px; color: #000; margin:0; }
#cardSettingModal .modalBody .cardList li a { display: flex; justify-content:center; align-items: center; }
#cardSettingModal .modalBody .cardList li a.btnCardDel { width:42px; font-size: 14px; letter-spacing: -0.56px; color: #000; background: #fff; border: 1px solid #767676; border-radius:2px; }
#cardSettingModal .modalBody .modalBtn { width:100%; display: flex; justify-content:flex-start; flex-flow: row; margin:10px 0 0; padding:0 20px; box-sizing: border-box; }
#cardSettingModal .modalBody .modalBtn button { width:calc((100% - 10px) / 2); height:50px; font-size:16px; border:0; margin:0 10px 0 0; cursor:pointer; }
#cardSettingModal .modalBody .modalBtn button.btnCancel {color:#fff; font-weight:bold; background:#454545; }
#cardSettingModal .modalBody .modalBtn button.btnNext { color:#fff; font-weight:bold; background:linear-gradient(to top, #2e81ff, #2e5fff); margin:0; }

#cardComment { display: none; position: fixed; top:0; right:0; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%; background:rgb(0, 0, 0, 0.9); transition: all 1s ease-in-out; z-index:8887; box-sizing: border-box; }
#cardComment .modalContent { width:400px; height:200px; background: #fff; color:#545454; border-radius:6px; box-sizing: border-box; }
#cardComment .modalBody { padding:0 0 20px; display: flex; justify-content:space-between; flex-flow: column; }
#cardComment .modalBody .finalMent { padding:45px 20px; display: flex; justify-content:center; align-items:center; }
#cardComment .modalBody .finalMent p { font-size: 18px; letter-spacing: -0.72px; color: #000; }
#cardComment .modalBody .modalBtn { width:100%; display: flex; justify-content:flex-start; flex-flow: row; margin:10px 0 0; padding:0 20px; box-sizing: border-box; }
#cardComment .modalBody .modalBtn button { width:calc((100% - 10px) / 2); height:50px; font-size:16px; border:0; margin:0 10px 0 0; cursor:pointer; }
#cardComment .modalBody .modalBtn button.btnCancel {color:#fff; font-weight:bold; background:#454545; }
#cardComment .modalBody .modalBtn button.btnNext { color:#fff; font-weight:bold; background:linear-gradient(to top, #2e81ff, #2e5fff); margin:0; }
/* 230122 카드 추가 관련 화면구성. modal 추가 */

/* 230126 auto_order 페이지 캘린더 추가 */
/* ------------------- calendar ------------------- */
.newCalendar { width:100%; border:none; }
:root {
    --primary: #2196F3;
    --primary-md: #42A5F5;
    --primary-lt: #64B5F6;
    --primary-lightest: #E3F2FD;
    --secondary: #FF6F00;
    --gray-200: #EEEEEE;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-700: #616161;

    --shadow-2dp: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    --shadow-4dp: 0 4px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12);
    --shadow-8dp: 0 8px 10px 0 rgba(0, 0, 0, .14), 0 3px 12px 2px rgba(0, 0, 0, .12);
}
.excludeCalendarMobile p { margin:0; }
.excludeCalendarMobile .currentDay { display: flex; justify-content: flex-start; align-items: center; }
.excludeCalendarMobile .currentDay .underBarForm { border:none; border-bottom:1px solid #767676; width:30px; text-align: center; }
.excludeCalendarMobile .currentDay p { margin:0; }
.excludeCalendarMobile .currentDay img { margin:0 0 0 10px; }
.excludeCalendarMobile .txtFiled { color:#d1173e; }
.excludeCalendarMobile .txtFiled01 { width:100%; color:#d1173e; margin:10px 0 0; }
.excludeCalendarMobile .txtFiled01::placeholder { color:#d1173e; }

.excludeCalendarMobile .input-wrapper { display: inline-block; }
.excludeCalendarMobile .input-wrapper label { display: block; color: white; margin-bottom: 6px; }
.excludeCalendarMobile .input-wrapper input { display: none; border:none; border-radius: 3px; width: 200px; height: 48px;  margin-right: 16px; padding-left: 16px; box-shadow: var(--shadow-2dp); }

.excludeCalendarMobile .date-field { cursor: pointer; }
.excludeCalendarMobile .calendar-widget { position: relative; }
.excludeCalendarMobile .calendar-widget:focus { outline: none; }
.excludeCalendarMobile .calendar-wrapper { display: none; position: absolute; top: 100%; left:-40%; padding-top: 8px; z-index: 2; }
.excludeCalendarMobile .dual-calendar { display: flex; /*   height: 300px; */ border-radius: 3px; padding: 16px; box-shadow: var(--shadow-2dp); background-color: white; flex-flow: column; }
.excludeCalendarMobile .dual-calendar .calendar:first-child { margin-right: 16px; }
.excludeCalendarMobile .calendar { width:auto; }
.excludeCalendarMobile .calendar-header { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; }
.excludeCalendarMobile .month-text { color: var(--gray-700); font-size: 24px; font-weight: bold; }

.excludeCaexcludeCalendarMobilelendar .prev-btn,
.excludeCalendarMobile .next-btn { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50px; /* box-shadow: var(--shadow-2dp); background-color: var(--primary); color: white; transition: background-color 0.2s, box-shadow 0.2s; */ }
.excludeCalendarMobile .prev-btn:after { content: ''; width: 7px; height: 7px; position: absolute; top: 13px; left: 14px; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(315deg); transition: all 1s; }
.excludeCalendar .next-btn:after { content: ''; width: 7px; height: 7px; position: absolute; top: 13px; right: 15px; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(135deg); transition: all 1s; }
.excludeCalendarMobile .prev-btn:hover,
.excludeCalendarMobile .next-btn:hover { box-shadow: var(--shadow-4dp); background-color: var(--primary-md); }
.excludeCalendarMobile .prev-btn:active,
.excludeCalendarMobile .next-btn:active { box-shadow: var(--shadow-8dp); background-color: var(--primary-lt); }
.excludeCalendarMobile .prev-btn.disabled,
.excludeCalendarMobile .next-btn.disabled { cursor: default; box-shadow: none; background-color: var(--gray-300); color: var(--gray-500); }
.excludeCalendarMobile .prev-btn *,
.excludeCalendarMobile .next-btn * { user-select: none; }
.excludeCalendarMobile .prev-btn { left: 0; }
.excludeCalendarMobile .next-btn { right: 0; }
.excludeCalendarMobile .date-table-header { display: flex; justify-content: space-between; width: 100%; margin-top: 8px; }
.excludeCalendarMobile .day { user-select: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-weight: 700; color: var(--gray-700); font-size: 16px; }
.excludeCalendarMobile .day.saturday { color: var(--primary); }
.excludeCalendarMobile .day.sunday { color: var(--secondary); }

/* Date Styling */
.excludeCalendarMobile .date-table-row { display: flex; height: 52px; justify-content: space-between; }
.excludeCalendarMobile .date { cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; width:52px; height:52px; transition: color 0.2s; }

/* DO NOT CHANGE THE ORDER */
.excludeCalendarMobile .date.sunday { color: var(--secondary); }
.excludeCalendarMobile .date.today { color:#fff; background: var(--primary); border-radius: 50%; }
.excludeCalendarMobile .date.today .date-text { color:#ffffff; }
.excludeCalendarMobile .date.selected { color:#fff; background: var(--primary); border-radius: 50%; }
.excludeCalendarMobile .date.disabled { color: var(--gray-300); }
.excludeCalendarMobile .date.empty { cursor: default; user-select: none; }
.excludeCalendarMobile .date * { cursor: pointer; user-select: none; }
.excludeCalendarMobile .date.disabled *{ cursor: not-allowed; }
.excludeCalendarMobile .date .help-text { position: absolute; top: 0; display: none; align-items: flex-start; justify-content: center; width: 100%; height: 15px; font-size: 10px; z-index: 1; }
.excludeCalendarMobile .date .date-text { display: flex; justify-content: center; align-items: center;  width: 100%; height: 100%; font-size:16px; z-index: 1; color:#666666; }
.excludeCalendarMobile .date.disabled .date-text { color:#e0e0e0; }
.excludeCalendarMobile .date .date-ripple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width:52px; height: 100%; background-color: transparent; will-change: transform; transition: transform 0.18s cubic-bezier(0, .75, .5, 1), background-color 0.2s; }
.excludeCalendarMobile .date .date-ripple.no-transition { transition: none; }
.excludeCalendarMobile .date.hover .date-ripple { background-color: var(--gray-300); transform: translate(-50%, -50%) scale(1); border-radius:50%; }
.excludeCalendarMobile .date.in-range .date-ripple { background-color: var(--primary-lightest); transform: translate(-50%, -50%) scale(1); }
.excludeCalendarMobile .date.selected .date-ripple { background-color: var(--primary); transform: translate(-50%, -50%) scale(1); border-radius:50%; }
/* 230126 auto_order 페이지 캘린더 추가 */

/* 230126 카드 추가 및 관리 버튼 추가 */
.m-mypage-auto-pay-detail-wrap .detail-title { display: flex; justify-content: flex-start; align-items: center; font-size:14px;text-align:left;padding:5px 0; }
.m-mypage-auto-pay-detail-wrap .detail-title .cardSelectBtn { display: flex; justify-content: flex-start; align-items: center; margin:0 0 0 auto; }
.m-mypage-auto-pay-detail-wrap .detail-title .cardSelectBtn a { display: flex; justify-content: center; align-items: center;  width:74px; height:26px; font-size:12px; line-height: 12px; border:1px solid #767676; color:#000; letter-spacing: -0.48px; border-radius:4px; margin:0 0 0 6px; cursor:pointer; }
.m-mypage-auto-pay-detail-wrap .detail-title .cardSelectBtn a:hover { text-decoration: none; }
.m-mypage-auto-pay-detail-wrap .detail-title .cardSelectBtn a:first-child { margin:0; }
.m-mypage-auto-pay-detail-wrap .detail-title .cardSelectBtn a.btnCardAdd {color:#000; border:1px solid #767676; background:#fff;} /* 상품추가하기 */
.m-mypage-auto-pay-detail-wrap .detail-title .cardSelectBtn a.btnCardSetting {color:#000; border:1px solid #767676;  background:#fff;} /* 정기구매하기 */

#cardAddModal { display: none; position: fixed; top:0; right:0; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%; background:rgb(0, 0, 0, 0.9); transition: all 1s ease-in-out; z-index:8887; }
#cardAddModal .modalContent { width:400px; height:454px; background: #fff; color:#545454; border-radius:6px; }
#cardAddModal .modalHeader { display: flex; flex-direction: row; justify-content:center; align-items: center; border-bottom: 0px solid #d9d9d9; padding:36px 20px; }
#cardAddModal .modalHeader .title { font-size: 22px; font-weight: 500; font-stretch: normal; font-style: normal; line-height:22px; letter-spacing: -0.88px; text-align: center; color: #000; }
#cardAddModal .modalClose { color: red; text-decoration: none; font-size:2.8rem; font-weight: 300; }
#cardAddModal .modalClose:hover, .modalClose:focus { text-decoration: none; cursor: pointer; }
#cardAddModal .modalBody { padding:0 20px 20px; display: flex; justify-content:space-between; flex-flow: column; }
#cardAddModal .modalBody .formList { display: flex; justify-content: flex-start; align-items: center; flex-flow: column; width:100%; box-sizing: border-box; padding:0 0 20px; border-bottom:1px solid #eee; }
#cardAddModal .modalBody .formList .itemForm { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:6px 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemLabel { display: flex; justify-content: flex-start; width:90px; margin:0 5px 0 0; font-size: 14px; line-height:28px; letter-spacing: -0.56px; color: #000; }
#cardAddModal .modalBody .formList .itemForm .itemInput { display: flex; justify-content: flex-start; width:calc(100% - 85px); }
#cardAddModal .modalBody .formList .itemForm .itemInput p { font-size: 12px; letter-spacing: -0.48px; text-align: left; color: #000; }
#cardAddModal .modalBody .formList .itemForm .itemInput input { width:62px; height:28px; margin:0 4px 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemInput input:nth-child(4) { margin:0 0 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemInput select { width:128px; height:28px; margin:0 4px 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemInput input.halfWidth { width:128px; height:28px; margin:0 4px 0 0; }
#cardAddModal .modalBody .formList .itemForm .itemInput input.fullWidth { width:260px; height:28px; margin:0 4px 0 0; }
#cardAddModal .modalBody .agreeCheck { display: flex; justify-content: flex-start; align-items: center; margin:20px 0; }
#cardAddModal .modalBody .agreeCheck input[type="checkbox"]{ display: none; }
#cardAddModal .modalBody .agreeCheck input[type="checkbox"] + label{ display: inline-block; width: 18px; height: 18px; border:1px solid #707070; position: relative; margin:0 5px 0 0; }
#cardAddModal .modalBody .agreeCheck input[id="check1"]:checked + label::after{ content:'✔'; font-size:18px; width:18px; height:18px; color:#2e5fff; text-align: center; position: absolute; left: 0; top:-4px; }
#cardAddModal .modalBody .agreeCheck p { font-size: 12px; letter-spacing: -0.48px; color: #000; margin:0; }
#cardAddModal .modalBody .modalBtn { width:100%; display: flex; justify-content:flex-start; flex-flow: row; margin:10px 0 0;}
#cardAddModal .modalBody .modalBtn button { width:calc((100% - 10px) / 2); height:50px; font-size:16px; border:0; margin:0 10px 0 0; cursor:pointer; }
#cardAddModal .modalBody .modalBtn button.btnCancel {color:#fff; font-weight:bold; background:#454545; }
#cardAddModal .modalBody .modalBtn button.btnNext { color:#fff; font-weight:bold; background:linear-gradient(to top, #2e81ff, #2e5fff); margin:0; }

#cardSettingModal { display: none; position: fixed; top:0; right:0; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%; background:rgb(0, 0, 0, 0.9); transition: all 1s ease-in-out; z-index:8887; }
#cardSettingModal .modalContent { width:400px; height:454px; background: #fff; color:#545454; border-radius:6px; }
#cardSettingModal .modalHeader { display: flex; flex-direction: row; justify-content:center; align-items: center; border-bottom: 0px solid #d9d9d9; padding:36px 20px; }
#cardSettingModal .modalHeader .title { font-size: 22px; font-weight: 500; font-stretch: normal; font-style: normal; line-height:22px; letter-spacing: -0.88px; text-align: center; color: #000; }
#cardSettingModal .modalClose { color: red; text-decoration: none; font-size:2.8rem; font-weight: 300; }
#cardSettingModal .modalClose:hover, .modalClose:focus { text-decoration: none; cursor: pointer; }
#cardSettingModal .modalBody { padding:0 0 20px; display: flex; justify-content:space-between; flex-flow: column; }
#cardSettingModal .modalBody .cardList { display: flex; justify-content: flex-start; align-items: center; flex-flow: column; width:100%; box-sizing: border-box; padding:0 0 20px; margin:0; list-style: none; border-bottom:1px solid #eee; max-height:280px; overflow-y: scroll; }
#cardSettingModal .modalBody .cardList li { display: flex; justify-content: flex-start; align-items: center; flex-flow: row; width:100%; padding:10px 20px; box-sizing: border-box; }
#cardSettingModal .modalBody .cardList li.active { background:#eaf0ff; }
#cardSettingModal .modalBody .cardList li:hover { background:#eaf0ff; }
#cardSettingModal .modalBody .cardList li img { width:76px; margin:0 9px 0 0; }
#cardSettingModal .modalBody .cardList li .cardInfoDetail { margin:0 auto 0 0; }
#cardSettingModal .modalBody .cardList li .cardInfoDetail p { font-size: 14px; letter-spacing: -0.56px; color: #000; margin:0; }
#cardSettingModal .modalBody .cardList li a { display: flex; justify-content:center; align-items: center; }
#cardSettingModal .modalBody .cardList li a.btnCardDel { width:42px; font-size: 14px; letter-spacing: -0.56px; color: #000; background: #fff; border: 1px solid #767676; border-radius:2px; }
#cardSettingModal .modalBody .modalBtn { width:100%; display: flex; justify-content:flex-start; flex-flow: row; margin:10px 0 0; padding:0 20px; box-sizing: border-box; }
#cardSettingModal .modalBody .modalBtn button { width:calc((100% - 10px) / 2); height:50px; font-size:16px; border:0; margin:0 10px 0 0; cursor:pointer; }
#cardSettingModal .modalBody .modalBtn button.btnCancel {color:#fff; font-weight:bold; background:#454545; }
#cardSettingModal .modalBody .modalBtn button.btnNext { color:#fff; font-weight:bold; background:linear-gradient(to top, #2e81ff, #2e5fff); margin:0; }

#cardComment { display: none; position: fixed; top:0; right:0; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%; background:rgb(0, 0, 0, 0.9); transition: all 1s ease-in-out; z-index:8887; box-sizing: border-box; }
#cardComment .modalContent { width:400px; height:200px; background: #fff; color:#545454; border-radius:6px; box-sizing: border-box; }
#cardComment .modalBody { padding:0 0 20px; display: flex; justify-content:space-between; flex-flow: column; }
#cardComment .modalBody .finalMent { padding:45px 20px; display: flex; justify-content:center; align-items:center; }
#cardComment .modalBody .finalMent p { font-size: 18px; letter-spacing: -0.72px; color: #000; }
#cardComment .modalBody .modalBtn { width:100%; display: flex; justify-content:flex-start; flex-flow: row; margin:10px 0 0; padding:0 20px; box-sizing: border-box; }
#cardComment .modalBody .modalBtn button { width:calc((100% - 10px) / 2); height:50px; font-size:16px; border:0; margin:0 10px 0 0; cursor:pointer; }
#cardComment .modalBody .modalBtn button.btnCancel {color:#fff; font-weight:bold; background:#454545; }
#cardComment .modalBody .modalBtn button.btnNext { color:#fff; font-weight:bold; background:linear-gradient(to top, #2e81ff, #2e5fff); margin:0; }
/* 230126 카드 추가 및 관리 버튼 추가 */


/* 230123 정기결제 상세페이지 카드추가 및 관리 관련 */
.creditArea { position:relative; display: flex; justify-content:flex-start; align-items:center;  }
.creditArea strong { margin:0 auto 0 0; }
.creditArea a { font-size: 12px; letter-spacing: -0.48px; color: #fff; background: #454545; display: flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; }
.creditArea a:last-child { margin:0 0 0 4px; }
.creditArea .btnChange { width:84px; height:24px; }
.creditArea .btnAllChange { width:114px; height:24px; }
/* 230123 정기결제 상세페이지 카드추가 및 관리 관련 */

/* 230123 정기결제 상세페이지 하단 버튼 */
.detailBtnArea button { width:calc((100% - 12px) / 2); height:50px; max-width:200px; font-size:16px; border:0; margin:0 0 0 6px; cursor:pointer; }
.detailBtnArea button:first-child { margin:0; }
.detailBtnArea button.btnAdd {color:#2e5fff; border:1px solid #2e5fff; background:#fff;} /* 이전 */
.detailBtnArea button.btnPrint {color:#fff; border:1px solid #2e5fff; background:#454545;} /* 출력하기 */
.detailBtnArea button.btnOrder {color:#fff; font-weight:bold; background:#2e5fff;} /* 정기구매정보변경 */
/* 230123 정기결제 상세페이지 하단 버튼 */

.miniConfirm { width: 50px; height: 20px; background-color: #454545; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.miniConfirm:hover { font-size:11px; color:#fff; text-decoration: none; }

.autocancel_Confirm { width: 70px; height: 20px; background-color: #004080; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.autocancel_Confirm:hover { font-size:11px; color:#fff; text-decoration: none; }

.autocancel_Confirm_m { width: 90px; height: 20px; background-color: #004080; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.autocancel_Confirm_m:hover { font-size:11px; color:#fff; text-decoration: none; }

.autocancel_m { width: 80px; height: 20px; background-color: #454545; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.autocancel_m:hover { font-size:11px; color:#fff; text-decoration: none; }

.Date_Change_m { width: 110px; height: 20px; background-color: #454545; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.Date_Change_m:hover { font-size:11px; color:#fff; text-decoration: none; }

.btnAllChange { width: 116px; height: 20px; background-color: #454545; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.btnAllChange:hover { font-size:11px; color:#fff; text-decoration: none; }

.btnCancel { width: 30px; height: 20px; background-color: #454545; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.btnCancel:hover { font-size:11px; color:#fff; text-decoration: none; }

.btnNext { width: 90px; height: 20px; background-color: #0080FF; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.btnNext:hover { font-size:11px; color:#fff; text-decoration: none; }


/* 카드관리 삭제버튼 */
.carddel_Confirm { width: 45px; height: 25px; background-color: #FF0000; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.carddel_Confirm:hover { font-size:11px; color:#fff; text-decoration: none; }

/* 카드관리 사용카드 변경 */
.cardchg_Confirm { width: 45px; height: 25px; background-color: #006AD5; color:#fff; font-size:11px; display: flex; justify-content:center; align-items:center; cursor:pointer }
.cardchg_Confirm:hover { font-size:11px; color:#fff; text-decoration: none; }