@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:768rem;}
#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:16rem;  padding-left:16rem; padding-bottom:90rem;/* 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: 91rem;  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: 0 16rem 16rem; 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: 500; color: var(--b-01); font-size: 18rem;}
.shop-view__title .cmn-price{margin-top: 4rem;}
.shop-view .cmn-title > h2{font-weight: 700; font-size: 21rem;}

.shop-view .cmn-price strong{color: var(--b-01); font-size:20rem; font-weight: 700;}
.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: inherit; font-weight: 500; background: none; margin-left: 2rem; }
.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;}
.pagenation .next{display: none;}

.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: 4rem; 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: 4rem; font-size: 15rem; }
.shop-view .product-ui01 select:focus { border-color: var(--c-01); /* 녹색 테두리 */ outline: none; /* 기본 포커스 아웃라인 제거 */ }
.shop-view .product-ui {width: 100%; display: flex; flex-direction: column; gap: 8rem; padding: 20px; background-color: #f0f0f0; border-radius: 4rem;}
.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: 3rem; }
.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: 20rem;}
.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 #eee;}
.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 #eee;}
.shop_view02 .between-list li {flex-direction: column; align-items: flex-start;}
.shop_view02 .between-list li > em {color: #333; font-weight: 600;}
.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 !important;}
.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;}
.adress_box{display: flex; flex-direction: column; gap: 8rem; width: 100%;}
.shop-pay-detail .agree-wrap label > i{color: #888;}

.shop-pay-detail .radio-box{position: relative;}
.agree-wrap button{font-size: 0; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 30rem; height: 30rem;}
.agree-wrap button:after{content: ''; display: inline-block; position: relative; width: 6rem; height: 6rem; border-top: 1px solid #999; border-right: 1px solid #999; position: absolute; display: block; right: .8em; top: 50%; transform: translateY(-50%) rotate(45deg)}



.a_all{padding-bottom: 12rem; border-bottom: 1px solid #eee; margin-bottom: 4rem;}


.pay_total_p{padding-top: 16rem; border-top: 1px solid #eee; color: #666; line-height: 1;}
.pay_total_p strong{font-weight: 500;}
.pay_total_p > div{display: flex; justify-content: space-between; align-items: center;}
.pay_total_p > div + div{margin-top: 8rem;}
.pay_total_p > div:last-child strong{font-size: 18rem; color: var(--c-01); font-weight: 700;}

.shop_view02 div.tab_pay2{display: none;}

.pay_notice{padding-top: 8rem;}
.pay_notice > b{color: #666; font-weight: 500;}
.pay_notice > b > b{color: var(--c-01);}
.pay_notice > div{ padding: 10rem 14rem; background: #f8f8f8; color: #888; border-radius: 4rem; font-size: 14rem; margin-top: 10rem;}
.pay_notice > div p{font-weight: 600; padding-bottom: 6rem;}
.pay_notice > div small{padding-left: 10rem; display: block; position: relative;}
.pay_notice > div small:before{content:'-'; display: inline-block; position: absolute; top: -1rem; left: 0; color: #888;}


/* 회사소개 (company) */

.company-prd__list {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 36rem 10rem;}
.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;}





/* 주문/제작 */
.custom_bg{background: url(../img/custom_bg.jpg) no-repeat center bottom; background-size: cover;}
.custom_box{position: relative; top: 10%;}
.custom_txtbox{text-align: center; display: flex; align-items: center; justify-content: center; gap: 10rem; flex-direction: column;}
.custom_txtbox i{color: #E9631A; font-family: "Noto Serif KR", serif; font-weight: 700;}
.custom_txtbox h5{font-size: 24rem; line-height: 1.3; font-weight: 600;}
.custom_txtbox p{opacity: .7; font-size: 15rem; line-height: 1.5; } 
.custom_btn button{font-size: 16rem; display: flex; align-items: center; gap: 6rem; color: #fff; border-radius: 4rem; padding: 15rem 16rem; background: rgba(0,0,0,.42); width: max-content; margin: 0 auto; margin-top: 30rem;}

.custom-tit i{color: var(--c-01); font-weight: 700;}

.cus_price{display: flex; align-items: center; justify-content: space-between; color: #555; background-color: var(--c-02); border-radius: 4rem; padding: 12rem 16rem; margin-top: 10rem;}
.cus_price p{color: var(--c-01); font-size: 20rem; font-weight: bold;}

#content.join.join.custom {padding-top: 0;}
.join.custom .content-wrap {padding-top: 110rem;}
.join.custom .custom-tit  {position: absolute; display: flex; flex-direction: column; gap: 12rem;}
.join.custom .custom-tit > small, .join.custom .custom-tit > strong {color: #fff;}
.join.custom .custom-tit > strong {font-size: 24rem; font-weight: 700;}
.join.custom .custom-tit > small {font-size: 16rem; font-weight: 400;}
.join.custom{width: 100%; height: 100vh; position: relative;}
/* .join.custom::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.custom .content-header {background: unset;}
.join.custom .content-header > .btn-prev {filter: invert(1);}

.join.custom01 .custom-tit {display: flex; flex-direction: column; gap: 12rem;}
.join.custom01 .select-filter .select-btn {width: 100%; height: 48rem; border-radius: 7rem;}
.join.custom01 .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; flex-wrap: wrap;}
.select-button > li {width: calc((100% - 8rem) / 2); font-size: 15rem; cursor: pointer; border: 1px solid #f8f8f8;  border-radius: 4rem;  color: #888; text-align: center; background: url(../img/common/radio_nochecked.svg) no-repeat left 14rem center #f8f8f8; background-size: 20rem;}
.select-button > li > p {width: 100%;  height: 100%; padding: 12rem 14rem; padding-left: 40rem;  display: block; text-align: left; line-height: 1.4;}
.select-button > li.active{border: 1px solid var(--c-01); background-color: #fff; background-image: url(../img/common/radio_checked.svg);}
.select-button > li.active > p{color: var(--c-01); font-weight: 600;}


/* 색상선택 ui */
.select-wrap.color-wrap .select-button{gap: 0; width: 100%; border: 1px solid #eee;}
.select-wrap.color-wrap .select-button .button{width: calc(100% / 7); padding-bottom: 14.3%; background-image: none; border-radius: 0; position: relative; border: transparent;}
.select-wrap.color-wrap .select-button .button.active{border: none; box-shadow: 0 0 0 3px #E9631A inset; z-index: 3;}
.select-wrap.color-wrap .select-button .button.active:after{border-top: 16px solid #E9631A;
    border-bottom: 8rem solid #E9631A;
    border-top: 8rem solid transparent;
    border-left: 8rem solid #E9631A;
    border-right: 8rem solid transparent;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(180deg);}

.select-color{border: 1px solid #eee; padding: 10rem; margin-top: 16rem; display: flex; align-items: center; gap: 16rem;}
.select-color .color{width: 70rem; height: 70rem; }
.select-color .color-txt i{font-size: 13rem; color: #888; margin-bottom: 4rem;}
.select-color .color-txt p{font-size: 15rem; }
.select_txt_input{display: none;}
/* .select_txt_input.visible{display: block;} */

.cus-date{padding: 0 16rem 14rem; border-bottom: 1px solid #eee; font-size: 14rem; color: #888; text-align: right; display: flex; justify-content: space-between;}
.cus-date b{font-weight: 500;}



/* 쇼핑 */

.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: 700;}
.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}

.prd-name{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16rem; font-weight: 500; line-height: 1.2;} 
.prd-pay{font-size: 18rem; font-weight: 700; line-height: 1.2;}
.product-list__txt{display: flex; flex-direction: column; gap: 2rem;}

/* 상품상세보기 */

.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;}

/* 구독 */

.custom01 .select-wrap,
.custom02 .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: #555; margin-bottom: 10rem;}
.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; padding: 16rem; border-radius: 4rem; border: 1px solid #eee;}
.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; padding-bottom: 0;} 
.test .test-note__wrap > li i{color: #888;}
.test .test-note__wrap > li p{font-weight: 600;}
.test .sec-line {margin: 20rem 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: 16rem; font-weight: 800;}
.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: 3rem 6rem 3rem; text-align: center; line-height: 1.45; font-size: 12rem; color: #fff; background-color: #B1B3BA; border-radius: 2rem; 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: 0; transform: translateY(-50%); filter: brightness(0.6);}
.bg-video > source {display: block; width: 100%; height: 100%; }



/* 알림 */
.alarm_list{border-bottom: 1px solid #eee; border-top: 1px solid #eee;}
.alarm_list li + li{border-top: 1px solid #eee;}
.alarm_list li{padding: 20rem 16rem; padding-left: 70rem; background: url(../img/alarm.svg) no-repeat left 16rem center; background-size: 40rem;}
.alarm_list li > div{display: flex; align-items: center; gap: 8rem;}
.alarm_list li i{color: #999; font-size: .9em;}
.alarm_list li > p{color: #555; margin-top: 2rem; font-size: 13rem;}


/* about 제품리스트 */
.about_list{ margin-top: 18rem;}
.about_list ul{display: flex; flex-direction: column; gap: 42rem;}

.about_list .imgwrap{position: relative; width:100%; padding-bottom: 60%;}
.about_list .imgwrap img{position: absolute; width: 100%; height:100%; left:50%; top:50%; transform: translate(-50%, -50%); object-fit: cover;}
.about_list .txtwrap{display: flex; flex-direction: column; gap: 10rem; margin-top: 20rem;}
.about_list .txtwrap span{color: #aaa; line-height: 1; font-size: 13rem;}
.about_list .txtwrap h6{font-size: 16rem; font-weight: 500; line-height: 1; }
.about_list .txtwrap h6 b{font-weight: 700; font-size: 20rem;}
.about_list .txtwrap p{color: #555; font-weight: 400;}