body{
    /* overflow-y: auto; */
}
.commit-media::before{
  background: linear-gradient(-180deg, rgba(24, 26, 38, 0) 0%, rgb(24 26 38) 100%);
}
.page-box{
  height: 100%;
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/m/news-page-bg.jpg) no-repeat top / 100% auto;
}
.cards-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* display: flex;
  justify-content: center; */
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/m/news-page-bg.jpg) no-repeat top / 100% auto;
  overflow-y: auto;
}
.cards-wrap .cards-con {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: auto;
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/card_m_bg.png) no-repeat center/cover;
  background-color: #3f496a;
  /* top: 1.75rem;
  left: 0;   */
  margin-top: 1.75rem;
  padding-bottom: 1rem;
}
.cards-con .news_back{
  top: -0.6rem;
}
.caeds-ti{
  font-size: 0.32rem;
  color: #ffffff;
  text-align: center;
  position: absolute;
  top: -0.7rem;
  left: 0;
  width: 100%;
}
.card-tab{
  display: flex;
  align-items: center;  
  justify-content: space-between;  
  z-index: 9;
  width: 7.5rem;
  margin: 0 auto;
}
.card-tab a{
  box-sizing: border-box;
  width: 25%;
  height: 1.15rem;
  text-align: center;
  opacity: 0.6;
  text-indent: -9999px;    
}
.card-tab a.on{  
  opacity: 1;
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/card-hover-m.png) no-repeat bottom/ 109%;
}
.card-tab a p{
  width: 100%;
  height: 1.06rem;
  border-right: 0.01rem solid #ffffff17;
  border-bottom: 0.01rem solid #ffffff17;
  margin: 0 auto;
}

.card-tab .card-yx p{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/card-yx-m.png) no-repeat center/auto 0.74rem;
}
.card-tab .card-tf p{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/card-tf-m.png) no-repeat center/auto 0.74rem;
}
.card-tab .card-zb p{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/card-zb-m.png) no-repeat center/auto 0.74rem;
}
.card-tab .card-xg p{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/card-xg-m.png) no-repeat center/auto 0.74rem;
}

.cards-box{
  height: auto;
  min-height: 100%;
}
.cards-err{
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;  
  flex-wrap: wrap;
  position: absolute;
  top: 5rem;
}
.cards-err img{
  width: 1.57rem;
  height: 1.49rem;
}
.cards-err p{
  width: 100%;
  font-size: 0.3rem;
  color: #8e95b37d;
  text-align: center;
}

.cards-detail{
  width: 7.5rem;
  height: 100%;
  position: relative;  
  display: none;
  margin: 0 auto;
}
.cards-detail.on{
  display: block;
}

.cards-l-top{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.35rem;
  position: relative;
  z-index: 9;
}
.cards-l-item{
  background-color: #525e85;
  width: 1.5rem;
  height: 0.48rem;
  /* line-height: 0.48rem; */
  font-size: 0.24rem;
  color: #d8dbe1;
  border-radius: 0.3rem;
  -webkit-border-radius: 0.3rem;
  -moz-border-radius: 0.3rem;
  -ms-border-radius: 0.3rem;
  -o-border-radius: 0.3rem;
  position: relative;
  margin-right: 0.15rem;
  display: flex;
  align-items: center;
}
.cards-l-item::after{
  content: '';
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/select-icon.png) no-repeat center/100%;
  width: 0.21rem;
  height: 0.12rem;
  position: absolute;
  top: 50%;
  margin-top: -0.06rem;
  right: 0.2rem;
}
.cards-l-item p{
  width: 1rem;
  text-align: center;
  margin-left: 0.1rem;
}
.cards-l-item2{
  background-color: #3c4667f5;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  -moz-border-radius: 0.1rem;
  -ms-border-radius: 0.1rem;
  -o-border-radius: 0.1rem;
  width: 100%;
  height: 0;
  position: absolute;
  top: 0.6rem;
  left: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;  
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.cards-l-item2.act{
  height: auto;
  opacity: 1;
}
.cards-l-item2 a{
  color: #a0a2ab;
  display: block;
  text-align: center;
  width: 80%;
  height: 0.5rem;
  line-height: 0.5rem;
  border-bottom: 0.01rem solid #8d858582;
  margin: 0 auto;
}
.cards-l-item2 a.on{
  color: #fff;
}

.cards-search{
  width: 1.92rem;
  height: 0.48rem;
  background-color: #1e2c4d4f;
  border-radius: 0.3rem;
  -webkit-border-radius: 0.3rem;
  -moz-border-radius: 0.3rem;
  -ms-border-radius: 0.3rem;
  -o-border-radius: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
}
.cards-search input{
  background: none;
  outline: none;
  border: none;
  width: 1.25rem;
  height: 100%;
  color: #ffffff63;
  font-size: 0.22rem;
}
.cards-search input::-webkit-input-placeholder { /* WebKit browsers */
  color: #ffffff63;
  font-size: 0.22rem;
  text-align: center;
  font-family: 'hyqh-60';
}

.cards-search input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #ffffff63;
  font-size: 0.22rem;
  text-align: center;
  font-family: 'hyqh-60';
}

.cards-search input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ffffff63;
  font-size: 0.22rem;
  text-align: center;
  font-family: 'hyqh-60';
}   
.cards-search a{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/cards-search-m.png) no-repeat center/ 0.22rem 0.22rem;
  width: 0.4rem;
  height: 0.4rem;
}
.cards-l-list{
  padding: 0 0.3rem;
  box-sizing: border-box;
  width: 100%;
  /* height: calc(100% - 4.0rem); */
  overflow-y: auto;
  margin-top: 0.3rem;
  /* mask: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%); */
}
.cards-l-list::-webkit-scrollbar-thumb{
 -webkit-box-shadow: inset 0 0 0.02rem rgba(0,0,0,0.2);
 background: #a4bdfd;
}
.cards-l-list::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 0.02rem rgba(0,0,0,0.2);
 background: rgba(255,255,255,0.1);
}
.cards-l-list::-webkit-scrollbar{
 width: 0.02rem;
 height: 1px;
}

.li-ti{
  display: flex;
  align-items: center;
  min-height: 0.4rem;
  margin-bottom: 0.3rem;
  margin-left: -0.1rem;
}
.li-ti img{
  width: auto;
  height: 0.27rem;
  margin-left: 0.1rem;
}
.li-ti p{
  font-size: 0.28rem;
  line-height: 0.4rem;
  color: #fefefe;
  margin:0 0.1rem;
}
.li-ti span{
  font-size: 0.24rem;
  line-height: 0.34rem;
  color: #a0a2ab;  
  border-left: 0.01rem solid #91a5d852;
  padding-left: 0.2rem;
  margin-left: 0.1rem;
  width: 5.05rem;
}
.li-cards{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 0.1rem;
  box-sizing: border-box;
  border-bottom: 0.01rem solid #91a5d852;
  margin-bottom: 0.25rem;
}
.li-detail{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/care_li_bg_m.png) no-repeat center / 100%;
  width: 0.96rem;
  height: 1.29rem;
  text-align: center;
  position: relative;
  margin-right: 0.49rem;
  margin-bottom: 0.5rem;
}
.li-detail:nth-child(5n){
  margin-right: 0;
}
.li-detail .li-hero{
  width: 0.88rem;
  height: 1.21rem;
  display: block;
  margin: 0.04rem auto;
  border-radius: 0.05rem;
  -webkit-border-radius: 0.05rem;
  -moz-border-radius: 0.05rem;
  -ms-border-radius: 0.05rem;
  -o-border-radius: 0.05rem;
  object-fit: cover;
}
.li-detail p{
  font-size: 0.16rem;
  color: #ffffff;
  margin-top: 0.1rem;
  width: 1.06rem;
  margin-left: -0.05rem;
}
.li-icon{
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  top: 0.08rem;
  left: 0.08rem;
}
.li-new{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/cards-icon3.png) no-repeat center/100%;
  width: 0.5rem;
  height: 0.25rem;
  position: absolute;
  top: -0.05rem;
  right: 0;
}

.cards-tf .cards-l-item{
  width: 2.15rem;
  margin-right: 0.2rem;
}
.cards-tf .cards-l-item p{
  width: 1.75rem;
}
.cards-tf .cards-search{
  margin-left: 0.24rem;
}
.cards-tf .li-detail{
  width: 0.96rem;
  height: 0.96rem;
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/care_li_bg2_m.png) no-repeat center /100%;
}
.cards-tf .li-detail .li-hero{
  width: 0.88rem;
  height: 0.88rem;
}
.tf_bg1{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/tf_bg1.png) no-repeat center /100%;
}
.tf_bg2{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/tf_bg2.png) no-repeat center /100%;
}
.tf_bg3{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/tf_bg3.png) no-repeat center /100%;
}

.cards-zb .cards-l-item{
  width: 2.15rem;
  margin-right: 0.2rem;
}
.cards-zb .cards-l-item p{
  width: 1.75rem;
}
.cards-zb .cards-search{
  margin-left: 0.24rem;
}
.cards-zb .li-detail{
  width: 0.96rem;
  height: 0.96rem;
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/care_li_bg2_m.png) no-repeat center /100%;
}
.cards-zb .li-detail .li-hero{
  width: 0.88rem;
  height: 0.88rem;
}

.cards-xg .li-detail{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/care_li_bg3_m.png) no-repeat center /100%;
  width: 0.96rem;
  height: 0.96rem;
}

.cards-xg .li-detail .li-hero{
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 0.05rem;
  -webkit-border-radius: 0.05rem;
  -moz-border-radius: 0.05rem;
  -ms-border-radius: 0.05rem;
  -o-border-radius: 0.05rem;
  object-fit: cover;
}


.cards-wrap-d .cards-con {
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/card_m_bg2.png) no-repeat top / 100%;
  background-color: #3f496a;
}
.cards-r-box{
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}
.cards-r-box.on{
  display: block;
}
.cards-r-item{
  /* padding: 0 0.3rem; */
  box-sizing: border-box;
  width: 100%;
  /* height: calc(100% - 1.5rem); */
  height: auto;
  overflow-y: auto;
  margin-top: 0.3rem;
  
}
.cards-r-boxyx{
  mask: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
}
.cards-r-item .swiper{
  /* height: 7.5rem; */
  height: auto;
  width: 7.5rem;
  margin: 0.3rem auto 0.1rem;
}
.cards-r-item .swiper-slide{
  width: 3.63rem;
  margin: 0 auto;
  transform: scale(0.93);
  -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  -o-transform: scale(0.93);
  transition: 300ms;
  position: relative;
  padding-bottom: 0.6rem;
}
.cards-r-item .swiper-slide-active,.cards-r-item .swiper-slide-duplicate-active{
  transform: scale(1);
}
.cards-r-item .swiper-slide img{
    display: block;
    margin: 0 auto 0.2rem;
    width: 3.63rem;
    height: 5.1rem;  
}
.cards-r-item .swiper-slide::after{
  content: '';
  width: 3.63rem;
  height: 5.1rem;
  position: absolute;
  top: 0;
  left: 0;
  background: #00000078;
  opacity: 1;
  transition: 300ms;
  border-radius: 0.2rem;
  -webkit-border-radius: 0.2rem;
  -moz-border-radius: 0.2rem;
  -ms-border-radius: 0.2rem;
  -o-border-radius: 0.2rem;
}
.cards-r-item .swiper-slide-active::after{
  opacity: 0;
}
.cards-r-item .swiper-pagination-bullet{
  height: 0.08rem;
  width: 0.08rem;
  margin: 0 0.06rem !important;
  background-color: #fff;
  opacity: 1;
}
.cards-r-item .swiper-pagination-bullet-active{
  height: 0.08rem;
  width: 0.4rem;
  border-radius: 0.2rem;
  -webkit-border-radius: 0.2rem;
  -moz-border-radius: 0.2rem;
  -ms-border-radius: 0.2rem;
  -o-border-radius: 0.2rem;
}
.cards-r-item .swiper-slide .cards-r-desc{
  transition: 300ms;
  opacity: 0;
}
.cards-r-item .swiper-slide-active .cards-r-desc{
  opacity: 1;
}

.cards-r-desc{
  width: 7.5rem;
  margin-left: -1.88rem;
  padding: 0 0.1rem;
  box-sizing: border-box;
  font-size: 0.22rem;
  color: #e6e6e6;
  margin-bottom: 0;
  line-height: 0.4rem;
  display: flex;
  /* flex-wrap: wrap; */
  align-items: flex-start;
  justify-content: center;
  /* width: 100%; */
  /* margin-left: -1.95rem; */
}
.cards-r-desc span{
  font-weight: bold;
  color: #fff;
  min-width: 0.7rem;
}
.cards-r-desc p{
  font-size: 0.22rem;
}



.cards-r-list{
  width: 100%;
  /* height: calc(100% - 8.1rem); */
  height: auto;
  padding: 0 0.3rem;
  padding-bottom: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
  
}
.cards-r-ti{
  border-top: 0.01rem solid #e5e5e536;
  font-size: 0.28rem;
  font-weight: bold;
  color: #fff;
  padding: 0.2rem 0;
  box-sizing: border-box;
}
.r-item2-top{
  display: flex;
  align-items: center;
  position: relative;
}
.r-item2-top img{
  width: 0.57rem;
  height: 0.57rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.r-item2-top p{
  font-size: 0.25rem;
  font-weight: bold;
  color: #fff;
}
.cards_play{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/card_play.png) no-repeat center/100%;
  width: 1.3rem;
  height: 0.39rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.cards-r-desc2{
  font-size: 0.21rem;
  color: #e6e6e6;
  line-height: 0.3rem;
  margin: 0.1rem auto;
}
.cards-r-desc2 .y{
  color: #d1985a;
}
.cards-r-desc2 .g{
  color: #9cf0cc;
}
.cards-r-desc2:nth-last-of-type(1){
  border-bottom: 0.01rem solid #e5e5e536;
  margin-bottom: 0.3rem;
  padding-bottom: 0.3rem;
}
.r-item2-b{
  display: flex;
  align-items: center;  
  margin-bottom: 0.3rem;
}
.r-item2-b img{
  width: 0.45rem;
  height: auto;
}
.r-item2-b p{
  width: 5.6rem;
  font-size: 0.21rem;
  color: #e6e6e6;
  margin-left: 0.2rem;
}

.r-item3-ul{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.r-item3-li{
  width: 2.3rem;
  display: flex;  
  align-items: center;
  /* border-bottom: 0.01rem solid #e5e5e536; */
  padding: 0.15rem 0;
  box-sizing: border-box;
}
.r-item3-li .r-item3-left{
  display: flex;
  align-items: center;
  font-size: 0.24rem;
  color: #fff;
  opacity: 0.6;
  width: 1.55rem;
}
.r-item3-li .r-item3-left img{
  width: 0.2rem;
  height: auto;
  margin-right: 0.05rem;
}
.r-item3-right p{
  font-size: 0.24rem;
  font-weight: bold;
  color: #fff;
  font-family: 'dinn';
  margin-top: 0.05rem;
  opacity: 1;
}

.cards-r-desc3{
  font-size: 0.22rem;
  color: #e6e6e6;
  margin-bottom: 0;
  line-height: 0.4rem;
  text-align: center;
}
.cards-r-desc3 span{
  font-size: 0.28rem;
  color: #fefefe;
}
.cards-r-desc3 p{
  font-size: 0.24rem;
      color: #a0a2ab;
    margin-top: 0.1rem;
}
.line{
  width: 6.5rem;
  margin: 0.15rem auto;
  height: 0.01rem;
  background-color: #e5e5e536;
}
.cards-r-boxtf .cards-r-item .swiper{
  height: 5.85rem;
}

.cards-r-img{
  display: block;
  margin: 0.3rem auto 0.4rem;
  width: 3.63rem;
  height: 5.1rem;  
}
.cards-r-boxtf .cards-r-item .swiper .swiper-slide{
  width: 2.56rem;
  margin: 0 auto;
  transform: scale(0.86);
  -webkit-transform: scale(0.86);
  -moz-transform: scale(0.86);
  -ms-transform: scale(0.86);
  -o-transform: scale(0.86);
  transition: 300ms;
  position: relative;
}
.cards-r-boxtf .cards-r-item .swiper .swiper-slide{
  margin: 0 -0.4rem;
  opacity: 0;
}
.cards-r-boxtf .cards-r-item .swiper .swiper-slide-active,.cards-r-boxtf .cards-r-item .swiper .swiper-slide-duplicate-active{
  transform: scale(1);
  z-index: 9;
  opacity: 1;
  margin-right: 0 !important;
}
.cards-r-boxtf .cards-r-item .swiper{
  width: 7.05rem;
  height: 4.25rem;
  margin: 0.3rem auto 0.1rem;
}


.cards-r-boxtf .cards-r-item .swiper .swiper-slide-next,
.cards-r-boxtf .cards-r-item .swiper .swiper-slide-prev{
  opacity: 1;
}
.cards-r-boxtf .cards-r-item .swiper .swiper-slide img{
    display: block;
    margin: 0 auto 0.2rem;
    width: 2.56rem;
    height: 3.58rem;  
    margin: 0 auto;
}
.cards-r-boxtf .cards-r-item .swiper .swiper-slide::after{
  content: '';
  width: 2.56rem;
  height: 3.58rem;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000ad;
  opacity: 1;
  transition: 300ms;
  border-radius: 0.15rem;
  -webkit-border-radius: 0.15rem;
  -moz-border-radius: 0.15rem;
  -ms-border-radius: 0.15rem;
  -o-border-radius: 0.15rem;
}
.cards-r-boxtf .cards-r-item .swiper .swiper-slide-active::after{
  opacity: 0;
}

.cards-r-boxzb .cards-r-item .swiper .swiper-slide{
  width: 2.56rem;
  margin: 0 auto;
  transform: scale(0.86);
  -webkit-transform: scale(0.86);
  -moz-transform: scale(0.86);
  -ms-transform: scale(0.86);
  -o-transform: scale(0.86);
  transition: 300ms;
  position: relative;
}
.cards-r-boxzb .cards-r-item .swiper .swiper-slide{
  margin: 0 -0.4rem;
  opacity: 0;
}
.cards-r-boxzb .cards-r-item .swiper .swiper-slide-active,.cards-r-boxzb .cards-r-item .swiper .swiper-slide-duplicate-active{
  transform: scale(1);
  z-index: 9;
  opacity: 1;
  margin-right: 0 !important;
}
.cards-r-boxzb .cards-r-item .swiper{
  width: 7.05rem;
  height: 4.25rem;
  margin: 0.3rem auto 0.1rem;
}


.cards-r-boxzb .cards-r-item .swiper .swiper-slide-next,
.cards-r-boxzb .cards-r-item .swiper .swiper-slide-prev{
  opacity: 1;
}
.cards-r-boxzb .cards-r-item .swiper .swiper-slide img{
    display: block;
    margin: 0 auto 0.2rem;
    width: 2.56rem;
    height: 3.58rem;  
    margin: 0 auto;
}
.cards-r-boxzb .cards-r-item .swiper .swiper-slide::after{
  content: '';
  width: 2.56rem;
  height: 3.58rem;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000ad;
  opacity: 1;
  transition: 300ms;
  border-radius: 0.15rem;
  -webkit-border-radius: 0.15rem;
  -moz-border-radius: 0.15rem;
  -ms-border-radius: 0.15rem;
  -o-border-radius: 0.15rem;
}
.cards-r-boxzb .cards-r-item .swiper .swiper-slide-active::after{
  opacity: 0;
}
.cards-r-boxxg .cards-r-item .swiper .swiper-slide{
  width: 2.56rem;
  margin: 0 auto;
  transform: scale(0.86);
  -webkit-transform: scale(0.86);
  -moz-transform: scale(0.86);
  -ms-transform: scale(0.86);
  -o-transform: scale(0.86);
  transition: 300ms;
  position: relative;
}
.cards-r-boxxg .cards-r-item .swiper .swiper-slide{
  margin: 0 -0.4rem;
  opacity: 0;
}
.cards-r-boxxg .cards-r-item .swiper .swiper-slide-active,.cards-r-boxxg .cards-r-item .swiper .swiper-slide-duplicate-active{
  transform: scale(1);
  z-index: 9;
  opacity: 1;
}
.cards-r-boxxg .cards-r-item .swiper{
  width: 7.05rem;
  height: 4.25rem;
  margin: 0.3rem auto 0.1rem;
}


.cards-r-boxxg .cards-r-item .swiper .swiper-slide-next,
.cards-r-boxxg .cards-r-item .swiper .swiper-slide-prev{
  opacity: 1;
}
.cards-r-boxxg .cards-r-item .swiper .swiper-slide img{
    display: block;
    margin: 0 auto 0.2rem;
    width: 2.56rem;
    height: 3.58rem;  
    margin: 0 auto;
}
.cards-r-boxxg .cards-r-item .swiper .swiper-slide::after{
  content: '';
  width: 2.56rem;
  height: 3.58rem;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000ad;
  opacity: 1;
  transition: 300ms;
  border-radius: 0.15rem;
  -webkit-border-radius: 0.15rem;
  -moz-border-radius: 0.15rem;
  -ms-border-radius: 0.15rem;
  -o-border-radius: 0.15rem;
}
.cards-r-boxxg .cards-r-item .swiper .swiper-slide-active::after{
  opacity: 0;
}

.cards-r-item .cards-r-item2 .swiper .swiper-slide{
  width: 2.56rem;
  height: 3.58rem;
  margin: 0 auto;
  transform: scale(0.86);
  -webkit-transform: scale(0.86);
  -moz-transform: scale(0.86);
  -ms-transform: scale(0.86);
  -o-transform: scale(0.86);
  transition: 300ms;
  position: relative;
}
.cards-r-item .cards-r-item2 .swiper .swiper-slide{
  margin: 0 -0.4rem;
  opacity: 0;
}
.cards-r-item .cards-r-item2 .swiper .swiper-slide-active,.cards-r-item .cards-r-item2 .swiper .swiper-slide-duplicate-active{
  transform: scale(1);
  z-index: 9;
  opacity: 1;
}
.cards-r-item .cards-r-item2 .swiper{
  width: 6.9rem;
  height: 4.25rem;
  margin: 0.3rem auto 0.1rem;
}


.cards-r-item .cards-r-item2 .swiper .swiper-slide-next,
.cards-r-item .cards-r-item2 .swiper .swiper-slide-prev{
  opacity: 1;
}
.cards-r-item .cards-r-item2 .swiper .swiper-slide img{
    display: block;
    margin: 0 auto 0.2rem;
    width: 2.56rem;
    height: 3.58rem;  
    margin: 0 auto;
}
.cards-r-item .cards-r-item2 .swiper .swiper-slide::after{
  content: '';
  width: 2.56rem;
  height: 3.58rem;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000ad;
  opacity: 1;
  transition: 300ms;
  border-radius: 0.15rem;
  -webkit-border-radius: 0.15rem;
  -moz-border-radius: 0.15rem;
  -ms-border-radius: 0.15rem;
  -o-border-radius: 0.15rem;
}
.cards-r-item .cards-r-item2 .swiper .swiper-slide-active::after{
  opacity: 0;
}
.swiper-desc-con{    
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.24rem;
  color: #fff;
  font-family: 'hyqh-65';
}
.swiper-desc-con span{
  color: #fff;
  font-size: 0.28rem;
}
.swiper-desc-con p{
  font-size: 0.24rem;
  color: #a0a2ab;
}
.desc-img{  
  width: 0.58rem;
  height: 0.58rem;
  overflow: hidden;
  display: inline-block;
  margin-right: 0.1rem;
}
.desc-img img{
  width: 0.58rem;
  height: 0.58rem;
  display: block;  
}
.cards-r-item2{
  position: relative;
  height: 5rem;
}
.r-item2-box{
  position: absolute;
  top: 0;
  left: 0.3rem;  
  opacity: 0;
}
.r-item2-box.on{
  opacity: 1;
}
.r-item2-box .cards-r-desc3{
/* text-align: left; */
}

.desc-img{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/desc-img.png) no-repeat center/100%;
  width: 0.58rem;
  height: 0.58rem;
  overflow: hidden;
  display: inline-block;
  margin-right: 0.1rem;
}
.desc-img img{
  width: 0.5rem;
  height: 0.5rem;
  display: block;  
  margin: 0.05rem auto;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  
}
.desc-img2{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/desc-img2.png) no-repeat center/100%;
  width: 0.58rem;
  height: 0.75rem;
  overflow: hidden;
  position: relative;
}
.desc-img2 img{
  width: 0.45rem;
  height: 0.6rem;
  display: block;
  margin: 0.07rem auto;
  border-radius: 0.05rem;
  -webkit-border-radius: 0.05rem;
  -moz-border-radius: 0.05rem;
  -ms-border-radius: 0.05rem;
  -o-border-radius: 0.05rem;
}
.desc-img3{
  background: url(https://game.gtimg.cn/images/osgame/cp/appointment/card/desc-img3.png) no-repeat center/100%;
  width: 0.62rem;
  height: 0.62rem;
  overflow: hidden;
}
.desc-img3 img{
  width: 0.5rem;
  height: 0.5rem;
  display: block;
  margin: 0.05rem auto;
  border-radius: 0.05rem;
  -webkit-border-radius: 0.05rem;
  -moz-border-radius: 0.05rem;
  -ms-border-radius: 0.05rem;
  -o-border-radius: 0.05rem;
}