:root {
    --primary-color: #573cfa;
    --sub1-color: #BFC3FF;
    --sub2-color: #CCFC06;
    --font-primary1: "NanumSquareNeoBold";
    --font-primary2: "NanumSquareNeoExtraBold";
    --font-primary3: "NanumSquareNeoHeavy";
    --font-point: "NPSfontRegular";
    --font-point2: "NPSfontBold";
}
/* ====== 마이페이지 ====== */

.my-top {padding: 20px; border-bottom: 8px solid #f5f5f5;}
.mypage-pro { display: flex; align-items: center; justify-content: space-between;}
.mypage-pro .mypro-info {display: flex; align-items: center; gap: 15px;}
.mypro-info .my-img {width: 65px; height: 65px; border-radius: 6px; overflow: hidden; border: 1px solid #eee;}
.mypro-info .my-txt {font-size: 18px; font-weight: 500;}
.mypro-info .my-txt b {font-weight: 700; color: var(--primary-color);}
.mypage-pro em {background: url(../img/angle3.png) no-repeat center/cover; width: 8px; height: 15px;}

.my-tit {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.my-tit h3 {font-size: 16px; font-weight: 600;}
.my-tit span {font-size: 12px; color: #777;}

.mypet {margin-top: 15px;}
.pet-info-wrap {display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid #eee; border-radius: 6px;}
.pet-info-wrap > em {background: url(../img/angle.png) no-repeat center/cover; width: 8px; height: 13px; flex-shrink: 0;}
.pet-pro {display: flex; align-items: center; gap: 10px;}
.pet-pro .pet-img {width: 45px; height: 45px; border-radius: 6px; overflow: hidden;}
.pet-pro .pet-name {display: flex; flex-direction: column;}
.pet-pro .pet-name > div {display: flex; align-items: center; gap: 5px;}
.pet-pro .pet-name > div p {font-size: 15px; font-weight: 500;}
.pet-pro .pet-name > div span {padding: 3px 5px 2px 5px; background-color: #222; border-radius: 6px; color: #fff; font-size: 11px;}
.pet-pro .pet-name ul li {display: inline-block; padding: 0 5px; font-size: 13px; color: #777; position: relative;}
.pet-pro .pet-name ul li:first-child {padding-left: 0;}
.pet-pro .pet-name ul li:first-child::after {content: none;}
.pet-pro .pet-name ul li::after {content: ""; display: block; width: 2px; height: 2px; border-radius: 50%; background-color: #ddd; position: absolute; top: 50%; left: 0; transform: translateX(-50%);}
.pet-pro .pet-name.pet-none p {font-size: 15px; color: #5e6a7c;}

.my-de2 {padding: 20px; border-bottom: 8px solid #f5f5f5;}
.my-de2-btn {display: flex; gap: 10px;}
.my-de2-btn > div {width: 50%; padding: 10px 15px; border-radius: 6px; background-color: #f9f9f9; display: flex; align-items: center; justify-content: space-between;}
.my-de2-btn > div > em {background: url(../img/angle.png) no-repeat center/cover; width: 8px; height: 13px;}
.de2-inner > p {font-size: 14px; margin-bottom: 4px;}
.de2-inner > div {display: flex; align-items: center; gap: 6px;}
.de2-inner > div p {font-size: 16px; padding-top: 1px; font-weight: 600;}
.point .de2-inner div em {background: url(../img/point.png) no-repeat center/cover;width: 15px; height: 15px;}
.coupon .de2-inner div p {padding-top: 2px;}
.coupon .de2-inner div em {background: url(../img/coupon.png) no-repeat center/cover;width: 16px; height: 12px;}

.my-de2 > ul {display: flex; margin-top: 20px;}
.my-de2 > ul li {width: 25%; display: flex; flex-direction: column; align-items: center; gap: 8px;}
.my-de2 > ul li em {width: 31px;}
.my-de2 > ul li p {font-size: 12px; color: #5e6a7c;}

.my-tab {border-bottom: 8px solid #f5f5f5;}
.my-travel {display: flex; flex-direction: column; gap: 25px; padding: 20px 20px;}
.his-con {padding: 10px 10px; border-radius: 6px; border: 1px solid #eee;position:relative;}
.his-con-info {display: flex; align-items: flex-start; gap: 10px;}
.his-con-info .his-img {width: 60px; height: 60px; border-radius: 6px; overflow: hidden; flex-shrink: 0;}
.his-txt {display: flex; flex-direction: column; gap: 3px;}
.his-con-info .his-txt h4 {font-size: 16px; font-weight: 500;}
.his-con-info .his-txt div {display: flex; align-items: center; gap: 5px;}
.his-con-info .his-txt div p {font-size: 14px; color: #333;}
.his-con-info .his-txt div span {font-size: 12px; color: #777; padding-left: 5px; position: relative;}
.his-con-info .his-txt div span::after {content: ""; display: block; width: 2px; height: 2px; background-color: #ddd; top: 50%; left: 0; position: absolute; transform: translateY(-50%);}
.his-con-info .his-txt ul {display: flex;}
.his-con-info .his-txt ul li {font-size: 12px; color: #777; padding: 0 8px; position: relative;}
.his-con-info .his-txt ul li:first-child {padding-left: 0;}
.his-con-info .his-txt ul li:first-child::after {content: none;}
.his-con-info .his-txt ul li::after {content: ""; display: block; width: 1px; height: 80%; background-color: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.his-con button {width: 100%; margin-top: 10px;}
.reserve-dday {position:absolute;top:10px;right:12px;padding:3px 6px;color:#fff;background:#573cfa;font-size:12px;border-radius: 5px;text-align:center;}


/* 체크리스트 */
.check-info {padding: 15px; border: 1px solid #eee; border-radius: 6px;}
.check-info ul::-webkit-scrollbar {
    display: none;
  }
.check-info ul {display: flex; flex-direction: column; max-height: 300px; overflow-y: auto;}
.check-info ul li {padding: 7px 0; border-bottom: 1px dashed #eee;}
.check-info ul li label {display: flex; align-items: center; gap: 10px;cursor: pointer;}
.check-info ul li label p {padding: 0 5px; width: 100%; font-size: 15px;}
.check-info ul li input:checked + label p {background-color: #F9F9CA; border-radius: 6px; }
.add-btn { padding: 23px 0 13px;display:flex; justify-content: space-between;align-items: center;}
.add-btn p {font-size: 15px; text-align: center; cursor: pointer;}
.add-btn span i {color: #aaa; font-size: 12px;}
.add-btn span {font-size: 12px; display: flex; align-items: center; gap: 5px; color: #aaa; justify-content: flex-start; cursor: pointer;}

.add-btn .chk-save {padding: 5px 8px; border-radius: 6px; background-color: var(--primary-color); color: #fff; font-size: 13px;cursor: pointer;}

.check-text {background: #f0f1ff;padding:15px;text-align: center;border-radius: 6px;margin-bottom:10px;font-size:14px;}

/* 활동배지 */
.inf-wrap ul {display: flex; flex-wrap: wrap; row-gap: 25px;}
.inf-wrap ul li {width: 20%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.inf-wrap ul li em {width: 80%; aspect-ratio: 1 / 1; background-color: #f5f5f5; border-radius: 6px; display: flex; align-items: center; justify-content: center;}
.inf-wrap ul li em div.lock {background: url(../img/lock.png) no-repeat center/cover; width: 22px; height: 30px;}
.inf-wrap ul li p {font-size: 12px;}

.my-badge {padding-top: 30px;}


.my-menu {padding: 0 20px;}
.my-menu ul li {display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid #eee;}
.my-menu ul li:last-child {border: none;}
.my-menu ul li p {font-size: 15px;font-weight:700;}
.my-menu ul li em {background: url(../img/angle.png) no-repeat center/cover; width: 8px; height: 13px;}


/* 마이페이지 수정 */
.mypro-img {position: relative; width: fit-content; margin: 0 auto;}
.mypro-img em {display:block;width: 113px; height: 113px; border-radius: 6px; overflow: hidden;cursor:pointer;}
.mypro-img span {position: absolute; width: 23px; height: 23px; bottom: 5px; right: 5px;}

.input-edit {border: 1px solid #ddd; border-radius: 6px; height: 50px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;;}
.input-edit em {background: url(../img/angle.png) no-repeat center/cover; width: 8px; height: 13px;}
.input-edit p {font-size: 15px;}
.input-edit.un-modi {background-color: #f5f5f5;}
.input-edit.un-modi p {color: #b5b5b5;}

ul.out {display: flex; margin: 0 auto; padding-bottom: 30px; padding-top: 30px; justify-content: center;}
ul.out li {font-size: 14px; color: #9a9a9a; padding: 0 20px; position: relative;}
ul.out li:last-child::after {content: ""; display: block; width: 1px; height: 60%; background-color: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

/* 내펫친구 리스트 */
.mypet-list {padding: 25px 20px 60px 20px; display: flex; flex-direction: column; gap: 15px; background: #fafafa;}
.repre {display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px dashed #eee;}
.repre label {display: flex; align-items: center; gap: 5px;cursor: pointer;}
.repre input:checked + label p {font-weight: 500;}
.repre label p {font-size: 15px; padding-top: 2px;}
.mypet-box {border: 1px solid #eee; border-radius: 6px; padding: 15px; background-color: #fff;}
.mypet-box .my-pet {padding: 10px 0 0 0; border: none;}
.mypet-box .my-pet .pet-img {width: 105px; height: 105px; flex-shrink: 0;}

.bt-btn {padding: 20px; display: flex; flex-direction: column; align-items: flex-end;}
.bt-btn span {font-size: 12px; color: #777; margin-bottom: 15px; text-align: right; width: fit-content; text-decoration: underline;cursor: pointer;}
.bt-btn button {width: 100%;}


/* 견종 검색 */
.pet-info .input-txt input {cursor: pointer;}
.pet-sr ul {border-top: none;}
.pet-sr ul li {padding: 12px; font-size: 15px; font-weight: 500; color: #555; cursor: pointer;}
.ed-intro textarea {width: 100%; border: 1px solid #eee; }
.pet-type-btn {display: flex; gap: 10px; margin-top: 10px; margin-bottom: 5px;}
.pet-type-btn div {flex: 1; text-align: center; font-size: 14px; padding: 12px 0; border-radius: 6px; background-color: #f1f1f1; color: #555;cursor: pointer;}
.pet-type-btn div.on {background-color: var(--primary-color); color: #fff;}


/* 내저장 */
.like-wrap {padding: 20px;}

/* 최근 본 상품 */
.main-con .recent-wrap {padding: 0;}
.recent-wrap {padding: 0 20px;flex-direction: column;}
.recent-wrap .crow-tit span {font-size: 13px; font-weight: 500; color: #979797;}
.recent-wrap .crow-tit h3 {font-size: 16px; color: #222; font-weight: 600;}
.recent-wrap .crow-tit ul {display: flex; align-items: center; gap: 6px;}
.recent-wrap .crow-tit ul li {font-size: 11px; color: #666; position: relative;}
.recent-wrap .crow-tit ul li:last-child {padding-left: 6px;}
.recent-wrap .crow-tit ul li:last-child::after {content: ""; display: block;width: 1px; height: 50%; background-color: #bbb; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.recent-wrap .crow-sale p {font-size: 16px;}
.recent-wrap .crow-sale span {font-size: 15px; color: #333; text-decoration: none; font-weight: 600;}
.recent-wrap .con-row-img {width: 100px; height: 100px;}

/* 알림,공지사항 */
.alarm .tab1 {margin: 15px 0;}
.al-info {background-color: #f5f5f5; padding: 8px 20px;}
.al-info p {font-size: 12px; color: #555;}

/* .alarm-wrap {padding: 0 20px;} */
.alarm-wrap > div {padding: 15px; border-bottom: 1px solid #eee;cursor: pointer;}
.alarm-wrap > div.on {background-color: #F7F7FF;}
.alarm-wrap > div span {font-size: 13px; color: #abb0f9; font-weight: 500; margin-bottom: 3px;}
.alarm-wrap > div p {font-size: 16px; color: #333; margin-bottom: 6px; font-weight: 500;}
.alarm-wrap > div b {font-size: 12px; color: #b7b7b7; }

.notice-con {padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;cursor: pointer;}
.notice-con em {background: url(../img/angle.png) no-repeat center/cover; width: 8px; height: 13px;}
.notice-con p {font-size: 16px; color: #333; margin-bottom: 3px; font-weight: 500;}
.notice-con span {font-size: 12px; color: #b7b7b7;}

.alarm .tab1 ul li {position: relative;}
.alarm .tab1 ul li.active::after {content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background-color: #F34141; position: absolute; top: 0; right: 0;}



/* 예약 내역 */
.reserve {background-color: #fafafa; min-height: calc(100vh - 55px);}
.reserve-wrap {padding: 15px 20px; display: flex; flex-direction: column; gap: 15px;}
.reser-con {padding: 15px 12px; border-radius: 6px; background-color: #fff; border: 1px solid #eee;}
.reser-con .re-date {display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid #eee;}
.reser-con .re-date p {font-size: 14px; color: #5f6772; font-weight: 500;}
.reser-con .re-date span {font-size: 14px; color: #5f6772; font-weight: 500; display: flex; align-items: center; gap: 5px; cursor: pointer;}
.reser-con .re-date span em {background: url(../img/angle.png) no-repeat center/cover; width: 8px; height: 13px;}
.reser-con .his-con-info {margin-top: 15px;}
.reser-con .check-t {padding: 10px; border-radius: 6px; background-color: #f8f8f8; margin-top: 10px;}
.reser-con button {width: 100%; margin-top: 10px;}
.reser-con.cancle-on {position: relative;}
.reser-con.cancle-on .re-date p b {color: #fd4848; margin-left: 5px;}
.reser-con.cancle-on::after {content: ""; display: block; width: 100%; height: 82%; background-color: rgba(255, 255, 255, .5); position: absolute; bottom: 0; left: 0;}

.cancle-info {padding: 20px 15px; border-radius: 6px; background-color: #f5f5f5; }
.cancle-info p {font-size: 14px; color: #333; font-weight: 600; margin-bottom: 10px;}
.cancle-info span {font-size: 14px; color: #333;}
.cancle-info span b {color: #fd1010; font-weight: 600;}
.r-detail {padding-top: 30px;}

/* faq 자주묻는질문 */
.faq-wrap {padding: 20px; display: flex; flex-direction: column;}
.faq-con {padding: 20px 0; border-bottom: 1px solid #eee;}
.faq-con .faq-tit {display: flex; align-items: flex-start; justify-content: space-between;}
.faq-con .faq-tit > div {display: flex; align-items: flex-start; gap: 8px;}
.faq-con .faq-tit > div p {font-weight: 500; padding-right: 10px;}
.faq-con .faq-tit > div span {width: 22px; height: 22px; border-radius: 50%; background-color: var(--primary-color); color: #fff; text-align: center;font-size: 14px; display: flex; align-items: center; justify-content: center; font-weight: 500; flex-shrink: 0; font-family: var(--font-primary2);}
.faq-con .faq-tit em {background: url(../img/angle4.png) no-repeat center/contain; width: 14px; height: 15px; transform: rotate(0); flex-shrink: 0;}
.faq-con .faq-tit em.on {transform: rotate(180deg);}
.faq-anw {padding: 15px; border-radius: 6px; background-color: #fafafa; font-size: 15px; color: #444; margin-top: 20px; display: none;}
.faq-anw.on {display: block;}

/* 문의작성 */
.inquiry .input textarea {width: 100%; min-height: 220px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px;}
.inquiry .input textarea:focus {outline: #573cfa; border-color: var(--primary-color);}

/* sns 연동 */
.toggle-btn {width: 46px; height: 27px; border-radius: 35px; background-color: #f5f5f5; position: relative;}
.toggle-btn span {width: 21px; height: 21px; border-radius: 50%; box-shadow: 0 0 4px rgba(0, 0, 0, .1); position: absolute; top: 49%; left: 2px; transform: translateY(-50%); background-color: #fff; transition: all .2s;}
.toggle-btn.on {background-color: var(--primary-color);}
.toggle-btn.on span {left: auto; right: 2px;}

/* 알림설정 */
.al-on {padding: 20px; display: flex; align-items: center; justify-content: center; gap: 10px;}
.al-on > em {background: url(../img/angle.png) no-repeat center/cover; width: 8px; height: 13px; flex-shrink: 0;}
.al-on-txt p {font-size: 16px; font-weight: 600; margin-bottom: 5px;}
.al-on-txt span {font-size: 14px; color: #555;}
.pravicy {padding: 20px;}
.pravicy p {font-size: 15px;}

/* 쿠폰 페이지 */
.coupon-wrap {padding: 20px; min-height: calc(100vh - 100px); background-color: #fafafa; display: flex; flex-direction: column; gap: 10px;}
/* .coupon-none label {} */
.coupon-none input:checked + label p {font-weight: 500;}
.coupon-box { background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .05); border-radius: 6px; border: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;}
.coupon-box label {display: flex; align-items: center; gap: 10px; padding: 15px;}
.coupon-con h4 {font-size: 19px; color: var(--primary-color); font-weight: 700; font-family: var(--font-primary2);}
.coupon-con p {font-size: 14px; color: #333; font-family: var(--font-primary1); margin-top: 6px; margin-bottom: 10px;}
.coupon-con div {display: flex; flex-direction: column; gap: 2px;}
.coupon-con div span {font-size: 12px; color: #7d7d7d;}
.coupon-box.none {opacity: 0.6;}

.code {display: flex; gap: 10px;}
.code button {font-size: 14px; padding: 0 15px;}

.all-down {background-color: #fff; border: 1px solid #573cfa; padding: 0 15px; height: 45px; display: flex; align-items: center; align-items: center; justify-content: space-between; border-radius: 6px; margin-bottom: 10px;}
.all-down p {color: var(--primary-color); font-size: 14px; font-weight: 500;}
.all-down em {background: url(../img/download.png) no-repeat center/cover; width: 15px; height: 15px;}

.down-btn {padding: 0 12px; display: flex; flex-direction: column; align-items: center; background-color: #F0F1FF; align-self: stretch; justify-content: center; gap: 6px;}
.down-btn em {background: url(../img/download.png) no-repeat center/cover; width: 15px; height: 15px;}
.down-btn p {font-size: 10px; color: var(--primary-color); font-weight: 500; text-align: center;}
.down-btn.my {background-color: #f5f5f5;}
.down-btn.my p {color: #aaa;}
.down-btn.my em {background: url(../img/download-none.png) no-repeat center/cover; width: 15px; height: 15px;}

/* 마이페이지 - 커뮤니티 */
/* .my-commu {min-height: 350px; max-height: 700px; overflow-x: auto;} */
.my-comu-inner {display: flex; flex-direction: column; gap: 35px;}
.my-co-con {display: flex; flex-direction: column; gap: 10px;}
.my-co-con .my-con-top {display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.my-con-top em {width: 80px; height: 80px; border-radius: 6px; overflow: hidden; flex-shrink: 0;}
.my-con-top > div {width: calc(100% - 100px);}
.my-con-top p {font-size: 16px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 5px;}
.my-con-top span {font-size: 14px; color: #555;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.my-co-con .comment-bar {display: flex; align-items: center; justify-content: space-between;}

.my-commu .my-tit {margin-bottom: 15px;}

/* 마이페이지 - 내피드 */

.myp-feed .fee-btn {display: flex; align-items: center; justify-content: space-between; padding: 14px 15px; border-radius: 6px; background-color: var(--sub2-color); margin-top: 10px;}
.myp-feed .fee-btn div {display: flex; align-items: center; gap: 5px;}
.myp-feed .fee-btn div em {width: 18px;}
.myp-feed .fee-btn div p {font-size: 14px; font-family: var(--font-primary1); color: var(--primary-color);}
.myp-feed .fee-btn > em {background: url(../img/angle.png) no-repeat center/cover; width: 8px; height: 13px;}

.feed-profile {padding: 30px 20px;}
.feed-pro {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%;}
.feed-pro em {border: 1px solid #eee; width: 75px; height: 75px; border-radius: 6px; overflow: hidden; flex-shrink: 0;}
.follow {display: flex; flex-direction: column; gap: 7px;}
.follow > p {font-size: 19px; font-weight: 600; color: #222;}
.follow ul {display: flex; align-items: center; gap: 20px;}
.follow ul li {display: flex; align-items: center; gap: 5px;}
.follow ul li p {font-size: 14px; color: #898989;}
.follow ul li span {font-size: 14px; color: #4f4d4d; font-weight: 600;}
.feed-btn-wrap {display: flex; align-items: center; gap: 10px; margin-top: 20px;}
.feed-btn-wrap > div {flex: 1;font-size: 15px;padding: 10px 10px; border-radius: 6px;text-align: center;}
.mes-btn {background-color: #f1f1f1; color: #555; font-weight: 500;}
.follow-btn { color: #fff; background: var(--primary-color); }
.follow-btn.f-ing {background-color: #eaeaea; color: #4e4e4e;}
.feed-tp {display: flex; align-items: center; justify-content: space-between; position: relative;}

.badge-btn {position: absolute; top:  78px; right:0; padding: 5px 8px; border-radius: 6px; width: fit-content; font-size: 14px; border: 1px solid #eee;}

.intro-self {font-size: 14px; color: #666; margin-top: 6px;}

.f-badge {margin-top: 15px;}
.f-badge p {font-size: 13px; color: #9e9e9e; display: flex; align-items: center; gap: 3px;}
.f-badge p i {color: #9e9e9e;}

.feed {padding: 0; position: relative;}
/* .feed::after {content: ""; display: block; width: 100%; height: 30px; border-radius: 20px; background-color: #fff; position: absolute; top: -10px; left: 0;} */
/* .feed-up {display: flex; align-items: center; gap: 5px; justify-content: center; padding: 10px 0; border-radius: 6px; background: linear-gradient(to right, #9796f0 30%, #fbc7d4 96%); position: relative; z-index: 2;} */
.feed-up {display: flex; align-items: center; gap: 5px; justify-content: center; padding: 10px 0; border-radius: 6px; background: #9796f0; position: relative; z-index: 2;}
.feed-up em {background: url(../img/f-upload.png) no-repeat center/cover; width: 15px; height: 15px;}
.feed-up p {font-size: 14px; color: #fff; font-weight: 500;}
.feed-con {margin-top: 0;}
/* .feed-con ul {display: flex; flex-wrap: wrap; gap: 1px;} */
.feed-con ul {display: flex; flex-wrap: wrap; gap: 2px;}
/* .feed-con ul li {width: calc((100% - 2px) / 3); aspect-ratio: 1 / 1.2; display: flex; position: relative;} */
.feed-con ul li {width: calc((100% - 4px) / 3); aspect-ratio: 1 / 1.2; display: flex; position: relative; border-radius: 6px; overflow: hidden;}
.feed-con ul li em {width: 100%; height: 100%;}
.feed-con ul li i {position: absolute; width: 16px; height: 22px; top: 10px; right: 10px;}
.feed-con ul li.f-video i {background: url(../img/video.png) no-repeat center/cover;}
.commu .feed-con ul {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-auto-flow:row dense; column-count: 3; column-gap: 2px;}
.commu .feed-con ul li {width: 100%; aspect-ratio: 1 / 1;break-inside: avoid;}
/* .commu .feed-con ul li:nth-child(5n) {aspect-ratio: 1 / 1.5;grid-row:span 1.5;}
.commu .feed-con ul li:nth-child(3n) {aspect-ratio: 1 / 1.5;grid-row:span 1.5;} */

.feed-con ul li.feed-pics::after {display: block;content:"";background:url(../img/feed-pics.png);width:15%;aspect-ratio: 1/1;background-size:cover;position:absolute;top:6px;right:6px;z-index:10;opacity:0.75;}
.feed-con ul li.feed-video::after {display: block;content:"";background:url(../img/feed-video.png);width:15%;aspect-ratio: 1/1;background-size:cover;position:absolute;top:6px;right:6px;z-index:10;opacity:0.75;}
.feed-con ul li.feed-videos::after {display: block;content:"";background:url(../img/feed-videos.png);width:15%;aspect-ratio: 1/1;background-size:cover;position:absolute;top:6px;right:6px;z-index:10;opacity:0.75;}

/* 팔로잉 */
.following .l-tab ul li span{color: #aaa;}
.following .l-tab ul li.on span{color: #000;}
.follow-wrap {padding: 20px;}
.follow-wrap > ul {display: flex; flex-direction: column; gap: 15px;}
.follow-wrap > ul li {display: flex; align-items: center; justify-content: space-between;}
.fol-info {display: flex; align-items: center; gap: 10px;}
.fol-info em {width: 44px; height: 44px; border-radius: 50%; overflow: hidden; will-change: transform;}
.fol-info > div p {font-size: 15px; font-weight: 600;}
.fol-info > div span {font-size: 12px; color: #aaa;}
.following .follow-btn {font-size: 14px; margin-top: 0; padding: 6px 8px; width: fit-content; border-radius: 6px;}
.fol-info div ul {display: flex; }
.fol-info div ul li {font-size: 13px; color: #aaa; padding: 0 6px; position: relative;}
.fol-info div ul li:first-child {padding-left: 0;}
.fol-info div ul li:first-child::after {content: none;}
.fol-info div ul li::after {content: ""; display: block; width: 2px; height: 2px; border-radius: 50%; background-color: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

.board-con {display: flex; flex-direction: column; gap: 24px; padding: 0 20px;}
.feed .board-con {margin-top: 20px;}
.feed .board-con .my-co-con .my-con-top em {position:relative;}
.feed .board-con .my-co-con .my-con-top em.feed-pics::after {display: block;content:"";background:url(../img/feed-pics.png);width:15%;aspect-ratio: 1/1;background-size:cover;position:absolute;top:6px;right:6px;z-index:10;opacity:0.75;}
.feed .board-con .my-co-con .my-con-top em.feed-video::after {display: block;content:"";background:url(../img/feed-video.png);width:15%;aspect-ratio: 1/1;background-size:cover;position:absolute;top:6px;right:6px;z-index:10;opacity:0.75;}
.feed .board-con .my-co-con .my-con-top em.feed-videos::after {display: block;content:"";background:url(../img/feed-videos.png);width:15%;aspect-ratio: 1/1;background-size:cover;position:absolute;top:6px;right:6px;z-index:10;opacity:0.75;}


.block-btn {font-size: 14px; margin-top: 0; padding: 6px 8px; width: fit-content; border-radius: 6px;color:#fff;background:#F34141}





/* 내폴더 */
.like-tit {display: flex; align-items: center; gap: 8px; }
.like-tit p {font-size: 20px; font-weight: 600;}
.like-tit em {background: url(../img/fold-edit.png) no-repeat center/cover; width: 30px; height: 24px;cursor: pointer;background-size:14px 14px;background-position:left center;}

.fold-tit {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.fold-tit > p {font-size: 15px; font-weight: 500;}
.fold-tit > p b {font-weight: 700; color: var(--primary-color);}
.fold-tit .fold-btn {display: flex; align-items: center; gap: 10px;}
.fold-btn div.add {padding: 10px 12px; border-radius: 6px; background-color: #f5f5f5; display: flex; align-items: center; gap: 5px;cursor: pointer;}
.fold-btn div.add em {background: url(../img/add.png) no-repeat center/cover; width: 12px; height: 12px; flex-shrink: 0; margin-bottom: 2px;}
.fold-btn div.add p {font-size: 14px; color: #5e5c5c; font-weight: 600;}
.fold-btn div.del {width: 40px; height: 40px; border-radius: 6px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center;cursor: pointer;}
.fold-btn div.del em {background: url(../img/del.png) no-repeat center/cover; width: 17px; height: 17px;}

.fold-con ul {display: flex; flex-wrap: wrap; row-gap: 15px; column-gap: 10px;}
.fold-con ul li {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.fold-con ul li div { display: flex; align-items: center; gap: 10px;cursor: pointer;}
.fold-con ul li div > em {width: 70px; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; flex-shrink: 0;}
.fold-con ul li label {display: none;}
.fold-con ul li p {font-weight: 600;}
.fold-con ul li p span {font-weight: 500; color: #b7b7b7;}

.del-btn {position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); padding: 8px 15px; border-radius: 50px; display: flex; align-items: center; gap: 5px; background-color: #ED4264; box-shadow: 0 0 15px rgba(237, 66, 100, .32);}
.del-btn em {background: url(../img/del-wh.png) no-repeat center/cover; width: 16px; height: 16px;}
.del-btn p {font-size: 14px; color: #fff;}

/* 1:1 문의 */
.my-inquiry {padding: 20px; background-color: #fafafa;}
.my-inquiry h3, .faq-wrap h3 {font-size: 20px; }

.faq-box .pc-tit {display:block;padding-left:20px;padding-top:20px;font-size:20px;}

.my-inquiry ul {margin-top: 20px; display: flex; flex-direction: column; gap: 15px;}
.my-inquiry ul > div {display: flex; flex-direction: column; gap: 15px;}
.my-inquiry ul li.inq-kakao {padding: 18px 15px; border-radius: 6px; background: #e9eaff;}
.my-inquiry ul li.inq-kakao .kakao-con {display: flex; align-items: center; gap: 20px;}
.my-inquiry ul li.inq-kakao em {width: 77px; position: absolute; top: 0px; right: 0;}
.my-inquiry ul li.inq-kakao p {font-size: 16px; font-weight: 700; margin-bottom: 5px;color:var(--primary-color);}
.my-inquiry ul li.inq-kakao span {font-size: 14px; color: #615354;}
.my-inquiry ul li.inq-kakao .kaka-btn {width: 100%; height: 45px; border-radius: 6px; background-color: var(--primary-color); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 20px;cursor: pointer;}
.my-inquiry ul li.inq-kakao .kaka-btn i {color:#fff;font-size:19px;margin-left:5px;margin-bottom:2px;}
.kakao-con {position: relative;}
.kakao-con {position: relative;}

.inq-time {margin-top: 15px;}
.inq-time p {font-size: 13px; color: #686868; font-weight: 600; margin-bottom: 6px;}
.inq-time div span {font-size: 13px; color: #686868;}
.inq-time .withdraw-text {font-weight:400;color:#aaa;margin-top:10px;}
.inq-time .withdraw-text a {text-decoration: underline;}

.my-inquiry ul li.inq-de {padding: 20px; border: 1px solid #f1f1f1; background-color: #fff; display: flex; align-items: center; justify-content: space-between; border-radius: 6px;}
.my-inquiry ul li.inq-de div {display: flex; align-items: center; gap: 6px;}
.my-inquiry ul li.inq-de div em {width: 24px; height: 24px;}
.my-inquiry ul li > em {background: url(../img/angle.png) no-repeat center/cover; width: 8px; height: 13px;}

.fl-wrap {display: flex; flex-direction: column; gap: 10px;}


.my-inquiry ul li div.call-center {flex-direction: column;align-items:flex-start;gap:10px;}
.my-inquiry ul li div.call-center div {display: flex;flex-direction: column;align-items: flex-start;gap:0;}

.my-inquiry ul li div.call-center a {font-size:28px;font-weight:600;color:var(--primary-color)}

.my-inquiry ul li div.call-center span {font-size:14px;color:#666;}



/* 포인트 */
.point-wrap .my-point {padding: 15px 20px; border-bottom: 8px solid #f5f5f5;}
.my-point > div {display: flex; flex-direction: column;gap:5px;}
.my-point > div span {font-size: 14px; color: #fff;}
.my-point > div p {font-size: 28px; color: #fff; font-weight: 600;}
.my-point > div p b {font-size: 32px; color: #fff; font-weight: 600;}
.my-point span {font-size: 14px;font-weight:300;}
.my-point span b {font-weight: 600;}

.point-list {padding: 30px 20px;}
.point-list .list-tit {display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;}
.point-list .list-tit > p {font-size: 17px; font-weight: 600;}
.point-list .list-tit div {padding: 5px 7px; border-radius: 6px; border: 1px solid #eee; display: flex; align-items: center; gap: 7px; font-size: 14px;}
.point-list .list-tit div em {background: url(../img/angle4.png) no-repeat center/cover; width: 7px; height: 4px;}
.point-list ul li {display: flex; align-items: center; justify-content: space-between; padding: 10px 0;}
.point-list ul li div p {font-size: 16px; font-weight: 500;}
.point-list ul li div span {font-size: 14px; color: #b7b7b7;}
.point-list ul li > p {font-size: 17px; font-weight: 600;}
.point-list ul li > p.up {color: var(--primary-color);}
.point-wrap .page-n {display: none;}

/* 250703 추가 */
.point-box {background:linear-gradient(-135deg,#798BFF 35%,#7B62FF,#674EFF 90%);padding:30px 30px;border-radius: 6px;position: relative;}
.point-box span b {color:#fff;}

.point-box::after {display:block;content:"";background: url(../img/point-bg.png) no-repeat center right 5%/contain;width:100%;height:100%;position:absolute;top:0;right:0;opacity:0.1}

.pc-btn {display: none;}


/* 마이페이지 - 내리뷰 */

.rev-wrap {display: flex; flex-direction: column;}
.rev-wrap .rev-inner {padding: 15px 0; border-bottom: 1px solid #eee;}
.rev-wrap .rev-inner:last-child {border-bottom: none;}
.my-rev-tit {display: flex; align-items: flex-start; gap: 10px; }
.my-rev-tit em {width: 60px; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden;}
.rev-inner .re-con {padding: 0; border-bottom: none;}
.my-rev-btn {display: flex; align-items: center; gap: 5px; margin-top: 10px; justify-content: flex-end;}
.my-rev-btn div {padding: 7px 20px; border: 1px solid #ddd; color: #333; font-size: 13px; border-radius: 6px;}
.txt-sh {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.txt-sh.lng {display: block;}
.re-txt span {margin-bottom: 10px;}
.my-rev-wrap button {width: 100%;}
.my-co-wrap {display: flex; flex-direction: column; gap: 15px;}
.recent-wrap .rev-wrap .rev-inner:first-child {padding-top: 0;}
.my-rev-tit div {padding-top: 6px;}
.my-rev-tit div h4 {font-size: 16px; font-weight: 600; margin-bottom: 3px;}
.my-rev-tit div ul li {display: flex; align-items: center; gap: 7px;}
.my-rev-tit div ul li span, .my-rev-tit div ul li p {font-size: 13px; color: #777;}
.my-rev-tit .stay {position: relative; padding-left: 6px;}
.my-rev-tit .stay::after {content: ""; display: block; width: 1px; height: 50%; background-color: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}


.lng {
    display: block !important;
    text-overflow: unset !important;
    overflow: unset !important;
    height: fit-content !important;
    word-break:break-all;
}

.re-txt span {
    margin:0;
}

.re-txt {
    display: flex;
    flex-direction: column;
    gap:15px;
}



/* 250729추가 */

.side-banner-etc {position:absolute;top:130px;left:calc(50% + 465px);width:20%;}



.reserve-list-wrap {display:flex;flex-direction: column;gap:30px;}
.reserve-list-con {padding-bottom:30px;border-bottom:1px solid #eee;}
.mypage-reserve-list {display:flex;flex-direction: column;gap:30px;}
.my-tab .my-travel .his-con {margin-bottom:15px;}
.my-tab .my-travel div.his-con:last-child {margin-bottom:0px;}

.cancel-back-info {
    display:grid;
    grid-template-columns: 1fr;
    gap:20px;
}

.cancel-back-info input {
    width:100% !important;
}

.cancel-back-info select {
    background-position: 95% 50%;
    padding:13px ;
}

.cancel-back-info .input p {
    font-weight:400;
    font-size:15px;
}

.cancel-back-info-wrap {margin-top:20px;}

/* 탈퇴 */
.withdraw-terms {
    width:100%;

}

.withdraw-terms-wrap {
    font-size:16px;
}

.withdraw-terms-con {
    width:100%;
    height:200px;
    padding:20px;
    overflow-y: auto;
    background:#f6f6f6;
    border-radius:6px;
}
/* 
.withdraw-ag {
    border-radius: 5px;
    margin-bottom: 20px;
}

.withdraw-ag input + label {
    display: flex;
    align-items: center;
    gap: 10px;
} */

.withdraw-ag {
    border:0 !important;
    padding:0 !important;
}



/* -------- 320px -------- */
@media screen and (min-width: 320px) {
    .recent-wrap .con-row-img {width: 110px; height: 110px;}
    .recent-wrap .crow-tit ul li {font-size: 13px;}
    .recent-wrap .crow-sale p {font-size: 18px;}
    .recent-wrap .crow-sale span {font-size: 17px;}

    .reser-con .check-t > div span {font-size: 15px;}
    .reser-con .check-t > div b {font-size: 14px;}

    .my-inquiry ul li.inq-kakao em {width: 85px;}
    .my-inquiry ul li.inq-kakao p {font-size: 20px; padding-top: 10px;}
}


@media screen and (min-width: 480px) {
	/* 중형 모바일 스타일 */
}

@media screen and (min-width: 640px) {
	/* 대형 모바일 스타일 */
    .fold-con ul {flex-direction: row; column-gap: 0; row-gap: 25px;}
    .fold-con ul li {width: 50%;}
    .fold-con ul li div {gap: 15px;}
    .fold-con ul li div > em {width: 85px; border-radius: 6px;}

    
    .cancel-back-info {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap:20px;
    }

}

@media screen and (min-width: 768px) {
	/* 태블릿 모바일 스타일 */
    .reserve-dday {right:20px;top:20px;display:none;}

}

@media screen and (min-width: 860px) {
    /* .fold-con ul li p {font-size: 18px;} */
    .faq-box .pc-tit {display:block;padding-left:0px;padding-top:0px;font-size:24px;}
    .faq-box {margin-bottom:20px;}
    .faq-wrap {
    padding: 20px;
    display: flex
;
    flex-direction: column;
}

    .recent-wrap {flex-direction:row;}
    .like-wrap {padding: 20px 30px;}

    .fl-wrap {flex-direction: row; flex-wrap: wrap;}
    .fl-wrap > div {width: calc((100% - 10px) / 2);}

    .r-detail {margin-top: 100px;}
    .his-con-info {align-items: center;}
    .his-con-info .his-img {width: 85px; height: 85px;}
    .his-con-info .his-txt h4 {font-size: 17px;}
    .his-con-info .his-txt div span {font-size: 14px;}

    .reserve {background-color: #fff;}
    .detail-hd .side-flex {margin-top: 150px;}
    .indx .side-flex {margin-top: 125px;}
    .indx .wd2 {margin-top: 95px;}
    .side-flex {display: flex; align-items: flex-start; gap: 20px; margin-top: 165px; background-color: #fff !important; padding: 0 20px;}
    .pc-wrap {width: 930px; min-height: 65vh;}
    .mypet-list {background-color: #fff; padding: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; height: auto;}
    .mypet-box {padding: 20px; width: calc((100% - 15px) / 2);}

    .reserve-dday {right:20px;top:20px;}

    .my-menu {display: none;}
    .my-travel {padding-bottom: 100px; gap: 30px;}
    .my-top {padding: 0 20px 30px 20px;}
    .my-de2 {padding: 30px 20px;}
    .my-tit {margin-bottom: 15px;}
    .my-tit h3 {font-size: 18px;}
    .his-con {padding: 20px;}
    .his-con button {margin-top: 17px;}
    .his-con-info .his-txt ul li {font-size: 13px;}
    .his-con-info .his-txt div p {font-size: 15px;}
    .his-con-info .his-txt div span {font-size: 15px; padding-left: 7px;}
    .inf-wrap ul li p {font-size: 15px;}
    .pet-info-wrap {padding: 15px;cursor: pointer;}
    .my-tit span {font-size: 14px;cursor:pointer;}
    .my-de2-btn > div {padding: 15px 20px;cursor: pointer;}
    .de2-inner > p {font-size: 16px; margin-bottom: 8px;}
    .de2-inner > div p {font-size: 18px;}
    .point .de2-inner div em {width: 20px; height: 20px;}
    .coupon .de2-inner div em {width: 20px; height: 16px;}
    .my-de2 > ul li p {font-size: 14px; font-weight: 500;}
    .my-de2 > ul li em {width: 35px;}
    .my-de2 > ul li {gap: 10px; cursor: pointer;}
    .my-de2 > ul {margin-top: 25px;}

    .my-inquiry {background-color: #fff; padding: 0; height: 45vh;}
    .my-inquiry ul {flex-direction: row; margin-top: 30px;}
    .my-inquiry ul li.inq-kakao {width: 50%;}
    .my-inquiry ul > div {width: 50%;}
    .my-inquiry ul li.inq-de {flex: 1;}
    .my-inquiry ul li.inq-de div {gap: 8px;}
    
    .inq-time {margin-top: 20px;display: grid;gap:15px;grid-template-columns: 1fr 1fr;}
    .inq-time p {font-size: 15px;}
    .inq-time div span {font-size: 15px; color: #686868; font-weight: 400;}
    .inq-time .withdraw-text {margin-top:0}
    .my-inquiry h3 {font-size: 23px; margin-top: 0;}

    .coupon-wrap {background-color: #fff; padding: 20px; min-height: 55vh;}
    
    .fl-wrap {gap: 15px;}
    .fl-wrap > div {width: calc((100% - 15px) / 2);}
    .my-tab {border-bottom: none;}
    .pc-tit {display: flex; align-items: center; justify-content: space-between;}
    .pc-tit span {font-size: 14px; padding: 5px 10px; background-color: var(--primary-color); color: #fff; border-radius: 6px; font-family: 'Pretendard'; font-weight: 500;cursor: pointer;}

    .side-flex .my-badge .bd {padding: 0;}
    .de-badge .inf-wrap ul li {width: 16.66%;}
    .pc-wrap .my-badge {padding-top: 0;}

    .point-wrap .my-point {padding-top: 10px;}
    .point-list {padding-bottom: 0;}
    .point-wrap .page-n {margin-bottom: 80px; display: flex;}
    .pc-btn {display: block;}
    .pc-none.bt-fixed {display:none;}

    .inf-wrap ul li em div.lock {width: 30px; height: 38px;}
    .inf-wrap ul li em {border-radius: 6px;}

    .reserve-wrap, .recent-wrap {padding-bottom: 80px;}
    
    .petlist-pd {padding-bottom:80px;}

}

@media screen and (min-width: 1024px) {


}

@media screen and (min-width: 1280px) {
    .side-flex {gap: 50px; padding: 0;}
    
}