:root {
--swiper-theme-color:#fff;
--swiper-pagination-bullet-inactive-color:#fff;
--swiper-pagination-bullet-width:0.48rem;
--swiper-pagination-bullet-height:0.02rem;
--swiper-pagination-bullet-horizontal-gap:0.06rem;
--swiper-pagination-bullet-border-radius:0;
--swiper-navigation-size:0.22rem;
--full-width:0.48rem;
--button-height:0.48rem;
}
.care{    font-family: 'SOURCEHANSANSCN-MEDIUM';}
.care .banner img{width: 100%; height: 100%; object-fit: cover;}
.care  .banner .slide-inner .pic{border-bottom: 1px solid #000;}
.care .banner .word{top: 1.4rem;bottom:inherit; text-align: center; left: 50%; transform: translateX(-50%); font-family: 'SOURCEHANSANSCN-REGULAR';    width: 16rem;}
.care .banner .word .w0{font-size: 0.55rem;}
.care .banner .word .w1{font-size: 0.2rem;    line-height: 0.35rem;}
.care .banner .word .w1 .ani{opacity: 0;}
.care .p1-page{background-color: #000; padding-top:1.26rem ; padding-bottom: 0.8rem; position: relative;}
.care .p1-page .title{font-size: 0.4rem; color: #fff; text-align: center;}
.care .p1-page .p1-page-inner{display: flex;gap: 0.15rem;justify-content: center; margin-top: 0.37rem;}
.care .p1-page .p1-page-item{position: relative; width: 5.04rem; height: 6.75rem;overflow: hidden; cursor: pointer;}
.care .p1-page .p1-page-item .img{width: 100%; height: 100%; object-fit: cover; transition: all 0.8s ease-in-out; transform-origin: center center;}
.care .p1-page .p1-page-item .item-title{position: absolute; bottom: 0.58rem; left: 0; width: 100%;color: #fff; font-size: 0.3rem; text-align: center; width: 100%; transition: all 0.3s ease-in-out; }

.care .p1-page .p1-page-item .item-content{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 0.2rem; box-sizing: border-box; opacity: 0; transition: all 0.3s ease-in-out; display: flex; align-items: center; justify-content: center; color: #fff;text-align: center; }
.care .p1-page .p1-page-item .item-content .item-content-inner{width: 100%;}
.care .p1-page .p1-page-item .item-content .item-content-title{font-size: 0.3rem;margin-bottom: 0.2rem;}
.care .p1-page .p1-page-item .item-content .item-content-text{font-size: 0.18rem;width: 100%;}
.care .p1-page .p1-page-item:hover .img{transform: scale(1.01);}
.care .p1-page .p1-page-item:hover .item-content{opacity: 1; }
.care .p1-page .p1-page-item:hover > .item-title{opacity: 0; }

.care .p1-popbox{position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background-color: #000; display: flex; align-items: center; justify-content: center; z-index: 1000; transition: all 0.8s ease-in-out;}
.care .p1-popbox.on{right: 0;}
.care .p1-popbox .p1-popbox-inner{width: 16rem;}
.care .p1-popbox .popbox-content{color:#fff; padding-top: 0.2rem;}
.care .p1-popbox .pic{width: 100%; height: 4.82rem; object-fit: cover;}
.care .p1-popbox .popbox-content .popbox-content-title{font-size: 0.3rem;margin-bottom: 0.2rem;}
.care .p1-popbox .popbox-content .popbox-content-text{font-size: 0.18rem;line-height:0.35rem;}
.care .p1-popbox .close{position: absolute; top:50%; left: 0; transform: translateY(-50%); width: 0.54rem;cursor: pointer;z-index: 999;}
.care .p1-popbox .swiper{padding: 0.8rem 0 0.4rem;}

/* 移动端适配 */
@media (max-width: 768px) {
  .care .p1-page .p1-page-item {height: auto;}
  .care .p1-page .title{font-size: 0.5rem;}
  .care .banner .word{top:3.7rem}
  .care .banner .word .w1{font-size: 0.26rem; line-height: 0.48rem;}
  .care .p1-page .p1-page-item .item-content{position: static; opacity:1}
  .care .p1-page{padding-top: 1.10rem;}
  .care .p1-page .p1-page-inner{margin-top: 0.3rem; gap: inherit;    justify-content: normal;}
  .care .p1-page .p1-page-item .img{height: 8rem;}
  .care .p1-page .p1-page-item .item-title{display: none;}
  .care .p1-page .p1-page-item .item-content{height: auto; text-align: left;}
  .care .p1-popbox .p1-popbox-inner{width:90%;}
  .care .p1-popbox .popbox-content .popbox-content-title{font-size: 0.4rem; padding-top: 0.53rem;}
  .care .p1-popbox .popbox-content .popbox-content-text{font-size: 0.26rem; line-height: 0.48rem;}
  .care .p1-popbox .swiper{padding: 0.8rem 0 0.8rem;}
  .care .p1-popbox .pic{width: 100%;}
  .care .p1-popbox .close{top: 85%; left: auto; right: 0;width:0.8rem;}
  .care .p1-popbox .swiper-wrapper{gap: inherit;}
  .care .p1-page .p1-page-item .item-content .item-content-text{font-size: 0.26rem; line-height: 0.48rem;}
}