* { padding: 0;  margin: 0; font-family: system-ui}
body, html { position: relative; width: 750px; min-height: 100vh; margin: 0 auto; background: #F6F6F6; }
a { text-decoration: none; }
img { max-width: 100%; }

main{  position: relative; min-height: calc(100vh - 176px) ; padding-bottom: 176px; }

.banner{ position: relative; width: 750px; height: 580px; background: url("../img/banner_bg.png") center bottom no-repeat; background-size: 100% auto; z-index: 1; margin-bottom: -220px; z-index: 1; }

.banner .logo{ position: absolute; top:40px; left: 56px; width: 296px; height: 200px; line-height: 0; }
.banner .pic{ position: absolute; top:132px; left: 72px; width: 646px; height: 362px; line-height: 0; }

.box{ position: relative; margin-left: 32px; width: 686px; height: 676px; background: url("../img/cardbg.png?ver=20250415111") center top no-repeat;  z-index: 3; /*margin-bottom: 32px; */transition: all 500ms cubic-bezier(.38,.04,.35,.96) 100ms;}

.box.lv0{ border-radius: 0 0 24px 24px }
.box + .box{ margin-top: 60px; }
.box .header{ position: absolute; width: 96px; height: 96px; overflow: hidden; line-height: 0; border-radius: 100% 100%; top: 32px; left: 34px; }
.box .header img{position: relative; height: 100%; width: 100%; object-fit: cover;	}
.box .desc{ position: absolute; top: 32px; left: 142px; height: 96px; display: flex;flex-flow: column  nowrap;  justify-content: center; align-items: flex-start;  }
.box .desc .tit{ position: relative;font-size: 32px; /*font-weight: bold;*/ line-height: 42px; height: 42px; color: #333333; }

.box .desc .tit.name{ display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical; width: 240px; whit-space: nowrap; overflow: hidden; }

.box .desc .txt{position: relative; font-size: 26px;  line-height: 36px; height: 36px; color: #666666; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
.box .icon{ position: absolute; top: -50px; right: 16px; width: 196px; line-height: 0;  }
.box .bar{ position: absolute; width: 100%; top: 158px; }
.box .bar .star{ position: absolute; width: 172px; height: 88px; background: url("../img/star.png") center no-repeat; background-size: 100% 100%; top: 26px; left: 28px; z-index: 2; }


.equity + .box{ margin-top: 60px; }

.box .bar .tit{ position: absolute; left: 52px; top:50px; z-index: 3; }
.box .bar .txt{ position: absolute; left: 52px; top:102px; color: #666666; z-index: 3;  font-size: 26px; }
.box .bar .txt b{ color: #32666C; }

.box .bar .btn{ position: absolute; top: 48px; right: 28px; width: 172px; height: 76px; line-height: 76px; background: linear-gradient( 135deg, #549F9F 0%, #32656B 100%); border-radius: 38px; font-size: 28px; color: #FFFFFF; font-weight: bold; text-align: center; }
.box .bar .btn .tips{ position: absolute; background: linear-gradient( 180deg, #E2455A 0%, #F77387 100%); border: 2px solid #FFFFFF; border-radius: 100% 100%; width: 40px; height: 40px; line-height: 40px; font-size: 22px; top: -20px; right: 0px;  }

.box .ic{ position: absolute; width: 100%; top: 350px; display: flex; justify-content: space-around; align-items: stretch; }
.box .ic .item{ position: relative; width: 33.33%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; }
.box .ic .item:after{ position: absolute; width: 4px; height: 106px; right: -2px; content: ""; top: 0; bottom: 0;  margin: auto; background: url("../img/divider.png") center no-repeat; }
.box .ic .item:last-child::after{ display: none; }
.box .ic .item .pic{ position: relative;  width: 80px; height: 80px; line-height: 0;  }
.box .ic .item .pic img{ position: relative;  width: 100%; height: 100%;  }
.box .ic .item .txt{ position: relative; width: 100%; text-align: center; font-size: 22px;  color: #376E74; }
.box .ic .item .price{ position: relative; width: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items:baseline; font-size: 28px;  color: #376E74; line-height: 50px; margin-top: 10px; }

.box .ic .item .price span{ position: relative; display: inline-block; transform: scaleX(0.8); transform-origin: 70%; line-height: 1; font-size: 44px; letter-spacing:-2px; font-weight: bold; /*padding: 6px; margin-right: -8px;*/ }


.box .btn-l{ position: absolute; width: 100%; bottom: 32px; width: 630px; height: 70px; background: rgba(53,192,178,0.15); border-radius: 48px; border: 4px solid #32666C; text-align: center; line-height: 70px; color: #32666C; font-size: 28px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin: 0 auto; left: 0; right: 0;  }
.box .btn-l .icon{ position: relative; top: auto; right: auto; width: 28px; margin-right: 8px; }




.equity{ position: relative; margin-left: 32px; width: 686px;/* height: 554px; */ height: 470px;  z-index: 2; margin-bottom: 32px; }
.equity .bg{ position: absolute; width: 100%; height: 100%; border-radius: 0px 0px 24px 24px; /*background:url("../img/cardbg1.png") center no-repeat; */  background: #FFFFFF; background-size: 100% 100%; top: 0; left: 0; }

.equity .bar{ position: absolute; width: 100%; top: 0px; }
.equity .bar .star{ position: absolute; width: 172px; height: 88px; background: url("../img/star.png") center no-repeat; background-size: 100% 100%; top: 26px; left: 28px; z-index: 2; }
.equity .bar .tit{ position: absolute; left: 52px; top:50px; z-index: 3; }
.equity .bar .txt{ position: absolute; left: 52px; top:102px; color: #666666; z-index: 3;  font-size: 24px; }
.equity .bar .txt b{ color: #32666C; }

.equity .bar .btn{ position: absolute; top: 48px; right: 28px; width: 172px; height: 76px; line-height: 76px; background: linear-gradient( 135deg, #549F9F 0%, #32656B 100%); border-radius: 38px; font-size: 28px; color: #FFFFFF; font-weight: bold; text-align: center; }
.equity .bar .btn .tips{ position: absolute; width: 132px; height: 68px; background: url("../img/tagbg.png") center top  no-repeat; background-size: 100% 100%; top: -28px; right: 0; }
.equity .bar .btn .tips .txt{ position: absolute; width: 100%; height: 40px; line-height: 40px; color:#865A18; font-size: 22px; top: 0; left: 0; 	}

.equity .ic{ position: absolute; width: 100%; top: 174px; display: flex; justify-content: space-around; align-items: stretch; }
.equity .ic .item{ position: relative; width: 224px; /*height: 306px;*/ height: 236px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; margin-top: 54px; background: url("../img/cardbg2.png") top center no-repeat; background-size: 100% 100%; }
.equity .ic .item .pic{ position: relative; margin-top: -54px; width: 128px; height: 128px;  line-height: 0;  }
.equity .ic .item .txt{ position: relative; width: 100%; text-align: center; font-size: 22px;  color: #376E74; }
.equity .ic .item .price{ position: relative; width: 100%; text-align: center; font-size: 28px;  color: #376E74; margin: 20px auto;}
.equity .ic .item .price span{ font-size: 44px; letter-spacing:-2px; padding: 6px; }
.equity .ic .item .btn{ position: relative; width: 164px; margin: 20px auto; height: 60px; line-height: 60px; background: rgba(53, 192, 178, 0.15); border-radius: 30px;  color: #32666C; font-size: 22px; text-align: center; display: flex; flex-flow: row  nowrap; justify-content: center;align-items: center; }

.equity .ic .item .unlock{ background: linear-gradient(to right, #FFECBD 0%,#FFE0B2 100%); color: #A07028; }
.equity .ic .item .unlock:before{ position: relative; display: inline-block; width: 30px; height: 30px; content: ""; background: url("../img/icon/ic_unlock.png") center no-repeat; }

.equity .ic .item .ok{ background: linear-gradient(to right, #FFECBD 0%,#FFE0B2 100%); color: #A07028; }
.equity .ic .item .ok:before{ position: relative; display: inline-block; width: 30px; height: 30px; content: ""; background: url("../img/icon/ic_ok.png") center no-repeat; }



@-webkit-keyframes hidebox {
  0% {  opacity: 1; }
  100% { opacity: 0; display: none; }
}

@-webkit-keyframes showbox {
  0% { opacity: 0; display: none; }
  100% { opacity: 1; }
}



.other{ position: relative; width: 100%; display: flex; flex-flow: row nowrap;  justify-content: center; align-items: center; margin-top: 32px; }

.other .item{ position: relative; width: 330px; height: 248px; border-radius: 24px; background: #FFFFFF; overflow: hidden; margin: 0 12px; }
.other .item .tit{ position:absolute;  top: 34px; left: 32px; }
.other .item .txt{ position:absolute;  top: 78px; left: 32px; font-size: 22px; color: #666666; }
.other .item .pic{ position:absolute; width: 196px; height: 196px; bottom: 0; right: 0; }
.other .item .icon{ position:absolute; width: 48px; height: 48px; bottom: 28px; left: 28px; }


.banner-shop{ position: relative; width: 750px; height: 580px; background: url("../img/banner_bg.png") center top  no-repeat; background-size: 100% 100%; z-index: 1; margin-bottom: -130px; z-index: 1; }

.banner-shop .logo{ position: absolute; top:40px; left: 56px; width: 296px; height: 200px; line-height: 0; }
.banner-shop .pic{ position: absolute; top:140px; left: 138px; width: 580px; height: 314px; line-height: 0; }
.banner-shop .discount{ position: absolute; top:324px; left: 32px; width: 220px; height: 110px; line-height: 0; }


.search{ position: relative; width: 646px; height: 88px; background: #FFFFFF; border-radius: 24px; overflow: hidden; z-index: 10; margin: 0 auto; padding: 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.search .input { position: relative; width: calc(100% - 48px); height: 100%; margin: auto; padding: 0 24px; background: #F0F8F7;border-radius: 16px; }
.search .input input{ position: relative; width: 100%; height: 100%; border:none; background: rgba(0,0,0,0); font-size: 30px; color: #979797; outline: none; }

.search .btn{ position: relative; width: 56px; height: 56px; flex:none; background: url("../img/icon/search.png") center no-repeat; margin-left: 20px; }

.shop{ position: relative; width: 100%;  }
.shop .item{ position: relative; width: 686px; margin: 58px auto; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.shop .item .pic{ position: relative; width: 344px; height: 336px; border-radius: 24px; }
.shop .item .pic img{ position: absolute; bottom: 0; left: 0; right: 0; margin: auto; } 
.shop .item .pic01{ background: linear-gradient( 135deg, #C3D6DC 0%, #99A9AF 100%); }
.shop .item .pic02{ background: linear-gradient( 316deg, #DDBA83 0%, #EEDCBF 100%); }
.shop .item .pic03{ background: linear-gradient( 316deg, #F9B5A4 0%, #FBD5CA 100%); }
.shop .item .pic04{ background: linear-gradient( 136deg, #B6E5E0 0%, #84D3C9 100%); }

.item .info{ position: relative; width: 262px; height: 236px; border-radius: 0px 24px 24px 0px; background: #FFFFFF; padding: 40px 30px; display: flex; flex-flow: column nowrap; justify-content: space-between; }
.item .info .head-box .tit{ color:#333333; font-weight: bold; font-size: 32px; line-height: 44px; }
.item .info .head-box .txt{ color:#666666;  font-size: 24px; line-height: 34px; }

.item .info .desc{ position: relative; width: 100%; display: flex; flex-flow: row nowrap;  justify-content: space-between; align-items: center;}
.item .info .desc .text{ color:#999999;  font-size: 22px; line-height: 32px; }
.item .info .desc .more{ width: 76px; height: 76px; border-radius: 100%; background: #ECF3F2 url("../img/icon/ic_more.png") center  no-repeat; }

.banner-my{ position: relative; width: 750px; height: 408px; background: url("../img/my.png") center top  no-repeat; background-size: 100% 90%; z-index: 1; margin-bottom: -160px; z-index: 1; }


.banner-my .user-info{ position: relative; top: 48px; left: 32px; width: 686px;; display: flex; flex-flow: row nowrap; justify-content:flex-start; align-items: center; }
.banner-my .user-info .user-header{ position: relative; width: 128px; height: 128px; border:4px solid #FFFFFF; border-radius: 100% 100%; overflow: hidden; }
.banner-my .user-info .desc{ position: relative; padding-left: 16px; }
.banner-my .user-info .desc .name{ position: relative; color: #333333; font-size: 36px; line-height: 46px; }
.banner-my .user-info .desc .txt{ position: relative; color: #666666; font-size: 24px; line-height: 34px; }

.card-list{ position: relative;  width: 686px; margin:  auto; z-index: 5; margin-bottom: 50px; }
.card-list .card{ position: relative; width: 682px; height: 240px; margin-bottom: 32px; }
.card-list .card .bg{ position: absolute; width: 682px; height: 100%; border-radius: 24px; overflow: hidden; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border: 2px solid #FFFFFF; }

.card-list .card .bg .tips{ position: absolute; color: #A07028; font-size: 22px; top: 32px; left: 32px; }
.card-list .card .bg .desc{ position: absolute; width:612px; left: 34px; top: 96px; display: flex; flex-flow: row nowrap; justify-content: space-between;  align-items: center; }

.card-list .card .bg .desc .btns .btn{ position: relative; width: 172px;height: 76px; line-height: 76px; background: linear-gradient( 135deg, #549F9F 0%, #32656B 100%); border-radius: 38px; text-align: center; font-size: 28px;  font-weight: bold; color: #FFFFFF; }

.card-list .card .bg .desc .word .tit{ position: relative; color: #333333; font-size: 32px; line-height: 40px;}
.card-list .card .bg .desc .word .txt{ position: relative; color:#666666; font-size: 24px; line-height: 40px;}

.card-list .card .bg .header{ position: absolute; width: 80px; height: 80px; border-radius: 100% 100%; overflow: hidden; border:2px solid #FFFFFF; top: 36px; left: 36px;}
.card-list .card .bg .header img{position: relative; height: 100%; width: 100%; object-fit: cover;	}

.card-list .card .bg .desc1{ position: absolute; top: 32px; left: 142px; height: 96px; display: flex;flex-flow: column  nowrap;  justify-content: center; align-items: flex-start;  }
.card-list .card .bg .desc1 .name{ position: relative;font-size: 32px;/* font-weight: bold;*/ line-height: 40px; height: 40px; color: #333333; display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical; width: 200px; whit-space: nowrap; overflow: hidden; }

.card-list .card .bg .desc1 .txt{position: relative; font-size: 26px;  line-height: 38px; height: 38px; color: #666666; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
.card-list .card .bg .desc1 .txt .gender{ margin-left: 2px; }
.card-list .card .icon{ position: absolute; top: -50px; right: 16px; width: 120px; height: 120px; line-height: 0; z-index: 4; display: none; }

.card-list .card{ position: relative; width: 682px; height: 260px; margin-bottom: 32px; }
.card-list .card .btns{ position: absolute; display: flex; top: 60px; right: 32px; }
.card-list .card .btns .btn{ position: relative; width: 140px; height: 54px; line-height: 54px; background: linear-gradient( 135deg, #549F9F 0%, #32656B 100%); border-radius: 38px; text-align: center; font-size: 24px; color: #FFFFFF; margin-left: 8px; }
/*.card-list .card .btns .btn:nth-child(1){ background: #df4a42; }*/

.card-list .card.lv0 .btns{ position: relative;  top: auto; right: auto; }

/*.card-list .card:first-child::before{ position: absolute; top: -84px; z-index:1; width: 654px; height: 102px; background: url("../img/my/mask.png") center no-repeat; content: "我的宠物权益"; color: #FFFFFF; font-size: 24px; font-weight: bold; padding-top: 18px; padding-left:32px;  border-radius: 24px 24px 0px 0px; }*/
.card-list .card:first-child::after{ position: absolute; top: -138px; right: 32px; z-index:4; width: 230px; height: 184px; background: url("../img/my/pic01.png") center no-repeat; content: ""; border-radius: 24px 24px 0px 0px; }
.card-list .card + .card{ margin-top: 20px; }

.card-list .card.lv0{ height: 220px; }
.card-list .card.lv0 .bg{ background: url("../img/my/bg0.jpg") center no-repeat; background-size: 100% 100%; }
.card-list .card.lv1 .bg{ background: url("../img/my/bg1.jpg") center no-repeat; background-size: 100% 100%; }
.card-list .card.lv2 .bg{ background: url("../img/my/bg2.jpg") center no-repeat; background-size: 100% 100%; }
.card-list .card.lv3 .bg{ background: url("../img/my/bg3.jpg") center no-repeat; background-size: 100% 100%; }
.card-list .card.lv0 .icon{ background: url("../img/icon/lv0.png") center no-repeat; background-size: 100% 100%; }
.card-list .card.lv1 .icon{ background: url("../img/icon/lv1.png") center no-repeat; background-size: 100% 100%; }
.card-list .card.lv2 .icon{ background: url("../img/icon/lv2.png") center no-repeat; background-size: 100% 100%; }
.card-list .card.lv3 .icon{ background: url("../img/icon/lv3.png") center no-repeat; background-size: 100% 100%; }

.card-list .card.lv1::after{ display: none; }
.card-list .card.lv2::after{ display: none; }
.card-list .card.lv3::after{ display: none; }

.indate{ position: absolute; width: 574px; background: rgba(255,255,255,0.5); top: 136px; left: 32px; height: 60px; padding:16px 24px; color:/* #2556A4*/#666; font-size: 24px; line-height: 34px; }

.indate:before{ position: absolute; width:0;height:0;border-style:solid;border-width:0 8px 10px 8px;border-color:transparent transparent rgba(255,255,255,0.5) transparent; content: ""; left: 36px; top: -10px; }

.nav-bar{ position: relative; width: 676px; border-radius: 16px; background: #FFFFFF; overflow: hidden; margin: 32px auto; }
.nav-bar .item{  position: relative; width: 622px; padding: 28px; display: flex; flex-flow: row nowrap; justify-content: flex-start;font-size: 28px; align-items: center; }
.nav-bar .item:before{ position: absolute; bottom: -1px; left: 0; right: 0; margin: auto; width: 622px; height: 2px; background: #E8E8E8; content: ""; }
.nav-bar .item:last-child::before{ display: none; }

.nav-bar .link:after{ position: absolute; width: 40px; height: 40px; background: url("../img/icon/ic_more1.png") center no-repeat; top: 0; bottom: 0; margin: auto;content: ""; right: 24px; }

.nav-bar .item.logout{ font-size: 32px; font-weight: bold; justify-content: center; }

.nav-bar .shop{ font-weight: bold; color: #32666C;  }
.nav-bar .shop .icon{ line-height: 0; margin-right: 6px; }

.com-bg{ position:absolute; width: 750px; height: 580px; background: url("../img/banner_bg.jpg") center top  no-repeat; background-size: 100% 100%; z-index: 1; }


.top{ position: relative; width: 750px; height: 88px; z-index: 2; margin-bottom: 32px; }
.top .tit{ position: relative; width: 750px; height: 88px; line-height: 88px; text-align: center; color: #000000; font-size: 34px; font-weight: bold;  }
.top .back{ position: absolute; width: 88px; height: 88px; z-index: 20; }
.top .back:after{ position: absolute; width: 40px; height: 40px; background: url("../img/icon/ic_back.png") center no-repeat; top: 0; bottom: 0; margin: auto;content: ""; left: 20px; }

.from{ position: relative; width: 686px; margin: auto; z-index: 2; }
.from .item-tit{ position: relative; color: #32666C; font-size: 24px; font-weight: bold; line-height: 1; margin-bottom: 18px; }
.from .item{ position: relative;  background: #FFFFFF; border-radius: 24px; padding: 32px; width: 622px; margin-bottom: 28px; }


.from .item .st{ position: absolute; top: 32px; right: 32px; font-size: 28px; line-height: 40px; text-align: right; color: #549F9F; font-weight: bold; }
.from .item .field{ position: relative; width: 100%; margin-bottom: 28px; }
.from .item .field:last-child{ margin-bottom: 0; }
.from .item .field .tit{ color: #333333; font-size: 28px; font-weight:bold; height: 40px; line-height: 40px; margin-bottom: 10px; }
.from .item .field .opt { position: relative; width: 100%; }
.from .item .field .txt { position: relative; width: 100%; font-size: 26px; }
/*
.from .item.no {  filter: grayscale(90%); opacity: 0.8; }*/


.from .item.no .field .tit{ color: #999999 !important;}
.from .item.no .field .txt{ color: #999999 !important;}
.from .item.no .st{ color: #999999 !important;}

.from .item .tips{ position: relative; width: 100%;font-size: 24px; color: #333333; }

.from .item .input-box{ position: relative; width: 100%; height: 88px; line-height:  88px; padding: 0; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; outline: none; border-radius: 16px; background: #F0F8F7; font-size: 32px; }

 .from .item .select-show, .from .item .input-show{ position: relative; width: calc(100% - 48px); height: 88px; line-height:  88px; padding: 0; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; outline: none; border-radius: 16px; background: #F0F8F7; font-size: 32px; padding: 0 24px; color: #333333;  }

.from input[type="text"], .from input[type="number"], .from input[type="tel"], .from input[type="password"], .from input[type="date"] { position: relative; width: calc(100% - 48px); height: 88px; line-height: 88px; padding: 0; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; outline: none; background:rgba(0,0,0,0); color: #333333; font-size: 32px; padding: 0 24px; }

.from .select-box{ position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; }
.from .select-box select{ position: relative; width: 100%; height: 100%; appearance:none; -moz-appearance:none; -webkit-appearance:none; }
.from .select-show::after { position: absolute; content: '';  display: block; right: 28px; top: 24px;  width: 24px; height: 24px; border-bottom: 4px solid #aaabac;  border-right: 4px solid #aaabac;  transform: rotate(45deg); }

.from .two-field { position: relative; display: flex; flex-flow: row nowrap; width: 100%; }
.from .two-field .field:first-child{ margin-right: 8px; }
.from .two-field .field:last-child{ margin-left: 8px; }

.req{ position: relative; width: 16px; line-height: 16px; margin-left: 4px;  }
.req:before{ position: relative; content: "*"; color:#FF0000;}
::placeholder, .placeholder { color: #999999 !important; }

.upload{ position: relative; width:calc(100% + 16px); margin: 0 -8px; display: flex; flex-flow: row wrap; }
.upload .item{ padding: 0; margin: 8px; width: calc(33.33% - 16px);  aspect-ratio: 1 / 1;  background: #F0F8F7; overflow: hidden; border-radius: 16px;  }
.upload .item .add{ position: relative; width: 100%; height: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; font-size: 22px; color: #333333; }

.upload .item .add .take{ position: absolute; width: 44px; height: 44px; line-height: 0; z-index: 10; top: 12px; right: 12px;  }
.upload .item .add .icon{ position: relative; width: 88px; height: 88px; line-height: 0;  }
.upload .item .add .txt{ position: relative; width: 100%;font-size: 22px; color: #333333; margin-top: 18px; text-align: center; }


.upload .item .pic{ position: relative; width: 100%; height: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; line-height: 0; z-index: 1; }
.upload .item .pic img{	position: relative; height: 100%; width: 100%; object-fit: cover; }

.upload .item .pic .close{ position: absolute; width: 32px; height: 32px; background: rgba(0,0,0,0.5); top: 0; right: 0; border-radius: 0 0 0 16px; z-index: 10; }
.upload .item .pic .close:before, .upload .item .pic .close:after{ position: absolute; height: 2px; background: #FFFFFF; width: 50%; content: "";  bottom:0; top: 0; left: 0; right:0;  margin: auto; border-radius: 16px; }
.upload .item .pic .close:before{ transform: rotate(45deg); }
.upload .item .pic .close:after{ transform: rotate(-45deg); }

.consent { position:relative; width:100%; margin-top:1rem; display:flex; flex-flow:row nowrap;justify-content: center; align-items: center; }
.consent .label { position: relative; padding-left: 48px;  line-height: 1.25rem; font-size: 24px; }
.consent input[type="checkbox"]{ display: none; }
input[type="checkbox"]+.label:before { position: absolute; height: 32px; width: 32px; background: #FFFFFF; content: ""; left: 0px; top: 0.125rem; bottom: 0; margin: auto; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; background: url(../img/icon/check.png) center no-repeat; background-size: 100% 100%; }
input[type="checkbox"]:checked+.label:before { background: url(../img/icon/checked.png) center no-repeat; background-size: 100% 100%; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; }


.pets{ position: relative; width: 100%; margin-bottom: 24px; display: flex; flex-flow: row wrap; }
.pets .pet{ position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin-bottom: 6px; padding:6px 16px; width: calc(33.33% - 32px); }

.pets .pet.a { background: #F0F8F7; border-bottom: none; border-radius: 16px; }

.pets .pet.no {  filter: grayscale(100%); opacity: 0.5; }

.pets .pet .header{ position:relative; width: 72px; height: 72px; overflow: hidden; line-height: 0; border-radius: 100% 100%; flex: none; margin-left: 6px; }
.pets .pet  .header img{position: relative; height: 100%; width: 100%; object-fit: cover;	}
.pets .pet .desc{ position: relative;height: 96px; display: flex;flex-flow: column  nowrap;  justify-content: center; align-items: flex-start; padding-left: 4px;  }
.pets .pet  .desc .tit{ position: relative;font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; color: #333333; }
.pets .pet  .desc .tit.name{ display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical; width: 120px; whit-space: nowrap; overflow: hidden; }
.pets .pet  .desc .txt{position: relative; font-size: 24px;  line-height: 34px; height: 34px; color: #666666; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
.pets .pet  .icon{ position: absolute; top: -50px; right: 16px; width: 196px; line-height: 0;  }

.footer{ position: fixed; bottom: 0; height: 144px; width: 750px; background: #FFFFFF; display: flex; flex-flow: row nowrap; justify-content: space-around; z-index: 10; align-items: flex-start;  }
.footer .nav{ position: relative; width: 25%;  height: calc(144px - env(safe-area-inset-bottom)); display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; cursor: pointer; }
.footer .nav .icon{ position: relative; width: 56px; height: 56px; line-height: 0; }
.footer .nav .icon img{position: relative; height: 100%; width: 100%; object-fit: cover; }
.footer .nav .name{ position: relative; width: 100%; text-align: center; font-size: 22px; line-height: 32px; font-weight: bold; color: #333333; }
.footer .nav.a .name{ color: #326262; }

.footer .btns{ position: relative; width: 726px; margin: auto; height: calc(144px - env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; }

.footer .btns .btn{ position: relative; width: 100%; height: 88px; line-height: 88px; background: linear-gradient( 135deg, #549F9F 0%, #32656B 100%); border-radius: 44px; font-size: 32px; color: #FFFFFF; text-align: center; margin:0 16px; font-weight: bold; }
.footer .btns .btn.no{background: #CCCCCC; }


.login { position: fixed; background: #ffffff url("../img/login.png") top center no-repeat; width:calc(100% - 96px); bottom: 0; left: 0; right: 0; margin: 0 auto; padding: 48px;  padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);  border-radius: 24px 24px 0 0; transition: all cubic-bezier(.38,.04,.35,.96) 600ms; }
.login .logo { position: relative; width: 100%; line-height: 0; }
.login .logo img { position: relative; width: 390px; }
.login .tit { position: relative; width: 100%; font-size: 28px; line-height: 40px; color: #333333; font-weight:bold; margin-top: 30px; }
.login .text { position: relative; width: 100%; color: #999999; font-size: 24px; line-height: 34px; margin-bottom: 48px; }
.login .from-box { position: relative; width: 100%; }
.login .item { position: relative; width: 100%;}
.login .item .field { position: relative; width: 100%; height: 88px; background: #F0F8F7;  border-radius: 16px; overflow: hidden; margin-bottom: 32px; display: flex; flex-flow: row nowrap; }

.login .item .field .input { position: relative; width: calc(100% - 48px); height: 100%; margin: auto; padding: 0 24px; }
.login .item .field .input input{ position: relative; width: 100%; height: 100%; border:none; background: rgba(0,0,0,0); font-size: 30px; color: #979797; outline: none; }
.login .item .field .box { position: relative; flex: none; width: 188px; height: 64px;line-height: 2rem; text-align: center; margin:12px; border-radius: 8px; background: none; overflow: hidden; }
.login .item .field .box .btn { width: 184px; height: 60px; line-height: 60px; background: #FFFFFF; padding: 0; border:2px solid #32666C; display: block; border-radius: 8px; font-size: 26px; color: #32666C;  }
.login .item .field .box .btn.no { border:2px solid #CCCCCC; color: #CCCCCC; pointer-events: none !important; }
.login .item .field .box .authcode { position: relative; width: 100%; height: 100%; }
.login .btns { position: relative; display: flex; justify-content: space-between; text-align: center; padding: 2rem 0; }
.login .btns .btn { margin: 0 16px; width: 310px; height: 88px; line-height: 88px; color: #FFFFFF; font-size: 32px;  background: #CCCCCC; border-radius: 44px; }
.login .btn.btn-fillin { background: linear-gradient( 135deg, #549F9F 0%, #32656B 100%); }

.login .down{ position: absolute;  width: 96px; height: 96px; top: 28px; right: 28px; z-index: 100; background: url("../img/down.png") center no-repeat; }

.loading{ position: relative; width: 100%; height: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; }
.loading .center{ position: relative; }
.loading .center .img{ position: relative; width: 120px; margin: 1rem auto; }
.loading .center .loadshow{ animation: loadgif 1.2s linear infinite; }
.loading .center .txt{ position: relative; width: 100%; text-align: center; font-size: 32px; font-weight: 700; color: #FFFFFF; }

@-webkit-keyframes loadgif {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(180deg); }
  100% { transform:rotate(360deg); }
}

.msg{ position: relative; width: 100%; height: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; }

.msg.bottom{ position: relative; width: 100%; height: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: center; padding-bottom: 46vw; }
.msg .center{ position: relative; background: #F6F6F6 url("../img/login.png") top center no-repeat; width: 548px; padding:0 48px;  border-radius:24px; }

.msg .center .icon{ position: relative; width: 196px; height: 152px; margin: auto; margin-top: -74px; }

.msg .center .tit{ position: relative; width: 100%; text-align: center; font-size: 36px; font-weight: 700; color:#333333; margin:32px auto; }
.msg .center .sub-tit{ position: relative; width: 100%; text-align: left; font-size: 28px; line-height: 40px; color:#32666C; margin-bottom: 16px; }

.msg .center .txt{ position: relative; width: 100%; text-align: center; font-size: 32px; line-height: 48px; color:#333333;   margin-top: 50px;  margin-bottom: 18px; }
.msg .center .tips{ position: relative; width: 100%; text-align: center; font-size: 28px; line-height: 40px; color:#32666C; margin-bottom: 48px; }
.msg .center .btns{ position: relative; width: calc(100% + 28px); margin: 0 -14px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin-bottom: 56px; margin-top: 48px; }
.msg .center .btns .btn{ position: relative; width: 100%; height: 88px; line-height: 88px; background: linear-gradient( 135deg, #549F9F 0%, #32656B 100%); border-radius: 44px; font-size: 32px; color: #FFFFFF; text-align: center; margin:0 14px; font-weight: bold; }
.msg .center .btns .btn.no{background: #CCCCCC; }

.msg .center .tit + .txt{ margin-top: 32px; }

.msg .item { position: relative; width: 100%; margin-bottom: 32px; }
.msg .item .field { position: relative; width: 100%; height: 88px; background: #F0F8F7;  border-radius: 16px; overflow: hidden; margin-bottom: 32px; display: flex; flex-flow: row nowrap; }

.msg .item .field .input { position: relative; width: calc(100% - 48px); height: 100%; margin: auto; padding: 0 24px; }
.msg .item .field .input input{ position: relative; width: 100%; height: 100%; border:none; background: rgba(0,0,0,0); font-size: 30px; color: #979797; outline: none; }
.msg .item .field .box { position: relative; flex: none; width: 188px; height: 64px;line-height: 2rem; text-align: center; margin:12px; border-radius: 8px; background: none; overflow: hidden; }
.msg .item .field .box .btn { width: 184px; height: 60px; line-height: 60px; background: #FFFFFF; padding: 0; border:2px solid #32666C; display: block; border-radius: 8px; font-size: 26px; color: #32666C;  }
.msg .item .field .box .btn.no { border:2px solid #CCCCCC; color: #CCCCCC;  }
.msg .item .field .box .authcode { position: relative; width: 100%; height: 100%; }


.popup .list{ position: relative; border-radius: 16px; background: #ffffff; padding: 24px; height: 450px; overflow-y: auto; }
.popup .list .item{ position: relative; height: 140px; /*width: 500px;*/ border-bottom: 2px solid #E8E8E8; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;padding: 16px; width: 468px;  }
.popup .list .item:last-child{border-bottom: none; }
.popup .list .date{ color: #666666; width: 100%; font-size: 24px; line-height: 34px; }
.popup .list .name{ color: #333333; width: 100%; font-size: 30px; line-height: 50px; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.popup .list .odd { color: #666666; width: 100%; font-size: 24px; line-height: 34px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }

.popup .list .item.a{ background: #F0F8F7; border-radius: 16px; padding:0px 16px; width: 468px; border-bottom: 2px solid #F0F8F7; }

.popup .list .item .mult{ position: relative; display: flex; flex-flow: row nowrap;width: 468px; height: 100px; justify-content: flex-start; align-items: center; }
.popup .list .item .mult .pic{ width: 80px; height: 80px; line-height: 0;  margin-right: 16px; flex:none; }
.popup .list .item .mult .count{ font-size: 28px; flex:none; }

/*.popup { position: fixed; width: 100vw; height: 100vh; z-index: 99; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.2); transition: all cubic-bezier(.38,.04,.35,.96) 600ms; }*/

.popup{ position: fixed; display: flex; z-index: 99; width: 100vw; height: 100vh;  background-color: rgba(0, 0, 0, 0.2); top: 0; bottom: 0; left: 0; right: 0; margin: auto; flex-flow: column nowrap; justify-content: center; animation:none;  /*transition: all 500ms cubic-bezier(.38,.04,.35,.96) 100ms; */}

.popup.hide { opacity: 0; visibility: hidden; /*transition: all 500ms cubic-bezier(.38,.04,.35,.96) 100ms;*/ }
.popup.hide .login { bottom: -100vh; transition: all cubic-bezier(.38,.04,.35,.96) 400ms;  }


.popup-show{ filter:blur(5px); }
.popup .in { animation: popup 400ms cubic-bezier(0.215, 0.61, 0.355, 1) 100ms both; }
.popup .out { opacity:0; visibility: hidden; }

@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } }
@keyframes popup { 0% { opacity:0; transform:scale(0.72); } 75% { opacity:1; transform:scale(1.02); } 100% { opacity:1; transform:scale(1); } }

.privacy{ position: relative; width: 622px; padding: 32px; background:#FFFFFF; border-radius: 16px; margin: auto; z-index: 2; font-size: 24px; line-height: 40px; }
.privacy p{ font-size: 24px; line-height: 40px; margin-bottom: 16px; }
.privacy ul{ list-style-type: decimal; margin-left: 64px; font-size: 24px; line-height: 40px; }

.hidden { display: none !important; visibility: hidden !important; }

.index{ background: #F2EAE1; }

.menu-box{ position: relative; width: 660px; margin: 0 auto; height: 70px; z-index: 2; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-end; margin-bottom: -2px;  }
.menu-box .item{ position: relative; width: 180px; height: 70px; background: linear-gradient( 180deg, #EED0A5 0%, #E3C28F 100%); border-radius: 24px 24px 0px 0px; margin-right: 8px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; transition: all 500ms cubic-bezier(.38,.04,.35,.96) 100ms; }

.menu-box .item .pic{ position: relative; width: 44px; height: 44px; background: rgba(157,199,204,0.33); border: 1px solid #FFF7EC; border-radius: 100% 100%; flex: none; overflow: hidden; margin-right: 8px; margin-left: 12px; }

.menu-box .item .pic img{position: relative; height: 100%; width: 100%; object-fit: cover;	}

.menu-box .item .name{ position: relative;font-size: 24px; line-height: 40px; height: 40px; color: #666666; display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical; width: 100px; whit-space: nowrap; overflow: hidden; }
.menu-box .item.add:before{ position: absolute; width: 44px; height: 44px; content:""; background: url("../img/icon/add.png") center no-repeat; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }


.menu-box .item.show{ position: relative; animation:showbox 1000ms ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
.menu-box .item.hide { opacity:0; visibility: hidden;  display: none; }

.pet-area{ position: relative; z-index: 5; min-height: 676px;}
.pet-area:after{ position: absolute; margin-left: 32px; width: 686px; height: 676px; background: url("../img/cardbg.png?ver=20250415111") center top no-repeat; z-index: 1; content: ""; top: 0; overflow: hidden; border-radius: 0 0 24px 24px; }
.pet-box{ position: relative; z-index: 5; min-height: 676px; }

.pet-box.show { position: relative; animation: showbox 1000ms ease; animation-iteration-count: 1; animation-fill-mode: forwards;}
.pet-box.hide { opacity:0; visibility: hidden; display: none;  }