@charset "utf-8";

/* **************************************** *
* 공통 레이아웃
* **************************************** */
/* #content{margin:0 auto; padding-top:55rem; padding-bottom:110rem; max-width:450rem;} */
#content{margin:0 auto; padding-top:55rem; max-width:450rem;}
#content:has(#footer){padding-bottom:0;}
#content.commu {padding-bottom: 30rem;}
.content-wrap{position:relative; overflow:hidden; width:100%; margin-right:auto; margin-left:auto; padding-right:20rem; padding-bottom:90rem; padding-left:20rem; /* z-index:2; :*/;}
.content-wrap:has(.commu-filter, .mypage-menu) {background: #fff }
.content-wrap:has(.tab__item--none) {min-height: 100vh; background: #fff}
.content-wrap:has(.mypage-menu) {padding-bottom: 0;}
.sec-line--v2{display:block; margin-top: 17rem; border-bottom:1px solid #ededed;}
.min-but {background-color: var(--c-02); max-width: 85rem;  padding: 8rem 12rem; text-align: center; border-radius: 18rem; font-size: 12rem; color: var(--c-01); font-weight: 600;}

/* **************************************** *
* 서브페이지
* **************************************** */
/* 예약받기 */
#content.reservation {position: relative; padding-top: 100rem;}
#content.reservation .case-list__img {margin-bottom: 20rem;}
#content.reservation .sec-line {margin-top: 20rem;}
#content.reservation .input-box {margin-top: 7rem;}
.calendar-wrap {position: relative;}
.calendar-wrap input {padding-right: 50rem;}
.ui-datepicker-trigger {position: absolute; right: 17rem; top: 50%; width: 18rem; transform: translateY(-50%);}

/* 견적받기 */
#content.estimate {position: relative; min-height: 100vh; padding-top: 100rem; padding-bottom: 0;}
#content.estimate .content-done img {height: 100%;}
#content.estimate .content-done {padding-top: 30rem;}
#content.estimate .btn-wrap--ab button:first-child {margin-right: 7rem;}
#content.estimate .btn-wrap--ab button + button {margin-top: 0 !important;}
.join-tit .step__item {margin-top: 60rem;}
.step__item {margin-top: 35rem;}
.step__item h5 {margin-bottom: 12rem; font-size: 16rem; font-weight: 700; color: var(--b-01);}
.step__item .tab-content {margin-top: 15rem;}
.step__item .select-wrap {margin-top: 5rem;}

/* 나의 반려생물 */
.commu-filter {padding:20rem; background: var(--f);}
.commu-top .case-list {padding-bottom: 40rem;}
.commu-top .case-list__item {display: flex; overflow: hidden; padding: 16rem; border-radius: 7rem; border: 1px solid #ddd; box-shadow: 3rem 3rem 15rem rgba(0, 0, 0, .05);}
.commu-top .case-list__item + .case-list__item {margin-top: 20rem;}
.commu-top .case-list__item.case-list__item_plus {border: 1px dashed #ddd;} 
.commu-top .case-list__item.case-list__item_plus .cmn-overflow--2 {font-size: 14rem; font-weight: 600; text-align: center; color: var(--g-01);} 
.commu-top .case-list__img {width: 100rem; border-radius: 100%; height: auto;}
.commu-top .case-list__cont {padding: 16rem; border-radius: 0; background: var(--f); flex: 4;}
.commu-top .case-list__cont strong {margin-top: 0; min-height: 0;}
.commu-top .case-list__cont > p.pet_type,
.commu-top .case-list__cont > p.pet_spec {color: var(--g-02); font-weight: 400; font-size: 14rem;}
.commu-top .case-list__cont > p.pet_spec > span:first-child {position: relative; padding-right: 10rem; margin-right: 5rem;}
.commu-top .case-list__cont > p.pet_spec > span:first-child::after {content: ''; position: absolute; width: 1px; height: 14rem; background-color: var(--g-02); top: 50%; right: 10%; transform: translate(-50%, -50%);}
.commu-user .case-list__cont strong {margin-top: 20rem; font-size: 18rem;}
.commu-user .sec-line {margin-top: 20rem;}
.commu-user .slide-sec {overflow-x: hidden;}
.case-detail {margin-top: 20rem;}
.case-detail img {width: 100%;}
.case-detail__btn  {margin-bottom: 20rem;}

.pet_view .case-list__cont strong {min-height: auto;}
.pet_view .pet_detaile {margin-top: 16rem;}
.pet_view .pet_detaile > li {margin-bottom: 2rem;}
.pet_view .pet_detaile > li:last-child {margin-bottom: 0;}
.pet_view .pet_detaile div {display: flex; gap: 16px;}
.pet_view .pet_detaile div > p {display: block; flex: 1; color: var(--g-02);}
.pet_view .pet_detaile div > i {flex: 4;}

.pet_view .pet_detaile__graphic {display: flex; width: 100%; gap: 10px; margin-top: 16rem;}
.pet_view .pet_detaile__graphic > li {width: calc( 100% / 3); padding: 20rem; background-color: var(--c-02); border-radius: 7rem;}
.pet_view .pet_detaile__graphic > li > div {text-align: center;}
.pet_view .pet_detaile__graphic div > p {color: var(--g-01);}
.pet_view .pet_detaile__graphic div > i {color: var(--c-01); font-size: 16rem;}
.pet_view .pet_detaile__graphic div.rep-gen-box > i {position: relative; width: 100%; height: auto; display: block;}
.pet_view .pet_detaile__graphic div.rep-gen-box > i > img {position: absolute; left: 50%; top: 0; transform: translateX(-50%);}


.commu-info{display:flex; align-items:center; position:relative; margin-top:20rem;}
.commu-info__inr{display:flex; align-items:flex-start; position:absolute; right:0rem;}
.commu-info > span{width:18rem; height:18rem; background-size:cover; background-position:50% 50%; background-repeat:no-repeat;}
.commu-info__inr li{display:flex; align-items:center; position:relative; font-weight:300; font-size:12rem; color:#B6B6B6;}
.commu-info__inr li:first-child::after{content:""; display:block; width:3rem; height:3rem; margin:0rem 5rem; background:#ddd; border-radius:100%;}

.commu-reply .commu-item{padding:20rem 0rem; padding-left:47rem !important;}
.commu-reply .commu-item:not(:last-child) {border-bottom: 1px solid var(--l-01);}
.commu-user__inr > i{display:block; line-height:1.2; font-size:12rem; color:#b3b3b3;}
.commu-user .cmn-thum{position:absolute; left:20rem; width:37rem; height:37rem; background-size:16rem;}
.commu-reply .commu-item > p{margin-top:7rem; font-size:14rem;}
.commu-reply .commu-item .commu-item{position: relative; padding:0; padding-top:25rem; border:0;}
.commu-reply .commu-item .commu-item .cmn-thum {left: 0; padding-left:0;}
.commu-user__inr > strong{font-size:14rem; color:var(--b-01);}
.commu-item.new .commu-user__inr > strong{position:relative;}
.commu-item.new .commu-user__inr > strong::after{content:"new"; margin-left:2rem; font-size:9rem; color:var(--c-01); text-transform:uppercase; vertical-align:text-top;}

/* 게시판 관련 */
#content.board{padding-bottom:50rem;}
.board-user .cmn-thum{position:absolute; left:0; width:37rem; height:37rem; background-size:16rem;}
.board-item{position:relative; padding-top:20rem; padding-bottom:20rem; padding-left:46rem;}
.board-list{position:relative; padding-top:25rem !important;}
.board-list__inr > strong{color:var(--b-01);}
.board-item > strong{display:-webkit-box; font-size:16rem; color:var(--b-01);}
.board-item + .board-item{border-top:1px solid #eee;}
.board-item:first-child{padding-top:0;}
.board-list__inr .tag-list{margin-top:1rem;}
.board-info{display:flex; align-items:center; position:relative; margin-top:30rem;}
.board-info__inr{display:flex; align-items:flex-start; position:absolute; right:0rem;}
.board-info > span{width:18rem; height:18rem; background-size:cover; background-position:50% 50%; background-repeat:no-repeat;}
.board-info__inr li{display:flex; align-items:center; position:relative; font-weight:300; font-size:12rem; color:#B6B6B6;}
.board-info__inr li:first-child::after{content:""; display:block; width:3rem; height:3rem; margin:0rem 5rem; background:#ddd; border-radius:100%;}
.board-item > p{margin-top:5rem;}
.board-list__thum,
.board-item > strong{margin-top:17rem;}
.board-list__thum{overflow:hidden; border-radius:10rem;}

.btn-like{width:20rem !important; margin-right:16rem; background-image:url(../img/ic-heart.svg);}
.btn-like.on{background-image:url(../img/ic-heart_on.svg);}
.btn-comment{background-image:url(../img/ic-comment.svg);}

/* 글쓰기 */
.board-view .board-item{padding-bottom:40rem; padding-left:0;}
.board-view .board-user{padding-left:47rem;}
.board-view .board-info{margin:0; padding:13rem 0rem;}
.board-view .board-item > strong{font-size:17rem; word-break:auto-phrase;}
.board-reply .board-user{padding-left:0;}
.board-reply .board-item{padding:20rem 0rem; padding-left:47rem !important;}
.board-reply .board-item > p{margin-top:7rem; font-size:14rem;}
.board-reply .board-item .board-item{padding:0; padding-top:25rem; border:0;}
.board-reply .board-item > p + *{margin-top:4rem;}

.board-user__inr > i{display:block; line-height:1.2; font-size:12rem; color:#b3b3b3;}
.board-user__inr > strong{font-size:14rem; color:var(--b-01);}

.board-item.new .board-user__inr > strong{position:relative;}
.board-item.new .board-user__inr > strong::after{content:"new"; margin-left:2rem; font-size:9rem; color:var(--c-02); text-transform:uppercase; vertical-align:text-top;}
.board-item.new{display:none;}

.reply-box textarea{height:55rem; padding:8rem 10rem; border:0; font-size:14rem; border-radius:0;}
.reply-box{display:none; position:relative; border:1px solid #E5E5E5;}
.reply-box.on{display:block; height:90rem; margin-top:9rem;}
.reply-box__btn{position:absolute; right:15rem; bottom:13rem; width:auto; font-weight:800; color:#cdcdcd;}
.reply-box__btn.on{color:#656565;}

.btn-reply{font-size:12rem; color:#c3c3c3; text-align:left;}
.btn-reply.hide{display:none;}
.btm-fix{position:fixed; bottom:0; z-index:10; width:100%;}

#reply-input{display:flex; align-items:center; box-shadow:0px -1px 10px 0px rgba(0, 0, 0, 0.07);}
#reply-input > figure{position:absolute; left:10rem;}
#reply-input input{width:100%; padding-left:46rem; border:0; border-top:1px solid #eee; font-size:14rem; border-radius:0;}
#reply-input button{position:absolute; right:0; width:60rem; font-weight:700;}

/* 글쓰기 */
.board-write .board-write__tit{padding-left:0; border:0; border-bottom:1px solid #e5e5e5; border-radius:0;}
.board-write__cont{height:40vh; padding-top:10rem; padding-left:0; border:0; border-radius:0;}
.board-write .swiper-tabs{overflow:visible; margin:30rem 0rem; gap:10rem;}
.board-write .swiper-tabs li{position:relative; border-radius:6rem;}
.board-write input[type="text"]::placeholder,
.board-write textarea::placeholder{color:#B6B6B6!important;}
.board-write__photo{display:flex; align-items:center; position:relative; padding:20rem 20rem; border-top:1px solid #eee; font-weight:500; font-weight:400; color:var(--b-01); text-align:left;}
.board-write__photo i{width:22rem; height:30rem; margin-right:10rem; background:url(../img/ic-camera.svg) no-repeat 50% 50%;}
.board-write__btm  input{width:auto; width:calc(100% - 40rem); margin:0 20rem; padding-left:0; border:0; border-top:1px solid #eee; border-radius:0;}
.board-write__delate{position:absolute; top:-7rem; right:-7rem; width:23rem; height:23rem; background-color:var(--c-02); background-position:50% 50%; border-radius:40rem; background-image:url(../img/common/ic-cancle_w.svg); background-repeat:no-repeat;}
.board-write__img{overflow:hidden; border-radius:7rem;}

/* 솔루션 */
#content.solution{padding-bottom:80rem;}
.solution-tit img{height:124rem;}
.solution .sec-tit{display:block; margin-top:20rem; margin-bottom:0rem;}
.solution-write__txt{margin-top:9rem; min-height:150rem;}

/* 솔루션 답변 */
*[class^="talk-con"]{display:flex; justify-content:flex-end; align-items:flex-start; position:relative;}

.solution-tit{padding-top:20rem;}
.solution .sec-tit span{border-bottom:1px solid; font-weight:600; color:var(--c-01);}

.talk-con__txt{display:flex; align-items:flex-start; width:100%; padding:18rem; border-radius:10rem; max-width:300rem; flex-direction:column;}
.talk-con--reply .talk-con__txt{background:var(--c-01); color:var(--f);}
.talk-con .talk-con__txt{background:#F5F5F5;}
.talk-con--reply .cmn-thum{width:35rem; height:35rem; border:1px solid #ddd;}
.talk-con--reply .cmn-info__user{position:absolute; top:0; left:0;}
.talk-wrap .cmn-info__user strong{font-size:13rem;}
.talk-con--reply{padding-top:31rem;}
.talk-wrap{display:flex; align-items:stretch; margin-top:25rem; flex-direction:column; gap:10rem;}
.talk-con__btn{display:flex; justify-content:flex-start; width:100%; margin-top:35rem; flex-direction:column; gap:6rem;}
.talk-con__btn > *{padding:14rem 0rem; background:#fff; font-weight:700; font-size:15rem; color:var(--c-01); border-radius:6rem;}
.talk-btn--c{color:#fff;}
.talk-con--reply .expert-list{display:grid; grid-template-columns:1fr 1fr; max-width:300rem;}
.talk-con--reply .expert-list__item{border:1px solid #eee; flex:50%;}
.talk-con--reply:has(.expert-list){padding-top:0rem;}
.talk-con--reply .select-btn::after{background-image:url(../img/common/arrow-basic_w.svg);}
.talk-con--reply .select-btn{color:rgba(255,255,255,0.6)!important; border-color:rgba(255,255,255,0.3);}
.talk-con__txt > input{margin-top:11rem; background:none; color:#fff; border-color:rgba(255, 255, 255, 0.3);}
.talk-con__txt > .select-wrap{margin-top:5rem;}
.talk-con--reply .select-btn.on{color:#fff !important;}
.talk-con--reply .expert-list__item.on{border:3rem solid var(--c-01);}
.talk-con__txt > input:focus{border-color:rgba(255, 255, 255, 0.3);}

/* 솔루션 결제 */
/* .solution-pay .sec-line{margin-top:30rem; margin-bottom:30rem;}
.solution-pay .solution-item__inr > i{font-weight:500; color:#a1a1a1;}
.solution-pay .solution-item__inr  strong > i{margin-left:3rem; color:var(--b-01);}
.solution-pay .solution-item__inr strong{font-size:17rem;}
.solution-pay .solution-item__inr em{display:block; margin-top:1rem; font-weight:800; font-size:15rem;}
.solution-pay .solution-item__inr em i{margin-left:4rem; font-weight:400; text-decoration:line-through;} */


/* 샵 (shop) */
.main-shop .swiper-slide > div {width: 100%;}
.main-shop .shop-main-list__thum {width: 100%; overflow: hidden; min-width: 86rem; border-radius: 5rem;}
.main-shop .shop-main-list__txt {display: flex; flex-direction: column; gap: 1px; margin-top: 5px;}
.main-shop .shop-main-list__txt > p,
.main-shop .shop-main-list__txt > small,
.main-shop .shop-main-list__txt > b {width: 100%; text-overflow: ellipsis; overflow: hidden; display: block; white-space: nowrap;}

/* 업체 소개 (mall) */
.company-view .main-mall .swiper-slide > div {width: 100%;}
.company-view .main-mall .swiper-slide > div > .mall-main-list__thum {width: 100%; height: 160rem; border-radius: 7rem; overflow: hidden;}
.company-view .main-mall .mall-main-list__txt {display: flex; flex-direction: column; gap: 1px; margin-top: 8rem;}
.company-view .main-mall .mall-main-list__txt > small {font-size: 14rem; font-weight: 700;}
.company-view .main-mall .mall-main-list__txt > b {font-size: 18rem; white-space: 3;}
.company-view .main-mall .mall-main-list__txt > i {font-size: 14rem; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.company-view .main-mall .mall-main-list__txt > small, 
.company-view .main-mall .mall-main-list__txt > b,
.company-view .main-mall .mall-main-list__txt > i{width: 100%; text-overflow: ellipsis; overflow: hidden;} 
.company-view .cmn-title > h2 {font-size: 18rem; font-weight: 700;}

.main-mall .swiper-slide > div {width: 100%;}
.main-mall .swiper-slide > div > .mall-main-list__thum {width: 100%; height: 160rem; border-radius: 7rem; overflow: hidden;}
.main-mall .mall-main-list__txt {display: flex; flex-direction: column; gap: 1px; margin-top: 8rem;}
.main-mall .mall-main-list__txt > small {font-size: 14rem; font-weight: 700;}
.main-mall .mall-main-list__txt > b {font-size: 18rem; white-space: 3;}
.main-mall .mall-main-list__txt > i {font-size: 14rem; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.main-mall .mall-main-list__txt > small, 
.main-mall .mall-main-list__txt > b,
.main-mall .mall-main-list__txt > i{width: 100%; text-overflow: ellipsis; overflow: hidden;} 




/* 반려생물 - 부모정보 */

.pet-family {margin-top: 16rem; padding: 20px; border: 1px solid #ddd; border-radius: 7rem;}
.pet-family > h3 {width: 100%; text-align: center; display: block; font-size: 16rem; font-weight: 700; margin-bottom: 16rem;}
.pet-family ul {display: flex; justify-content: space-around; position: relative; width: 100%;}
.pet-family ul::after {content: ''; display: block; position: absolute; background-image:url(../img/ic-family-heart.svg); background-repeat: no-repeat; background-size: cover; background-position: center; width: 35rem; height: 30rem; top: 50%; left: 50%; transform: translate(-50%, -85%);}
.pet-family ul div {text-align: center; display: flex; flex-direction: column; gap: 3rem;}
.pet-family ul div > i {width: 80rem; height: 80rem; border-radius: 100%; overflow: hidden; display: block;}
.pet-family ul div > i > img {width: 100%; height: 100%; display: block; object-fit: cover;}
.pet-family ul div > b {font-size: 14rem; font-weight: 700; }
.pet-family ul div > p {font-weight: 400; font-size: 14rem;}
.pet-family__btn {border: 1px solid #ddd; padding: 16rem; border-radius: 7rem; margin-top: 16rem;}
.pet-family__btn > button {width: 100%; text-align: center; font-size: 14rem; font-weight: 600;}


/* 반려생물 - 상세설명 */

.pet-case-detail .pet-case__tab {display: flex;} 
.pet-case-detail .pet-case__tab > li {width: calc(100% / 3); text-align: center; padding: 16rem; border-bottom: 1px solid #f1f1f1; color: var(--g-02); font-weight: 400;}
.pet-case-detail .pet-case__tab > li.on {display: block; border-bottom: 2px solid var(--c-01); color: var(--c-01); font-weight: 400;}
.pet-case-detail .pet-info-con > ul {display: flex; flex-direction: column; gap: 16rem; margin-top: 20rem; margin-bottom: 20rem;}
.pet-case-detail .pet-info-con > ul > li {display: flex; flex-direction: column; gap: 16rem;}
.pet-case-detail .con-box {padding: 16rem; border: 1px solid #ddd; border-radius: 7rem;}
.pet-case-detail .con-box.qr-box {height: 140rem; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.pet-case-detail .qr-box > i {display: block; text-align: center; font-weight: 300; line-height: 18rem; font-size: 14rem; color: var(--g-02);}
.pet-case-detail .qr-but {margin: 8rem auto 0;}
.pet-case-detail .pet-info-tit {display: flex; justify-content: space-between; align-items: center;}
.pet-case-detail .pet-info-tit > h4 {font-weight: 700;}
.pet-case-detail .pet-info-tit > .min-but {max-width: 65rem;}


.pet-case-detail .pet-medi-list > ul {display: flex; flex-direction: column; gap: 8rem;}
.pet-case-detail .pet-medi-list__txt {display: flex; flex-direction: column; gap: 2rem;}
.pet-case-detail .pet-medi-list__txt > b,
.pet-case-detail .pet-medi-list__txt > i,
.pet-case-detail .pet-medi-list__txt > p{width: 100%; text-overflow: ellipsis; overflow: hidden;}
.pet-case-detail .pet-medi-list__txt > b,
.pet-case-detail .pet-medi-list__txt > p {font-size: 14rem;}
.pet-case-detail .pet-medi-list__txt > i {color: #666; font-size: 12rem;}

.pet-case-detail .pet-feed-box {display: flex;}
.pet-case-detail .pet-feed-box > .feed-thum {width: 35%;}
.pet-case-detail .pet-feed-box > div {width: 65%; display: flex; flex-direction: column; justify-content: center; gap: 4rem;}
.pet-case-detail .feed-button-box {display: flex; gap: 4rem;}
.pet-case-detail .pet-feed-list-txt > b {font-size: 16rem;}
.pet-case-detail .pet-feed-list-txt > i,
.pet-case-detail .pet-feed-list-txt > i > span {font-size: 14rem;}
.pet-case-detail .feed-button-box > button {padding: 8rem; font-size: 12rem; font-weight: 500; width: 70rem; border: 1px solid var(--c-01); border-radius: 18rem;}
.pet-case-detail .feed-button-box > button:first-child {color: var(--c-01); background-color: #fff;}
.pet-case-detail .feed-button-box > button {padding: 8rem; font-size: 12rem; font-weight: 500; width: 70rem; border: 1px solid var(--c-01); border-radius: 18rem;}
.pet-case-detail .feed-button-box > button:nth-child(2) {background-color: var(--c-01); color: #Fff !important; justify-content: center;}
.pet-case-detail .select-filter .select-btn::before,
.pet-case-detail .select-filter .select-btn::after {display: none;} 
.pet-case-detail .pet-feed-date-box {display: flex; flex-direction: column;}
.pet-case-detail .pet-feed-date-box > i {display: block; text-align: center; font-weight: 400; font-size: 16rem;}
.pet-case-detail .pet-feed-date-box > i > strong {color: var(--c-01);}
.pet-case-detail .pet-time-list__txt {}
.pet-case-detail .pet-time-list__txt > ul {display: flex; flex-direction: column; width: 100%;}
.pet-case-detail .pet-time-list__txt > ul > li {display: flex; gap: 4rem; justify-content: space-between;}
.pet-case-detail .pet-time-list__txt > ul > li {color: var(--g-01);}
.pet-case-detail .pet-farm-list__txt > ul {display: flex; flex-direction: column; gap: 4rem;}
.pet-case-detail .pet-farm-list__txt > ul > li {display: flex; justify-content: space-between;}
.pet-case-detail .pet-farm-thum {width: 100%; height: 165rem; overflow: hidden; border-radius: 7rem; margin-top: 16rem;}
.pet-case-detail .pet-farm-thum > img {width: 100%; height: 100%; object-fit: cover; display: block;}

.pet-case-detail .product-ui {width: 100%; display: flex; flex-direction: column; gap: 8rem; padding: 20px; background-color: #f0f0f0; border-radius: 10px;}
.pet-case-detail .product-ui > .product-ui-top {display: flex; justify-content: space-between; align-items: center;}
.pet-case-detail .product-ui > .product-ui-bot {display: flex; justify-content: space-between; align-items: center;} 
.pet-case-detail .product-weight { font-size: 14rem; color: #333; }
.pet-case-detail .close-btn::after { content: '✕'; cursor: pointer;}
.pet-case-detail .quantity-control {width: 120rem; display: flex; justify-content: space-between; align-items: center; background-color: #fff; border-radius: 5px; }
.pet-case-detail .qty-btn {max-width: 30rem; min-width: unset; height: 35rem; margin-top: 0; background-color: #fff; border: none; padding: 5px 10px; font-size: 18px; cursor: pointer; color: #111 !important;}
.pet-case-detail .quantity { padding: 0 10px; font-size: 16px; }
.pet-case-detail .product-price { font-size: 16px; color: #333;}

.pet-case-detail .pet-order-select .select-btn-box {gap: 4rem;}
.select-btn__complete.basket-btn__complete {border: 1px solid var(--c-01); background-color: #fff; color: var(--c-01) !important;}
.select-btn__complete.order-btn__complete {}

/* 반려생물 등록  */
.pet_plus .select-filter {width: 100%;}
.pet_plus .select-filter .select-btn {width: 100%; border-radius: 7rem; padding: 16rem;}
.pet_plus .select-filter .select-btn::before {display: none;}
.pet_plus .edit-list li button {position: unset; width: 100%; padding: 16rem;}
.pet_plus .edit-list li > div {width: 100%;}
.mt-08 {margin-top: 8rem;}

.pet_plus .img-upload-main {
    border: 1px solid #4c5057;
}
.pet_plus .img-upload { width: 72px; height: 72px; position: relative; margin-bottom: 8px; display: inline-block; margin-right: 4px; border: 1px solid #dcdee1; border-radius: 4rem;}
.pet_plus .img-upload-con .essencial{position: relative !important;}

.pet_plus .edit-list li > div.img-upload{width:72px; height:72px; position:relative; margin-bottom:8px; display: inline-block; margin-right:4px; border:1px solid #dcdee1; }
.pet_plus .img-upload-main{border-radius: 4rem;}

.pet_plus .img-upload input[type="file"]{width:0;height:0;opacity:0}
.pet_plus .img-upload label{content:"";  text-align: center; position:absolute; left:0; right:0; top:0; bottom:0; cursor:pointer;}
.pet_plus .img-upload label{ background:url(https://lbcontents.s3.ap-northeast-2.amazonaws.com/images/admin/icon-plus.png) no-repeat center center; background-color: #f9f9f9;}

.pet_plus .img-upload img{width:100%;height:100%;}
.pet_plus .img-upload .return-btn{position: absolute; background-color:#fff; border:1px solid #dcdee1; display: block; top:50%; left:50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); font-size:11px; width:48px; text-align: center; cursor: pointer; border-radius: 4px;}
.pet_plus .img-upload .delete-btn{width: 17px; height:17px; position:absolute; border-radius: 0; top:0; right:0;background:url(https://lbcontents.s3.ap-northeast-2.amazonaws.com/images/admin/upload-close-black.png)no-repeat center center;z-index:1; border: 0;}
.pet_plus .img-load{width:128px; height:128px; position:relative; margin-bottom:8px; display: inline-block; margin-right:4px; border:1px solid #dcdee1; cursor: pointer;}
.pet_plus .img-load img{height:100%; width: 100%;}
.pet_plus .file-upload{border-radius: 4px; padding:9px 24px; font-weight: bold; display:inline-block; vertical-align: top;}
.pet_plus .edit-list li button.btn-img-upload {border: 0;}

.pet_plus .calendar-control {display: flex; justify-content: center; align-items: center; gap: 8rem; text-align: center; margin: 10px 0;}

.pet_plus #year-month { width: calc(100% / 3); display: inline-block; font-size: 18px; font-weight: bold; }

.pet_plus #calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 100%; margin: 20px auto;}

.pet_plus #calendar div { text-align: center; padding: 10px; cursor: pointer;}

.pet_plus .edit-list li button.cali-arrow {width: auto; min-width: calc(100% / 10); padding: 0; margin: 0; color: #ddd !important; border: 0; background-color: #fff;}

.pet_plus #calendar .day-header { font-weight: bold; }

.pet_plus #calendar .selected { background-color: var(--c-01); border: 1px solid var(--c-01); color: #fff;}

.pet_plus #calendar .prev-month,
.pet_plus #calendar .next-month { color: #d0d0d0;}


/* 이벤트 (event) */

.event-top > .event-list {display: flex; flex-direction: column; gap: 16rem;}
.event-top > .event-list > .event-list__item {width: 100%; height: 200rem; position: relative; border-radius: 7rem; overflow: hidden;}
.event-top > .event-list > .event-list__item > .event-list__img {width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 70%; filter: brightness(0.8);}
.event-top > .event-list > .event-list__item > .event-list__cont {position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, 0); text-align: center; color: #fff;} 
.event-top > .event-list > .event-list__item > .event-list__cont > strong {font-size: 18rem;}
.event-top > .event-list > .event-list__item > .event-list__cont > p > span {font-size: 14rem; font-weight: 400;}

/* 이벤트 뷰 (event_view) */

.event-detaile__top {display: flex; flex-direction: column; gap: 4rem; margin-top: 16rem;}
.event-detaile__top > strong {font-size: 20rem;}
.event-detaile__top > small {color: var(--g-02); display: flex; gap: 4rem;}
.event-detaile__top > small > span:first-child {margin-right: 4rem;}
.event-detaile__mid {margin-top: 8rem;}
.event-thum > figure {width: 100%; height: 350rem; overflow: hidden;}
.event-thum > figure > img {width: 100%; height: 100%; display: block; object-fit: cover;}

/* 쇼핑 (shop) */

section[class^="category"] {padding-top: 40rem;}
#content.news-board{padding-bottom:50rem;}

.shop .content-header {height: 55rem; padding: 0 20rem; display: flex; justify-content: space-between; align-items: center}
.shop .content-header h2 { height: auto; width: auto; display: block; padding: 0;}
.shop .content-header span {display: inline-block; width: 26rem; height: 26rem; background-image: url(../img/ic-home.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}

.shop .category > h3 {text-align: center;}
.shop .category-box > ul {display: flex; flex-wrap: wrap;}
.shop .category-box > ul li {width: calc(100% / 4); display: flex; gap: 4rem; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-bottom: 8rem;}
.shop .category-box > ul li > figure{width: 62rem; height: 62rem; border-radius: 7rem; overflow: hidden; position: relative; background-color: var(--c-02);}
.shop .category-box > ul li > figure > img{width: 80%; height: 80%; object-fit: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.shop #footer{padding-bottom: 60rem;}
#content.shop{padding-top: 20rem;}

.shop > .content-wrap {padding-bottom: 25rem;}

.shop .shop-main-list__txt > i {display: flex; align-items: center;}
.shop .star {display: inline-block; width: 14rem; height: 14rem; background-image:url(../img/ic-star.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}


.shop-view__visual{background: var(--bg);}
.shop-view__visual .swiper-controls{right: inherit; left: 50%; transform: translateX(-50%);}
.shop-view__visual .swiper-slide{background-color: transparent;}
.shop-view__visual em{display: block;}

.shop-view__title{padding: 24rem 0; display: flex; flex-direction: column;}
.shop-view__title em{font-weight: 600; color: var(--b-01); font-size: 16rem;}
/* .shop-view__title .cmn-price{margin-top: 8rem;} */
.shop-view .cmn-title > h2{font-weight: 700; font-size: 21rem;}

.shop-view .cmn-price strong{color: var(--b-01); font-size:16rem; font-weight: 800;}
.shop-view .cmn-price i{font-size: 14rem;}
.shop-view .swiper-slide .cmn-price strong{color: var(--b-01);}
.shop-view__tab{width: 100%; border-bottom: 1px solid #eee;}
.shop-view__tab li{flex: 1; text-align: center; padding: 12rem ; cursor: pointer; justify-content: center; border: 0; margin-right: 0;}
.shop-view__tab li.active{position: relative;}
.shop-view__tab li.active::before{content: ""; position: absolute; left: 0; width: 100%; height: 2rem; background-color: var(--c-01); bottom: 0;}
.shop-view__tab li i{font-size: 11rem; font-weight: 500; background: none;}
.shop-view .tabs i::after {display: none;}
.shop-view .sec-line{}
.shop-view .tab-content .tab__item > *{padding: 20rem 0;}
.shop-view .shop-view__contents{}
.shop-view__item em{display: block; font-weight: 600; color: var(--b-01); margin-bottom: 4rem; }
.accordion-custom__cont{display: none; padding-top: 12rem;}
.accordion-custom__tit{  cursor: pointer;}
.accordion-custom__tit i.date{font-size:12rem; color: var(--g); font-weight: 300;}
.shop-review__title{display: flex; justify-content: space-between; align-items: center;}
.shop-user{position: relative; display: flex; gap: 8rem; align-items: center;}
.review-pic{gap: 8rem; }
.review-pic + p{margin-top: 12rem;}
.review-pic li{border-radius: 5rem; background-color: var(--bg); overflow: hidden; width: 80rem;}
.review-pic li img{width: 100%;}

.shop-review__star{display: flex; gap: 2rem; margin-bottom: 8rem;}
.shop-review__star i{display: block; width: 14rem; height: 14rem; background: url(../img/ic-star.svg) no-repeat; background-size: cover;}
.shop-review__star i.on{ background: url(../img/ic-star-on.svg) no-repeat;  background-size: cover}
.accordion-custom__list > li{border-bottom: 1px solid #eee; padding: 24rem 0;}
.accordion-custom__list > li:nth-child(1){padding-top: 0;}
.accordion-custom__list > li.on em::after{transform: rotate(-180deg);}
.accordion-custom__cont p{}
.accordion-custom__tit em{display: flex;font-size: 12rem;color: var(--g);position: relative;align-items: center;margin-top: 12rem;}
.accordion-custom__tit em::after{content: ""; transition: all .3s; display: inline-flex;width: 12rem;height: 6rem;margin-left: 7rem;background: url(../img/common/ic-down.svg) no-repeat;}

ul.pagenation{display: flex; justify-content: center; }
.pagenation li{width: 38rem; height: 12rem; opacity: 0.4; display: flex;align-items: center; justify-content: center; font-weight: 600;}
.pagenation li:nth-child(1){opacity: 1;}

.qa-condition{border-radius: 3rem;background-color: #f1f1f1; /* color: #fff; */  font-size: 12rem; padding: 3rem 6rem;}
.qa-condition.on{background-color: var(--b-01); color: #fff; }
.qa-info{display: flex; margin-top: 8rem;}
.qa-info span{font-size: 12rem; font-weight: 300; color: var(--g);}
.qa-info span + span{padding-left: 24rem; position: relative;}
.qa-info span + span::before{content: ""; width: 1px; height: 10rem; background-color: var(--g); opacity: 0.5; position: absolute; left: 12rem; top: 4rem;}
.qa-tit{color: var(--b-01); margin-top: 4rem;}
.qa-tit i{transition: all .3s; display: inline-flex;width: 12rem;height: 6rem;margin-left: 7rem;background: url(../img/common/ic-down.svg) no-repeat;}

.shop-view .select-filter .select-btn {color: #fff !important; border: 1px solid var(--c-01); justify-content: center; border-radius: 7rem; padding: 0;} 
.shop-view .select-filter .select-btn::before,
.shop-view .select-filter .select-btn::after {content: none;}
.shop-view .select-filter .quantity-control {display: flex;} 
.shop-view .product-ui01 {margin-bottom: 16rem;}
.shop-view .product-ui01 > select {border-radius: 7rem; font-size: 14rem; }
.shop-view .product-ui01 select:focus { border-color: #4CAF50; /* 녹색 테두리 */ outline: none; /* 기본 포커스 아웃라인 제거 */ }
.shop-view .product-ui {width: 100%; display: flex; flex-direction: column; gap: 8rem; padding: 20px; background-color: #f0f0f0; border-radius: 10px;}
.shop-view .product-ui > .product-ui-top {display: flex; justify-content: space-between; align-items: center;}
.shop-view .product-ui > .product-ui-bot {display: flex; justify-content: space-between; align-items: center;} 
.shop-view .product-weight { font-size: 14rem; color: #333; }
.shop-view .close-btn::after { content: '✕'; cursor: pointer;}
.shop-view .quantity-control {width: 120rem; display: flex; justify-content: space-between; align-items: center; background-color: #fff; border-radius: 5px; }
.shop-view .qty-btn {max-width: 30rem; min-width: unset; height: 35rem; margin-top: 0; background-color: #fff; border: none; padding: 5px 10px; font-size: 18px; cursor: pointer; color: #111 !important;}
.shop-view .quantity { padding: 0 10px; font-size: 16px; }
.shop-view .product-price { font-size: 16px; color: #333;}
.shop-view .select-btn-box {gap: 4rem;}
.shop-view .product-ui02 {display: flex; justify-content: space-between; margin-top: 16rem; padding-top: 16rem; border-top: 1px solid #ddd;}
.shop-view .product-ui02 > strong {font-size: 18rem;}

.shop-view .cmn-star {display: flex; align-items: center; gap: 4rem;}
.shop-view .cmn-star > i {color: #555;}
.shop-view .cmn-star > small {text-decoration: underline; color: #555;}
.shop-view .cmn-star > div {display: flex; align-items: center; }
.shop-view .cmn-star span {display: inline-block; width: 14rem; height: 14rem; background-image: url(../img/ic-star-on.svg); background-position: center; background-repeat: no-repeat; background-size: cover;}

.shop-view .swiper-slide > a {width: 100%;}


/* 결제상세 (shop_view02) */
.shop-pay-detail.shop_view02 .content-wrap {padding-bottom: 100rem;}
.shop_view02 .between-list {gap: 8rem;}
.shop_view02 .payment-list,
.shop_view02 .payment-list02{display: flex; flex-direction: column; gap: 12rem;}
.shop-pay-detail.shop_view02 .payment-list li {padding-bottom: 16rem; border-bottom: 1px solid #e1e1e1;}
.shop-pay-detail.shop_view02 .payment-list li:last-child {border-bottom: 0;}
.shop_view02 .payment-list02 li {padding-bottom: 16rem; display: flex; justify-content: space-between; border-bottom: 1px solid #e1e1e1;}
.shop_view02 .between-list li {flex-direction: column; align-items: flex-start;}
.shop_view02 .between-list li > em {color: #555}
.shop_view02 .pay-info-li {flex-direction: column; gap: 12rem;}
.shop_view02 .pay-info-li > div {display: flex; flex-direction: column; gap: 2rem;}
.shop_view02 .pay-info-li > div > b {color: #111; font-size: 13rem;}
.shop_view02 .pay-info-li > div > small {color: var(--g-02); font-weight: 400;}
.shop_view02 .tab__item {display: flex; flex-direction: column; gap: 8rem;}
.shop-pay-detail.shop_view02 .payment-list .select-option {gap: 4rem; max-height: 175rem;}
.shop-pay-detail.shop_view02 .payment-list .select-option > li {border: 0;}
.shop-pay-detail .agree-wrap {display: flex; flex-direction: column; gap: 8rem;}
.shop-pay-detail .radio-box + .radio-box {margin-left: 0;}


/* 회사소개 (company) */

.company-prd__list {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12rem;}
.company-prd__list > div {width: calc((100% - 12rem) / 2);}
.company-banner {position: relative; width: 100%;}
.company-banner > figure {width: 100%; height: 350rem; overflow: hidden;  filter: brightness(0.7);}
.company-banner > figure > img {width: 100%; height: 100%; object-fit: cover;}
.company-banner .company-banner-txt {width: 100%; padding: 0 20rem; position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, 20%);}
.company-banner .company-banner-txt > b,
.company-banner .company-banner-txt > p {display: block; width: 100%; color: #fff;}
.company-banner .company-banner-txt > b {font-size: 24rem; margin-bottom: 4rem;}
.company-banner .company-banner-txt > p {font-size: 14rem; font-weight: 300;}


.shop-item-none {text-align: center; color: #bbb; padding: 180rem 0;}

/* 반려생물 등록완료 */
.pet_plus_done .name {color:var(--c-01); font-weight: 800;}
.pet_plus_done .pet_registration_txt_box {display: flex; flex-direction: column;}
.pet_plus_done .pet_registration_txt_box > li {display: flex; justify-content: space-between;}





/* 구독 */
#content.join.join.subscription {padding-top: 0;}
.join.subscription .content-wrap {padding-top: 110rem;}
.join.subscription .subscription-tit  {position: absolute; display: flex; flex-direction: column; gap: 12rem;}
.join.subscription .subscription-tit > small, .join.subscription .subscription-tit > strong {color: #fff;}
.join.subscription .subscription-tit > strong {font-size: 24rem; font-weight: 700;}
.join.subscription .subscription-tit > small {font-size: 16rem; font-weight: 400;}
.join.subscription{width: 100%; height: 100vh; position: relative;}
/* .join.subscription::before {content: ''; display: block; position: absolute; width: 100%; height: 100vh; background-image: url(../img/img_background01.png); background-repeat: no-repeat; filter: blur(1.5px) brightness(0.6);} */
.join.subscription .content-header {background: unset;}
.join.subscription .content-header > .btn-prev {filter: invert(1);}

.join.subscription01 .subscription-tit {display: flex; flex-direction: column; gap: 12rem;}
.join.subscription01 .select-filter .select-btn {width: 100%; height: 48rem; border-radius: 7rem;}
.join.subscription01 .select-filter .select-btn::before {content: none;}

.input-name {font-weight: 500; color: #666;}
.select-wrap {display: flex; flex-direction: column;}
.select-button {display: flex; gap: 8rem;}
.select-button > li {width: calc(100% / 3); cursor: pointer; border: 1px solid #e1e1e1; border-radius: 7rem; height: 48rem; color: #aaa; text-align: center;}
.select-button > li > p {width: 100%;  height: 100%; padding: 10rem;  display: block; text-align: center; line-height: 1.8;}
.select-button > li.active{border: 1px solid var(--c-03); background-color: var(--c-02); color: var(--c-03);}
.select-button > li.active > p{color: var(--c-03); font-weight: 700;}


/* 쇼핑 */

.company_list_wrap {display: flex; flex-direction: column; gap: 20rem;}
.cp_list__wrap > ul {display: flex; flex-direction: column; gap: 20rem;}
.cp_list__wrap > ul > li {border-bottom: 1px solid #e1e1e1; padding-bottom: 20rem;}
.cp_list__wrap > ul > li:last-child {border-bottom: 0;}
.cp_list__wrap > ul > li > div {display: flex; gap: 12rem; align-items: center;}
.cp-list__thum {width: 150rem; height: 150rem;}
.cp-list__thum > img {width: 100%; height: 100%; object-fit: cover;}
.company_list_wrap .cp-txt {font-size: 14rem;}
.company_list_wrap .cp-name {font-size: 18rem; font-weight: 800;}
.company_list_wrap .cp-info {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}

.main-sec .main-list__txt > div.prd-review > i > img {width: 100%; height: 100%; object-fit: cover;}

/* 쇼핑 카테고리 */

.list .product-list__txt {display: flex; flex-direction: column;}
.list .product-list__txt > .prd-review {display: flex; align-items: center; gap: 2rem; color: #bbb; font-weight: 600;}
.list .product-list__txt > .prd-shop {font-size: 12rem; font-weight: 800; color: #888; }
.list .product-list__txt > .prd-name {font-size: 14rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}
.list .product-list__txt > .prd-pay {font-size: 16rem; font-weight: 800;}
.list .product-list__txt > .prd-review > i {width: 12rem; height: 12rem; overflow: hidden;}
.list .product-list__txt > .prd-review > i > img {width: 100%; height: 100%; object-fit: cover;}
.list .product-list__txt > .prd-review > small {font-size: 12rem}


/* 상품상세보기 */

.cmn-graph-box {width: 100%; display: flex; justify-content: center; margin-top: 20rem;}
.cmn-graph-box > img {width: 63%; height: auto;}
.cmn-title-p {color: var(--g-01); font-size: 14rem;}

.com-sec .swiper-slide span {border-radius: 3rem; font-size: 11rem; background-color: #C2AC91; color: #fff; padding: 2rem 8rem;}

/* 구독 */

.subscription01 .select-wrap,
.subscription02 .select-wrap {gap: 8rem;}

/* 추천 */
#content.recommend {padding-top: 20rem;}

/* 평가 */
#content.sample_test .tab_navigation > ul > li {width: calc(100% / 3);}
.test_button_wrap {width: 100%;}
.test_button_wrap > button {width: 100%; padding: 12rem; text-align: center; border: 1px solid var(--c-03); border-radius: 7rem; color: var(--c-03); background-color: var(--c-02); font-size: 14rem; font-weight: 600;}
.test .select-button {justify-content: space-between;}
.test .select-button > li {width: 60rem; border-radius: 100%; height: 60rem;}
.test .select-button > li > p {width: 100%; height: 100%; padding: 12rem; display: block; text-align: center; line-height: 2.5;}
.test .test-graph__box {width: 80%; height: auto; margin: 0 auto; margin-bottom: 12rem;}
.test .test-tit__small {font-size: 17rem; color: #333; margin-bottom: 12rem;}
.test .test-graph__box > img {width: 100%; height: 100%; object-fit: cover; display: inline-block;}
.test .test-note__wrap {display: flex; flex-direction: column; gap: 12rem;}
.test .test-note__wrap > li {display: flex; justify-content: space-between; padding-bottom: 12rem; border-bottom: 1px dashed #e1e1e1;}
.test .test-note__wrap > li:last-child {border: 0;}
.test .sec-line {margin: 25rem 0;}
.test .select-container {display: flex; flex-direction: column; gap: 20rem;}
.test .prd-review {display: flex; align-items: center;}

.test .main-list__txt,
.shop_view .main-list__txt {display: flex; flex-direction: column; gap: 2rem; margin-top: 10rem;}
.test .main-list__txt > span,
.shop-view .main-list__txt > span{display: block; width: max-content; height: auto; padding: 2rem 8rem 1rem; text-align: center; line-height: 1.45; font-size: 11rem; color: #fff; background-color: #C2AC91; border-radius: 4rem; margin-bottom: 5rem;}
.test .main-list__txt > small,
.shop-view .main-list__txt > small{font-size: 12rem; font-weight: 800; color: #888;}
.test .main-list__txt > strong.prd-name,
.shop-view .main-list__txt > strong.prd-name {font-size: 14rem; display: -webkit-box;/* Flexbox 설정 */ -webkit-box-orient: vertical;/* 세로 방향으로 정렬 */ -webkit-line-clamp: 1; /* 표시할 줄 수 */overflow: hidden;/* 넘치는 부분 숨김 */text-overflow: ellipsis; }
.test .main-list__txt > b.prd-pay,
.shop-view .main-list__txt > b.prd-pay {font-size: 13rem; font-weight: 600;}
.test .main-list__txt > div.prd-review,
.shop-view .main-list__txt > div.prd-review {display: flex; gap: 2rem; color: #bbb; font-weight: 600;}
.test .main-list__txt > div.prd-review > i,
.shop-view .main-list__txt > div.prd-review > i {display: block; width: 11rem; height: 14rem; overflow: hidden;}

.sample_test .shop-item__inr > span,
.shop-pay .shop-item__inr > span{display: block; width: max-content; height: auto; padding: 2rem 8rem 1rem; text-align: center; line-height: 1.45; font-size: 11rem; color: #fff; background-color: #C2AC91; border-radius: 4rem; margin-bottom: 5rem;}

.recommend .main-header__inr::after {content: ''; display: block; width: calc(100% + 100rem); height: 1px; background-color: #e1e1e1; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}



.bg-video {position: absolute; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: brightness(0.6);}
.bg-video > source {display: block; width: 100%; height: 100%; }


.mini-txt {font-size: 12rem;}
.coffe-name {font-size: 13rem; font-weight: 700;}
.v--shop p.coffe-type {font-size: 12rem; color: #111;}