.header_mypage_reserve_payment ._pagename span {font-weight: 550;} .header_mypage_reserve_payment_detail ._pagename span {font-weight: 550;} .wrapper_mypage_reserve_payment ._pageColorTab { position: absolute; top:3.77rem; z-index: 1; width: 100%; background-color: #fff; display: flex; border-bottom: 1px solid #DADADA; border-top: 1px solid #DADADA; height: var(--92); } .wrapper_mypage_reserve_payment ._pageColorTab li:last-child:after { content: ""; display: block; width: 1px; height: var(--30); background-color: #DADADA; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .wrapper_mypage_reserve_payment ._pageColorTab li { flex:1; position: relative; display: flex; justify-content: center; align-items: center; } .wrapper_mypage_reserve_payment ._pageColorTab li span { font-size: var(--30); font-weight: 500; padding: 0 var(--10); } .wrapper_mypage_reserve_payment ._pageColorTab li.on span { background: linear-gradient(to bottom, #ffffff 0%, #ffffff 60%, #FFEDF4 60%, #FFEDF4 100%); color: var(--colP); } .wrapper_mypage_reserve_payment .topBox { position: absolute; top:calc(3.77rem + var(--92)); width: 100%; z-index: 1; background-color: #fff; height: var(--86); border-bottom: 1px solid #DADADA; display: flex; justify-content: space-between; padding:0 var(--16); } .wrapper_mypage_reserve_payment .topBox > div { display: flex; align-items: center; } .wrapper_mypage_reserve_payment .topBox .filter { display: flex; position: relative; height: 100%; } .wrapper_mypage_reserve_payment .topBox .filter .btn { background-image: url(https://files.heally.co.kr/web-images/common/array_btn_icon.png); background-size: var(--24); padding-left: var(--56); padding-right: var(--20); background-position: var(--20); font-size: var(--24); font-weight: 500; } .wrapper_mypage_reserve_payment .topBox .filter input { position: absolute; left: 0; top: 0; opacity: 0; width:var(--160); height: 100%; } .wrapper_mypage_reserve_payment .topBox .filter input:checked + ul { display: block; } .wrapper_mypage_reserve_payment .topBox .filter ul { position: absolute; top:var(--72); left:0;; display: flex; flex-direction: column; border: 1px solid #eaeaea; padding:var(--16) var(--10); border-radius: var(--10); box-shadow: -0.27rem var(--12) var(--16) 0 rgb(0 0 0 / 15%); z-index: 1; gap: var(--10); background-color: #fff; display: none; } .wrapper_mypage_reserve_payment .topBox .filter:after { content: ""; display: block; width: 1px; height: var(--30); background-color: #DADADA; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .wrapper_mypage_reserve_payment .topBox .filter ul li { display: flex; justify-content: center; align-items: center; padding: 0 var(--30); height: var(--64); } .wrapper_mypage_reserve_payment .topBox .filter ul li button { font-size: var(--24); white-space: nowrap; } .wrapper_mypage_reserve_payment .topBox .listCount { height: 100%; position: relative; padding: 0 var(--20); } .wrapper_mypage_reserve_payment .topBox .listCount .txtBox { display: flex; gap: var(--10); height: 100%; align-items: center; } .wrapper_mypage_reserve_payment .topBox .listCount .txtBox .txt { font-size: var(--24); font-weight: 500; line-height: var(--24); } .wrapper_mypage_reserve_payment .topBox .listCount .txtBox img { width: var(--24); } .wrapper_mypage_reserve_payment .topBox .listCount .txt span { color: var(--colP); } .wrapper_mypage_reserve_payment .topBox .listCount input { position: absolute; left: 0; top: 0; opacity: 0; width:100%; height: 100%; } .wrapper_mypage_reserve_payment .topBox .listCount input:checked + .info { display: block; } .wrapper_mypage_reserve_payment .topBox .listCount .info { z-index: 1; position: absolute; left: var(--12); color: #626262; white-space: nowrap; font-size: var(--22); background: #FFFFFF; display: none; box-shadow: -0.26rem var(--6) var(--10) var(--6) rgba(0, 0, 0, 0.08); border-radius: var(--10); padding: var(--12) var(--16); top:80% } .wrapper_mypage_reserve_payment .topBox .listCount .info span { color: #000; } .wrapper_mypage_reserve_payment .topBox .listCount .info :after { content: ""; display: block; top: -0.23rem; position: absolute; left:50%; transform: translateX(-50%); width: 0; height: 0; border-left: var(--6) solid transparent; border-right: var(--6) solid transparent; border-bottom: var(--6) solid #909090; } .wrapper_mypage_reserve_payment .topBox .delBtn { height: 100%; padding: 0 var(--16); font-size: var(--24); color: #797979; } /*예역상태 공통*/ .wrapper_mypage_reserve_payment ._resStatus { display: inline-flex; align-items: center; height: var(--44); padding: 0 var(--14); font-size: var(--24); border-radius: var(--8); color: #fff; align-self: flex-start; white-space: nowrap; } .wrapper_mypage_reserve_payment ._resStatus.confirmed { background-color: #37BE60; } .wrapper_mypage_reserve_payment ._resStatus.modified { background-color: #A152F6; } .wrapper_mypage_reserve_payment ._resStatus.completed { background-color:#FFA841; } .wrapper_mypage_reserve_payment ._resStatus.cancelled { background-color: #EFEFEF; color: #727272 } .wrapper_mypage_reserve_payment ._resStatus.pending { background-color: #E2EFFF; color:#0084FF; } .wrapper_mypage_reserve_payment ._resStatus.telReserve { color: var(--colP); padding: 0; padding-right:var(--24); background-image: url(https://files.heally.co.kr/web-images/common/check_icon_p.webp); background-size: var(--16); background-position: right; height:var(--24); } /*예약리스트공통*/ .wrapper_mypage_reserve_payment .bookingList { min-height:calc(100vh - 3.77rem); background-color: #F0F0F0; padding: var(--30) var(--10); padding-top: calc(3.77rem + var(--100)); padding-bottom: var(--100); } .wrapper_mypage_reserve_payment .bookingList > ul { display: flex; gap: var(--30); flex-direction: column; } .wrapper_mypage_reserve_payment .bookingList > ul > li { background: #FFFFFF; width: 100%; border: 1px solid #FFFFFF; box-shadow: -4px var(--6) var(--6) rgba(0, 0, 0, 0.07); border-radius: var(--16); overflow: hidden; position: relative; gap: var(--30); border-radius:var(--16); display: flex; flex-direction: column; padding-bottom: var(--36); } .wrapper_mypage_reserve_payment .bookingList > ul > li .storeInfor:after { display: block; width: calc(100% - var(--64)); bottom: 0;; height: 1px; background-color: #DADADA; content: ""; position: absolute; left: 50%; transform: translateX(-50%); } /*바로결제-방문일/시간*/ .wrapper_mypage_reserve_payment .bookingList > ul > li .topInfo { background-color: #fafafa; height: var(--76); display: flex; align-items: center; padding: 0 var(--32); font-size: var(--24); font-weight: 600; } /*전화예약*/ .wrapper_mypage_reserve_payment .bookingList.phone .storeInfor { padding-top:var(--36); } .wrapper_mypage_reserve_payment .bookingList.phone .storeInfor .infoBox .detailList { padding: 0; } .wrapper_mypage_reserve_payment .bookingList.phone .storeInfor .infoBox .top { gap: var(--16); } /*예약리스트 삭제 버튼*/ .wrapper_mypage_reserve_payment .bookingList > ul > li .delBtn {display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; width: var(--76);; height: var(--76); } .wrapper_mypage_reserve_payment .bookingList > ul > li .delBtn img { width: var(--22); } .wrapper_mypage_reserve_payment .bookingList > ul > li .reasonBox{background-color: #fafafa; padding: var(--42) var(--32); display: flex; flex-direction: column; gap: var(--20);} /*썸네일 + 가게정보*/ .wrapper_mypage_reserve_payment .storeInfor { display: flex; gap: var(--24); position: relative; padding: 0 var(--32); padding-bottom: var(--30); } .wrapper_mypage_reserve_payment .storeInfor > img { width: var(--200); height: var(--220); border-radius: var(--10); object-fit: cover; } .wrapper_mypage_reserve_payment .storeInfor .infoBox { display: flex; flex-direction: column; padding: var(--10) 0; width: calc(100% - (var(--200) + var(--24))); justify-content: space-between; } .wrapper_mypage_reserve_payment .storeInfor .infoBox .top { display: flex; width: 100%; position: relative; flex-direction: column; gap: var(--20); flex-wrap: wrap; } .wrapper_mypage_reserve_payment .storeInfor .infoBox .top .detailBtn { position: absolute; right:-0.75rem; top: 0; color:#929292; height: var(--44); font-size: var(--24); padding-right: var(--40); padding-left: var(--20); background-image: url(https://files.heally.co.kr/web-images/_arrow/right_g.png); background-position: calc(100% - var(--20)); background-size:var(--10); } .wrapper_mypage_reserve_payment .storeInfor .infoBox .storName { line-height: var(--30); font-size: var(--30); font-weight: 500; letter-spacing: -0.03rem; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*타이틀+텍스트 예약 정보*/ .wrapper_mypage_reserve_payment .detailList { padding: 0 var(--32); display: flex; flex-direction: column; gap: var(--24); } .wrapper_mypage_reserve_payment .titTxtBox { display: flex; align-items: center; justify-content: space-between; } .wrapper_mypage_reserve_payment .titTxtBox > div { font-size: var(--24); line-height: var(--26); } .wrapper_mypage_reserve_payment .titTxtBox .tit { color: #929292; } .wrapper_mypage_reserve_payment .titTxtBox .txt span { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--340); } .wrapper_mypage_reserve_payment .titTxtBox .txt.amount { font-size: var(--26); font-weight: 500; } .wrapper_mypage_reserve_payment /*변경요청사유/취소사유*/ .wrapper_mypage_reserve_payment .reasonBox { background-color: #fafafa; padding: var(--42) var(--32); display: flex; flex-direction: column; gap:var(--20) } .wrapper_mypage_reserve_payment .reasonBox .top { display: flex; justify-content: space-between; align-items: center; } .wrapper_mypage_reserve_payment .reasonBox .top .tit { font-size: var(--26); font-weight: 500; } .wrapper_mypage_reserve_payment .reasonBox .top .sub { font-size: var(--24); color: #595959; } .wrapper_mypage_reserve_payment .reasonBox .txt { font-size: var(--24); line-height: var(--38); color: #595959; margin: var(--10) var(--20);} /*예약변경*/ .wrapper_mypage_reserve_payment .resChangeArea { display: flex; flex-direction: column; gap: var(--36); padding: var(--42) var(--32); padding-bottom: 0; } .wrapper_mypage_reserve_payment .resChangeArea .top { display: flex; justify-content: space-between; align-items: center; } .wrapper_mypage_reserve_payment .resChangeArea .top .tit { font-size: var(--26); font-weight: 500; } .wrapper_mypage_reserve_payment .resChangeArea .top .sub { font-size: var(--24); color: #929292; } .wrapper_mypage_reserve_payment .resChangeArea .top .sub span { color: #000; font-weight: 500; } .wrapper_mypage_reserve_payment .resChangeArea .setBtn { padding: 0; } /*예약변경 설정 묶음*/ .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox { display: flex; flex-direction: column; gap: var(--20); } .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .day { font-size: var(--24); line-height: var(--24); } /*예약변경 슬라이드설정*/ .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .timeSet { position: relative; } .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .timeSet ul::-webkit-scrollbar { display: none; } .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .timeSet ul { scrollbar-width: none; -ms-overflow-style: none; display: flex; position: relative; gap: var(--10); overflow: auto; padding-right: var(--100); } .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .timeSet:after { position: absolute; right:calc(var(--6) - var(--38)); top: 0; width: var(--64); display: none; content: ""; background-size: var(--16); background-position: center; height: 100%; background-color: #fff; background-image: url(https://files.heally.co.kr/web-images/_arrow/down_right_dg_v2.webp); background-repeat: no-repeat; } .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .timeSet.scrollable:after { display: block; } .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .timeSet li { position: relative; } .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .timeSet li input { position: absolute; width: 100%; height: 100%; left: 0; top:0; opacity: 0; } .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .timeSet li input:checked + div { background-color: var(--colP); color: #fff; } .wrapper_mypage_reserve_payment .resChangeArea .resModifyBox .timeSet li div { width: var(--96); height: var(--86); transition: 0.1s all; background-color: #FFECF2; font-size: var(--26); border-radius: var(--10); line-height: var(--86); text-align: center; } /*버튼 묶음*/ .wrapper_mypage_reserve_payment .setBtn { padding: 0 var(--32); text-align: center; display: flex; flex-direction: column; gap: var(--20); } .wrapper_mypage_reserve_payment .setBtn .txt { font-size: var(--24); line-height: var(--24); } .wrapper_mypage_reserve_payment .setBtn .btnBox { display: flex;; gap: var(--24); } .wrapper_mypage_reserve_payment .setBtn .btnBox button { flex:1; font-size: var(--26); border-radius: var(--10); height: var(--80); } .wrapper_mypage_reserve_payment .setBtn .btnBox button.colG { background-color: #F0F0F0; } .wrapper_mypage_reserve_payment .setBtn .btnBox button.colP { background-color: #fff; border: 1px solid var(--colP); color: var(--colP); } .wrapper_mypage_reserve_payment .setBtn .btnBox button.colLineG { background-color: #fff; border: 1px solid #CBCBCB; } .wrapper_mypage_reserve_payment .setBtn .sub { text-align: left; font-size: var(--22); } .wrapper_mypage_reserve_payment .setBtn .sub span { color: var(--colP); font-size: var(--22); } .wrapper_mypage_reserve_payment .setBtn .btnBox button:disabled { border:0; background-color: #e9e9e9; color: #a6a6a6; } .wrapper_mypage_reserve_payment .setBtn .btnBox button.shop_safe{background-color: #fff;border: 1px solid var(--colP);} .wrapper_mypage_reserve_payment .setBtn .btnBox button.shop_safe span{color: var(--colP);font-weight:600;} .wrapper_mypage_reserve_payment .setBtn .btnBox .safe-tooltip{ position: absolute;top: -2.17rem;right: -0.1rem; background-color: #ff3f4d;color: #fff;font-size: 0.79rem;padding: 0.41rem 0.54rem;border-radius: 0.37rem;} .wrapper_mypage_reserve_payment .setBtn .btnBox .safe-tooltip:after{content: "";display: block;width: 0.41rem;height: 0.26rem;background-image: url(https://files.heally.co.kr/web-images/detail/msginfor.png);position: absolute;bottom: -0.26rem;right: 1.2rem;background-size: 100%;} /*데이터 없을때*/ .wrapper_mypage_reserve_payment .emptyMessage { top: calc(3.77rem + var(--100));; padding-top: 42%; position: absolute; left: 0; text-align: center; width: 100%; } .wrapper_mypage_reserve_payment .emptyMessage img { width: var(--140); } .wrapper_mypage_reserve_payment .emptyMessage .txt { margin-top: var(--40); font-size:var(--28); color: #9e9e9e; line-height: var(--42); } .wrapper_mypage_reserve_payment .emptyMessage .txt span { font-size: var(--24); } .wrapper_mypage_reserve_payment /*상세*/ .wrapper_mypage_reserve_payment .bookingDetail { position: relative; } .wrapper_mypage_reserve_payment .bookingDetail > .setBtn:after { display: block; width: calc(100% - var(--72)); top: 0; height: 1px; background-color: #DADADA; content: ""; position: absolute; left: 50%; transform: translateX(-50%); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.cancelAmount > .tit div { color: #FF0000; } .wrapper_mypage_reserve_payment .bookingDetail .setBtn { padding: var(--36); position: relative; } .wrapper_mypage_reserve_payment .bookingDetail .resChangeArea .setBtn { padding: 0; } .wrapper_mypage_reserve_payment .bookingDetail .resChangeArea { padding: var(--42) var(--36); } /*상세-삭제버튼*/ .wrapper_mypage_reserve_payment .bookingDetail .delBtn { z-index: 1; position: absolute; right: 0; top: 0; width: var(--76); height: var(--76); display: flex; align-items: center; justify-content: center; } .wrapper_mypage_reserve_payment .bookingDetail .delBtn img { width: var(--22); } .wrapper_mypage_reserve_payment .bookingDetail .storeInfor { padding: var(--30) var(--36); } /*상세-전화걸기,길찾기,택시,대리운전*/ .wrapper_mypage_reserve_payment .bookingDetail .storBtnBox { display: flex; padding: var(--30) var(--36); padding-top: 0; gap: var(--16); width: 100%; border-bottom: 1px solid #E3E3E3; flex-direction: row; gap: var(--16); } .wrapper_mypage_reserve_payment .bookingDetail .storBtnBox button { background-color: #FAFAFA; border-radius: var(--10); padding: var(--18) 0 var(--24); display: flex; flex-direction: column; align-items: center; width: calc((100% / 4)); gap: var(--12); font-size: var(--24); line-height: var(--24); } .wrapper_mypage_reserve_payment .bookingDetail .storBtnBox button img { width: var(--48); } /*상세-방문시간*/ .wrapper_mypage_reserve_payment .bookingDetail .visitDate { border-top: var(--18) solid #f5f6f8; padding: var(--30) var(--36); display: flex; justify-content: space-between; background-color: #FAFAFA; } .wrapper_mypage_reserve_payment .bookingDetail .visitDate div { font-size: var(--26); line-height: var(--26); font-weight: 500; } /*상세-변경요청사유/취소사유*/ .wrapper_mypage_reserve_payment .bookingDetail .reasonBox + .detailBox:after { display: none; } .wrapper_mypage_reserve_payment .bookingDetail .reasonBox { padding: var(--42) var(--36); } /*상세 묶음 - 타이틀+텍스트 예약 정보*/ .wrapper_mypage_reserve_payment .bookingDetail .detailBox { padding: var(--36); display: flex; flex-direction: column; gap: var(--36); position: relative; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox:after { display: block; width: calc(100% - var(--72)); top: 0; height: 1px; background-color: #DADADA; content: ""; position: absolute; left: 50%; transform: translateX(-50%); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.reservinfo:after { display: none; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList { padding: 0; gap: var(--32); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox > .tit { display: flex; justify-content: space-between; font-size: var(--26); line-height: var(--26); font-weight: 500; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox > .tit div { font-weight: 500; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox { align-items: start; gap: var(--50); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox .txt { display: flex; flex: 1; gap: var(--24); flex-direction: column; font-size: var(--26); text-align: right; line-height: var(--26); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox .txt .box { line-height: var(--40); overflow: visible; white-space:initial; max-width: 100%; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox.red div { color:#FF6E6E; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox .tit .txtBox { display: flex; align-items: center; gap: var(--10); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox .tit .txtBox img { width: var(--24); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox > .txt ul { display: flex; justify-content: end; gap: var(--10); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox > .txt ul li { position: relative; padding-left: var(--10); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox > .txt ul li:first-child:after { display: none; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox > .txt ul li:first-child { padding-left: 0; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox > .txt ul li:after { content: ""; display: block; position: absolute; left: 0;; width: 1px; height: var(--22); top: 50%; transform: translateY(-50%); background-color: #DBDBDB; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox.red.info > .txt ul li:after { background-color: #FF6E6E; } /*취소정보 클릭 텍스트open,close*/ .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox.info .tit { position: relative; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox.info input { position: absolute; left: 0; top: 0;; width: 100%; height: 100%; opacity: 0; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox.info .info { position: absolute; top: var(--42); left: 0;; color: #595959; z-index: 1; display: none; white-space: nowrap; font-size: var(--22); background: #FFFFFF; box-shadow: -0.26rem var(--6) var(--10) var(--6) rgba(0, 0, 0, 0.08); border-radius: var(--10); padding: var(--12) var(--16); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox.info .info span{color: #000;} .wrapper_mypage_reserve_payment .bookingDetail .detailBox .detailList .titTxtBox.info input:checked + .info { display: block; } /*변경가능 남은시간*/ .wrapper_mypage_reserve_payment .timerBox { background-color: #f8f8f8; padding: var(--60) 0 var(--40); display: flex; flex-direction: column; gap: var(--24); align-items: center; } .wrapper_mypage_reserve_payment .timerBox .tit { color: #929292; font-size: var(--28); line-height: var(--28); } .wrapper_mypage_reserve_payment .timerBox .time { font-size: var(--42); line-height: var(--42); color: var(--colP); font-weight: 500; } /*카카오 open/close*/ .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao input + .hideBtn + .titTxtBox { display: none; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao input:checked + .hideBtn + .titTxtBox { display: flex; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao { padding-bottom:calc(var(--150) - var(--6)); position: relative; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao > input, .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao .hideBtn { position: absolute; width:calc(100% - var(--72)); bottom:var(--36); height: var(--72); left: 50%; transform: translateX(-50%); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao > input { z-index: 1; opacity: 0; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao .hideBtn { background-color:#fafafa; border-radius: var(--10); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao .hideBtn span { font-size: var(--24); color: #929292; padding:0 var(--30); background-image: url(https://files.heally.co.kr/web-images/_arrow/down_g.png); background-size: var(--16); background-position: right; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao input:checked + .hideBtn span { background-image: url(https://files.heally.co.kr/web-images/_arrow/up_g.png); } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao .detailList .hide { display: none; } .wrapper_mypage_reserve_payment .bookingDetail .detailBox.kakao input:checked + .hideBtn + .detailList .hide { display: flex; } .wrapper_mypage_reserve_payment .blank.store_reservation{margin-top:0px;} .header_mypage_reserve_payment ._pagename span {font-weight: 550;} .wrapper_mypage_reserve_payment_detail .bookingDetail {position: relative;} .wrapper_mypage_reserve_payment_detail ._pageColorTab { position: absolute; top:3.77rem; z-index: 1; width: 100%; background-color: #fff; display: flex; border-bottom: 1px solid #DADADA; border-top: 1px solid #DADADA; height: var(--92); } .wrapper_mypage_reserve_payment_detail ._pageColorTab li:last-child:after { content: ""; display: block; width: 1px; height: var(--30); background-color: #DADADA; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .wrapper_mypage_reserve_payment_detail ._pageColorTab li { flex:1; position: relative; display: flex; justify-content: center; align-items: center; } .wrapper_mypage_reserve_payment_detail ._pageColorTab li span { font-size: var(--30); font-weight: 500; padding: 0 var(--10); } .wrapper_mypage_reserve_payment_detail ._pageColorTab li.on span { background: linear-gradient(to bottom, #ffffff 0%, #ffffff 60%, #FFEDF4 60%, #FFEDF4 100%); color: var(--colP); } .wrapper_mypage_reserve_payment_detail .topBox { position: absolute; top:calc(3.77rem + var(--92)); width: 100%; z-index: 1; background-color: #fff; height: var(--86); border-bottom: 1px solid #DADADA; display: flex; justify-content: space-between; padding:0 var(--16); } .wrapper_mypage_reserve_payment_detail .topBox > div { display: flex; align-items: center; } .wrapper_mypage_reserve_payment_detail .topBox .filter { display: flex; position: relative; height: 100%; } .wrapper_mypage_reserve_payment_detail .topBox .filter .btn { background-image: url(https://files.heally.co.kr/web-images/common/array_btn_icon.png); background-size: var(--24); padding-left: var(--56); padding-right: var(--20); background-position: var(--20); font-size: var(--24); font-weight: 500; } .wrapper_mypage_reserve_payment_detail .topBox .filter input { position: absolute; left: 0; top: 0; opacity: 0; width:var(--160); height: 100%; } .wrapper_mypage_reserve_payment_detail .topBox .filter input:checked + ul { display: block; } .wrapper_mypage_reserve_payment_detail .topBox .filter ul { position: absolute; top:var(--72); left:0;; display: flex; flex-direction: column; border: 1px solid #eaeaea; padding:var(--16) var(--10); border-radius: var(--10); box-shadow: -0.27rem var(--12) var(--16) 0 rgb(0 0 0 / 15%); z-index: 1; gap: var(--10); background-color: #fff; display: none; } .wrapper_mypage_reserve_payment_detail .topBox .filter:after { content: ""; display: block; width: 1px; height: var(--30); background-color: #DADADA; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .wrapper_mypage_reserve_payment_detail .topBox .filter ul li { display: flex; justify-content: center; align-items: center; padding: 0 var(--30); height: var(--64); } .wrapper_mypage_reserve_payment_detail .topBox .filter ul li button { font-size: var(--24); white-space: nowrap; } .wrapper_mypage_reserve_payment_detail .topBox .listCount { height: 100%; position: relative; padding: 0 var(--20); } .wrapper_mypage_reserve_payment_detail .topBox .listCount .txtBox { display: flex; gap: var(--10); height: 100%; align-items: center; } .wrapper_mypage_reserve_payment_detail .topBox .listCount .txtBox .txt { font-size: var(--24); font-weight: 500; line-height: var(--24); } .wrapper_mypage_reserve_payment_detail .topBox .listCount .txtBox img { width: var(--24); } .wrapper_mypage_reserve_payment_detail .topBox .listCount .txt span { color: var(--colP); } .wrapper_mypage_reserve_payment_detail .topBox .listCount input { position: absolute; left: 0; top: 0; opacity: 0; width:100%; height: 100%; } .wrapper_mypage_reserve_payment_detail .topBox .listCount input:checked + .info { display: block; } .wrapper_mypage_reserve_payment_detail .topBox .listCount .info { z-index: 1; position: absolute; left: var(--12); color: #626262; white-space: nowrap; font-size: var(--22); background: #FFFFFF; display: none; box-shadow: -0.26rem var(--6) var(--10) var(--6) rgba(0, 0, 0, 0.08); border-radius: var(--10); padding: var(--12) var(--16); top:80% } .wrapper_mypage_reserve_payment_detail .topBox .listCount .info span { color: #000; } .wrapper_mypage_reserve_payment_detail .topBox .listCount .info :after { content: ""; display: block; top: -0.23rem; position: absolute; left:50%; transform: translateX(-50%); width: 0; height: 0; border-left: var(--6) solid transparent; border-right: var(--6) solid transparent; border-bottom: var(--6) solid #909090; } .wrapper_mypage_reserve_payment_detail .topBox .delBtn { height: 100%; padding: 0 var(--16); font-size: var(--24); color: #797979; } /*예역상태 공통*/ .wrapper_mypage_reserve_payment_detail ._resStatus { display: inline-flex; align-items: center; height: var(--44); padding: 0 var(--14); font-size: var(--24); border-radius: var(--8); color: #fff; align-self: flex-start; white-space: nowrap; } .wrapper_mypage_reserve_payment_detail ._resStatus.confirmed { background-color: #37BE60; } .wrapper_mypage_reserve_payment_detail ._resStatus.modified { background-color: #A152F6; } .wrapper_mypage_reserve_payment_detail ._resStatus.completed { background-color:#FFA841; } .wrapper_mypage_reserve_payment_detail ._resStatus.cancelled { background-color: #EFEFEF; color: #727272 } .wrapper_mypage_reserve_payment_detail ._resStatus.pending { background-color: #E2EFFF; color:#0084FF; } .wrapper_mypage_reserve_payment_detail ._resStatus.telReserve { color: var(--colP); padding: 0; padding-right:var(--24); background-image: url(https://files.heally.co.kr/web-images/common/check_icon_p.webp); background-size: var(--16); background-position: right; height:var(--24); } /*예약리스트공통*/ .wrapper_mypage_reserve_payment_detail .bookingList { min-height:calc(100vh - 3.77rem); background-color: #F0F0F0; padding: var(--30) var(--10); padding-top: calc(3.77rem + var(--100)); padding-bottom: var(--100); } .wrapper_mypage_reserve_payment_detail .bookingList > ul { display: flex; gap: var(--30); flex-direction: column; } .wrapper_mypage_reserve_payment_detail .bookingList > ul > li { background: #FFFFFF; width: 100%; border: 1px solid #FFFFFF; box-shadow: -4px var(--6) var(--6) rgba(0, 0, 0, 0.07); border-radius: var(--16); overflow: hidden; position: relative; gap: var(--30); border-radius:var(--16); display: flex; flex-direction: column; padding-bottom: var(--36); } .wrapper_mypage_reserve_payment_detail .bookingList > ul > li .storeInfor:after { display: block; width: calc(100% - var(--64)); bottom: 0;; height: 1px; background-color: #DADADA; content: ""; position: absolute; left: 50%; transform: translateX(-50%); } /*바로결제-방문일/시간*/ .wrapper_mypage_reserve_payment_detail .bookingList > ul > li .topInfo { background-color: #fafafa; height: var(--76); display: flex; align-items: center; padding: 0 var(--32); font-size: var(--24); font-weight: 600; } /*전화예약*/ .wrapper_mypage_reserve_payment_detail .bookingList.phone .storeInfor { padding-top:var(--36); } .wrapper_mypage_reserve_payment_detail .bookingList.phone .storeInfor .infoBox .detailList { padding: 0; } .wrapper_mypage_reserve_payment_detail .bookingList.phone .storeInfor .infoBox .top { gap: var(--16); } /*예약리스트 삭제 버튼*/ .wrapper_mypage_reserve_payment_detail .bookingList > ul > li .delBtn {display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; width: var(--76);; height: var(--76); } .wrapper_mypage_reserve_payment_detail .bookingList > ul > li .delBtn img { width: var(--22); } .wrapper_mypage_reserve_payment_detail .bookingList > ul > li .reasonBox{background-color: #fafafa; padding: var(--42) var(--32); display: flex; flex-direction: column; gap: var(--20);} /*썸네일 + 가게정보*/ .wrapper_mypage_reserve_payment_detail .storeInfor { display: flex; gap: var(--24); position: relative; padding: 0 var(--32); padding-bottom: var(--30); } .wrapper_mypage_reserve_payment_detail .storeInfor > img { width: 6.65rem; height: 7.19rem; border-radius: var(--10); object-fit: cover; } .wrapper_mypage_reserve_payment_detail .storeInfor .infoBox { display: flex; flex-direction: column; padding-bottom: var(--10); width: calc(100% - (var(--200) + var(--24))); justify-content: space-between; } .wrapper_mypage_reserve_payment_detail .storeInfor .infoBox .top { display: flex; width: 100%; position: relative; flex-direction: column; gap: var(--12); flex-wrap: wrap; } .wrapper_mypage_reserve_payment_detail .storeInfor .infoBox .top .detailBtn { position: absolute; right:-0.75rem; top: 0; color:#929292; height: var(--44); font-size: var(--24); padding-right: var(--40); padding-left: var(--20); background-image: url(https://files.heally.co.kr/web-images/_arrow/right_g.png); background-position: calc(100% - var(--20)); background-size:var(--10); } .wrapper_mypage_reserve_payment_detail .storeInfor .infoBox .storName { line-height: var(--30); font-size: var(--30); font-weight: 500; letter-spacing: -0.03rem; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*타이틀+텍스트 예약 정보*/ .wrapper_mypage_reserve_payment_detail .detailList { padding: 0 var(--32); display: flex; flex-direction: column; gap: var(--24); } .wrapper_mypage_reserve_payment_detail .titTxtBox { display: flex; align-items: center; justify-content: space-between; } .wrapper_mypage_reserve_payment_detail .titTxtBox > div { font-size: var(--24); line-height: var(--26); } .wrapper_mypage_reserve_payment_detail .titTxtBox .tit { color: #929292; } .wrapper_mypage_reserve_payment_detail .titTxtBox .txt span { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--340); } .wrapper_mypage_reserve_payment_detail .titTxtBox .txt.amount { font-size: var(--26); font-weight: 500; } .wrapper_mypage_reserve_payment_detail /*변경요청사유/취소사유*/ .wrapper_mypage_reserve_payment_detail .reasonBox { background-color: #fafafa; padding: var(--42) var(--32); display: flex; flex-direction: column; gap:var(--20) } .wrapper_mypage_reserve_payment_detail .reasonBox .top { display: flex; justify-content: space-between; align-items: center; } .wrapper_mypage_reserve_payment_detail .reasonBox .top .tit { font-size: var(--26); font-weight: 500; } .wrapper_mypage_reserve_payment_detail .reasonBox .top .sub { font-size: var(--24); color: #595959; } .wrapper_mypage_reserve_payment_detail .reasonBox .txt { font-size: var(--24); line-height: var(--38); color: #595959; margin: var(--10) var(--20) var(--10) 0;word-break: break-all;} /*예약변경*/ .wrapper_mypage_reserve_payment_detail .resChangeArea { display: flex; flex-direction: column; gap: var(--36); padding: var(--42) var(--32); padding-bottom: 0; } .wrapper_mypage_reserve_payment_detail .resChangeArea .top { display: flex; justify-content: space-between; align-items: center; } .wrapper_mypage_reserve_payment_detail .resChangeArea .top .tit { font-size: var(--26); font-weight: 500; } .wrapper_mypage_reserve_payment_detail .resChangeArea .top .sub { font-size: var(--24); color: #929292; } .wrapper_mypage_reserve_payment_detail .resChangeArea .top .sub span { color: #000; font-weight: 500; } .wrapper_mypage_reserve_payment_detail .resChangeArea .setBtn { padding: 0; } /*예약변경 설정 묶음*/ .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox { display: flex; flex-direction: column; gap: var(--20); } .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .day { font-size: var(--24); line-height: var(--24); } /*예약변경 슬라이드설정*/ .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .timeSet { position: relative; } /*display: grid; gap: var(--10);*/ .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .timeSet ul::-webkit-scrollbar { display: none; } .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .timeSet ul { scrollbar-width: none; -ms-overflow-style: none; display: flex; position: relative; gap: var(--10); overflow: auto; padding-right: var(--100); } .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .timeSet:after { position: absolute; right:calc(var(--6) - var(--38)); top: 0; width: var(--64); display: none; content: ""; background-size: var(--16); background-position: center; height: 100%; background-color: #fff; background-image: url(https://files.heally.co.kr/web-images/_arrow/down_right_dg_v2.webp); background-repeat: no-repeat; } .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .timeSet.scrollable:after { display: block; } .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .timeSet li { position: relative; } .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .timeSet li input { position: absolute; width: 100%; height: 100%; left: 0; top:0; opacity: 0; } .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .timeSet li input:checked + div { background-color: var(--colP); color: #fff; } .wrapper_mypage_reserve_payment_detail .resChangeArea .resModifyBox .timeSet li div { width: var(--96); height: var(--86); transition: 0.1s all; background-color: #FFECF2; font-size: var(--26); border-radius: var(--10); line-height: var(--86); text-align: center; } /*버튼 묶음*/ .wrapper_mypage_reserve_payment_detail .setBtn { padding: 0 var(--32); text-align: center; display: flex; flex-direction: column; gap: var(--20); } .wrapper_mypage_reserve_payment_detail .setBtn .txt { font-size: var(--24); line-height: var(--24); } .wrapper_mypage_reserve_payment_detail .setBtn .btnBox { display: flex;; gap: var(--24); } .wrapper_mypage_reserve_payment_detail .setBtn .btnBox button { flex:1; font-size: var(--26); border-radius: var(--10); height: var(--80); } .wrapper_mypage_reserve_payment_detail .setBtn .btnBox button.colG { background-color: #F0F0F0; } .wrapper_mypage_reserve_payment_detail .setBtn .btnBox button.colP { background-color: #fff; border: 1px solid var(--colP); color: var(--colP); } .wrapper_mypage_reserve_payment_detail .setBtn .btnBox button.colLineG { background-color: #fff; border: 1px solid #CBCBCB; } .wrapper_mypage_reserve_payment_detail .setBtn .sub { text-align: left; font-size: var(--22); } .wrapper_mypage_reserve_payment_detail .setBtn .sub span { color: var(--colP); font-size: var(--22); } .wrapper_mypage_reserve_payment_detail .setBtn .btnBox button:disabled { border:0; background-color: #e9e9e9; color: #a6a6a6; } /*데이터 없을때*/ .wrapper_mypage_reserve_payment_detail .emptyMessage { top: calc(3.77rem + var(--100));; padding-top: 42%; position: absolute; left: 0; text-align: center; width: 100%; } .wrapper_mypage_reserve_payment_detail .emptyMessage img { width: var(--140); } .wrapper_mypage_reserve_payment_detail .emptyMessage .txt { margin-top: var(--40); font-size:var(--28); color: #9e9e9e; line-height: var(--42); } .wrapper_mypage_reserve_payment_detail .emptyMessage .txt span { font-size: var(--24); } .wrapper_mypage_reserve_payment_detail /*상세*/ .wrapper_mypage_reserve_payment_detail .bookingDetail { position: relative; } .wrapper_mypage_reserve_payment_detail .bookingDetail > .setBtn:after { display: block; width: calc(100% - var(--72)); top: 0; height: 1px; background-color: #DADADA; content: ""; position: absolute; left: 50%; transform: translateX(-50%); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.cancelAmount > .tit div { color: #FF0000; } .wrapper_mypage_reserve_payment_detail .bookingDetail .setBtn { padding: var(--36); position: relative; } .wrapper_mypage_reserve_payment_detail .bookingDetail .resChangeArea .setBtn { padding: 0; } .wrapper_mypage_reserve_payment_detail .bookingDetail .resChangeArea { padding: var(--42) var(--36); } /*상세-삭제버튼*/ .wrapper_mypage_reserve_payment_detail .bookingDetail .delBtn { z-index: 1; position: absolute; right: 0;top: 0; width: var(--76); height: var(--76); display: flex; align-items: center; justify-content: center; } .wrapper_mypage_reserve_payment_detail .bookingDetail .delBtn img { width: var(--22); } .wrapper_mypage_reserve_payment_detail .bookingDetail .storeInfor { padding: var(--30) var(--36); padding-bottom:1.09rem; } /*상세-전화걸기,길찾기,택시,대리운전*/ .wrapper_mypage_reserve_payment_detail .bookingDetail .storBtnBox { display: flex; padding: var(--30) var(--36); padding-top: 0; gap: var(--16); width: 100%; border-bottom: 1px solid #E3E3E3; flex-direction: row; gap: var(--16);padding-bottom:1.09rem; } .wrapper_mypage_reserve_payment_detail .bookingDetail .storBtnBox button { border-radius: var(--10); padding: var(--18) 0 var(--24); display: flex; flex-direction: column; align-items: center; width: calc((100% / 4)); gap: var(--12); font-size: var(--24); line-height: var(--24); background-color:#fafafa;} .wrapper_mypage_reserve_payment_detail .bookingDetail .storBtnBox button img { width: 35%; } /*상세-방문시간*/ .wrapper_mypage_reserve_payment_detail .bookingDetail .visitDate { border-top: var(--18) solid #f5f6f8; padding: var(--30) var(--36); display: flex; justify-content: space-between; background-color: #FAFAFA; } .wrapper_mypage_reserve_payment_detail .bookingDetail .visitDate div { font-size: var(--26); line-height: var(--26); font-weight: 500; } /*상세-변경요청사유/취소사유*/ .wrapper_mypage_reserve_payment_detail .bookingDetail .reasonBox + .detailBox:after { display: none; } .wrapper_mypage_reserve_payment_detail .bookingDetail .reasonBox { padding: var(--42) var(--36); background-color: #fafafa;} .wrapper_mypage_reserve_payment_detail .bookingDetail .reasonBox._v2{margin-bottom: var(--7);} /*상세 묶음 - 타이틀+텍스트 예약 정보*/ .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox { padding: var(--36); display: flex; flex-direction: column; gap: var(--36); position: relative; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox:after { display: block; width: calc(100% - var(--72)); top: 0; height: 1px; background-color: #DADADA; content: ""; position: absolute; left: 50%; transform: translateX(-50%); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.reservinfo:after { display: none; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList { padding: 0; gap: var(--32); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox > .tit { display: flex; justify-content: space-between; font-size: var(--26); line-height: var(--26); font-weight: 500; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox > .tit div { font-weight: 500; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox { align-items: start; gap: var(--30); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox .txt { display: flex; flex: 1; gap: var(--24); flex-direction: column; font-size: var(--26); text-align: right; line-height: var(--26); border: 0 !important;} .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox .txt .box { line-height: var(--40); overflow: visible; white-space:initial; max-width: 100%; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox.red div { color:#FF6E6E; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox .tit .txtBox { display: flex; align-items: center; gap: var(--10); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox .tit .txtBox img { width: var(--24); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox > .txt ul { display: flex; justify-content: end; gap: var(--10); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox > .txt ul li { position: relative; padding-left: var(--10); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox > .txt ul li:first-child:after { display: none; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox > .txt ul li:first-child { padding-left: 0; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox > .txt ul li:after { content: ""; display: block; position: absolute; left: 0;; width: 1px; height: var(--22); top: 50%; transform: translateY(-50%); background-color: #DBDBDB; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox > .txt ul li:last-child:after{display: none;} .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox.red.info > .txt ul li:after { background-color: #FF6E6E; } /*취소정보 클릭 텍스트open,close*/ .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox.info .tit { position: relative; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox.info input { position: absolute; left: 0; top: 0;; width: 100%; height: 100%; opacity: 0; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox.info .info { position: absolute; top: var(--42); left: 0;; color: #595959; z-index: 1; display: none; white-space: nowrap; font-size: var(--22); background: #FFFFFF; box-shadow: -0.26rem var(--6) var(--10) var(--6) rgba(0, 0, 0, 0.08); border-radius: var(--10); padding: var(--12) var(--16); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox.info .info span{color: #000;} .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox .detailList .titTxtBox.info input:checked + .info { display: block; } /*변경가능 남은시간*/ .wrapper_mypage_reserve_payment_detail .timerBox { background-color: #f8f8f8; padding: var(--60) 0 var(--40); display: flex; flex-direction: column; gap: var(--24); align-items: center; } .wrapper_mypage_reserve_payment_detail .timerBox .tit { color: #929292; font-size: var(--28); line-height: var(--28); } .wrapper_mypage_reserve_payment_detail .timerBox .time { font-size: var(--42); line-height: var(--42); color: var(--colP); font-weight: 500; } /*카카오 open/close*/ .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao input + .hideBtn + .titTxtBox { display: none; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao input:checked + .hideBtn + .titTxtBox { display: flex; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao { padding-bottom:calc(var(--150) - var(--6)); position: relative; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao > input, .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao .hideBtn { position: absolute; width:calc(100% - var(--72)); bottom:var(--36); height: var(--72); left: 50%; transform: translateX(-50%); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao > input { z-index: 1; opacity: 0; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao .hideBtn { background-color:#fafafa; border-radius: var(--10); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao .hideBtn span { font-size: var(--24); color: #929292; padding:0 var(--30); background-image: url(https://files.heally.co.kr/web-images/_arrow/down_g.png); background-size: var(--16); background-position: right; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao input:checked + .hideBtn span { background-image: url(https://files.heally.co.kr/web-images/_arrow/up_g.png); } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao .detailList .hide { display: none; } .wrapper_mypage_reserve_payment_detail .bookingDetail .detailBox.kakao input:checked + .hideBtn + .detailList .hide { display: flex; } /*dev*/ .wrapper_mypage_reserve_payment_detail .infoBox ._infoDetail {display: flex; gap: var(--10);} .wrapper_mypage_reserve_payment_detail .infoBox ._infoDetail li{color: #797979; font-size: var(--23); line-height: var(--23); position: relative; padding-right: var(--10); display: flex; gap: var(--8); align-items: center;} .wrapper_mypage_reserve_payment_detail .infoBox ._infoDetail li:after{content: ""; display: block; width: 1px; height: var(--16); background-color: #CACACA; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} .wrapper_mypage_reserve_payment_detail .infoBox ._infoDetail li:last-child {padding-right: 0;} .wrapper_mypage_reserve_payment_detail .infoBox ._infoDetail li:last-child:after{display: none;} .wrapper_mypage_reserve_payment_detail .infoBox ._infoDetail li img {width: var(--20);} .wrapper_mypage_reserve_payment_detail {padding-bottom: var(--140);} .wrapper_mypage_reserve_payment_detail .setBtn .btnBox button.shop_safe{background-color: #fff;border: 1px solid var(--colP);} .wrapper_mypage_reserve_payment_detail .setBtn .btnBox button.shop_safe span{color: var(--colP);font-weight:600;} .wrapper_mypage_reserve_payment_detail .setBtn .btnBox .safe-tooltip{ position: absolute;top: -0.8rem;right:0.9rem; background-color: #ff3f4d;color: #fff;font-size: 0.79rem;padding: 0.41rem 0.54rem;border-radius: 0.37rem;z-index:9999;} .wrapper_mypage_reserve_payment_detail .setBtn .btnBox .safe-tooltip:after{content: "";display: block;width: 0.41rem;height: 0.26rem;background-image: url(https://files.heally.co.kr/web-images/detail/msginfor.png);position: absolute;bottom: -0.26rem;right: 1.2rem;background-size: 100%;} .wrapper_mypage_reserve_payment .infoBox .reimg { background-color: #000; width: 2.71rem; height: 1.28rem; /* 세로 크기도 맞춰줘야 가운데 정렬이 정확함 */ padding: 0.27rem; border-radius: 0.27rem; display: flex; align-items: center; /* 세로 중앙 */ justify-content: center; /* 가로 중앙 */ } .wrapper_mypage_reserve_payment .infoBox .reimg img.blgtag { max-width: 100%; max-height: 100%; } .wrapper_mypage_reserve_call .infoBox .reimg { background-color: #000; width: 2.71rem; height: 1.28rem; /* 세로 크기도 맞춰줘야 가운데 정렬이 정확함 */ padding: 0.27rem; border-radius: 0.27rem; display: flex; align-items: center; /* 세로 중앙 */ justify-content: center; /* 가로 중앙 */ } .wrapper_mypage_reserve_call .infoBox .reimg img.blgtag { max-width: 100%; max-height: 100%; } .wrapper_mypage_reserve_payment_detail .infoBox .reimg { background-color: #000; width: 2.71rem; height: 1.28rem; /* 세로 크기도 맞춰줘야 가운데 정렬이 정확함 */ padding: 0.27rem; border-radius: 0.27rem; display: flex; align-items: center; /* 세로 중앙 */ justify-content: center; /* 가로 중앙 */ } .wrapper_mypage_reserve_payment_detail .infoBox .reimg img.blgtag { max-width: 100%; max-height: 100%; } .safeLayer_bottom { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .safeLayer_bottom.active { display: block; } .safeLayer_bottom .layer-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } .safeLayer_bottom .layer-content { position: absolute; bottom: -100%; left: 0; width: 100%; background: #fff; border-radius: 1.25rem 1.25rem 0 0; transition: bottom 0.3s ease; padding: 1.25rem;box-sizing: border-box; } .safeLayer_bottom.active .layer-content { bottom: 0; } .safeLayer_bottom .layer-header { position: relative; margin-bottom: 1.25rem; } .safeLayer_bottom .layer-header h3 { font-size: var(--30); font-weight: 600; margin-bottom: 0.3125rem; padding-right: 1.875rem; } .safeLayer_bottom .layer-header h3 span{font-size: var(--30); font-weight: 600;color:#ff2a75;} .safeLayer_bottom .layer-header p { font-size: var(--24); color: #888; } .safeLayer_bottom .btn-close-layer { position: absolute; top: -0.3125rem;right: -0.3125rem;width: 1.25rem;height: 1.25rem;border: none; background: url('https://files.heally.co.kr/web-images/common/close_icon_gr.webp') no-repeat center;background-size: 1rem;padding: 0.625rem;box-sizing: content-box;cursor: pointer; } .safeLayer_bottom .shop-item { display: flex; align-items: center; padding: 0.6rem; border: 0.0625rem solid #eee; border-radius: 0.75rem; margin-bottom: 0.625rem; } .safeLayer_bottom .shop-item .thumb { width: 4.2rem; height: 4.2rem; background: #eee; border-radius: 0.5rem; margin-right: 0.9375rem; overflow: hidden; display: flex; align-items: center;justify-content: center;} .safeLayer_bottom .shop-item .thumb img {width: 100%;height: 100%;object-fit: cover;display: block;} .safeLayer_bottom .shop-item .info {flex: 1;min-width: 0;display: flex;flex-direction: column;} .safeLayer_bottom .shop-item .info .tag {display: block;font-size: var(--24);color: #888;margin-bottom: 0.3125rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;} .safeLayer_bottom .shop-item .info .tag::before {content: '';display: inline-block;vertical-align: middle;width: 0.875rem; height: 0.875rem;margin-right: 0.25rem;margin-top: -0.1rem; background: url('https://files.heally.co.kr/web-images/common/safeshop_badge.png') no-repeat center;background-size: contain;} .safeLayer_bottom .shop-item .info .tag span { color: #ff2a75; font-weight: 500; } .safeLayer_bottom .shop-item .info .name { font-size: var(--30); font-weight: 500; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; } .safeLayer_bottom .layer-footer { margin-top: 1.3rem; } .safeLayer_bottom .btn-more { width: 100%; padding: 0.9375rem;border: 1px solid #ff2a75; background: #fff; color: #333; border-radius: 0.5rem; font-weight: 500; font-size: 1rem;} .safeLayer_bottom .btn-more span{font-size:1rem;font-weight:600;color:#ff2a75;} .safeLayer_bottom .shop-item .info .tag span {color: #ff2a75;font-weight: 500;display: inline; }