.content {
  /* width:7.50rem; */

  background: #fff;
  background-size: 100% 100%;
  overflow: hidden;
}

/* 按钮 */
.btnclass {
  max-width: .3rem 0;
  width: 6rem;
  height: 0.8rem;
  line-height: .8rem;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0.16rem;
  background-color: rgba(221, 39, 93, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 0.32rem;
  text-align: center;
  font-family: Microsoft Yahei;
}

body::-webkit-scrollbar {
  display: none !important;
}

.content::-webkit-scrollbar {
  display: none;
}

.top {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  height: .9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.actives {
  box-shadow: 0 1px 2px #eee;

}



.topstate {
  width: 100%;
  height: .88rem;
}

.nav {
  display: inline-block;
  height: 0.48rem;
  width: 1.42rem;

}

.search {
  position: absolute;
  height: 0.48rem;
  right: .48rem;
  top: .2rem;
}

#Gallery {
  display: flex;
  width: 7.5rem;
  height: 4.24rem;
}

.mui-slider-indicator {
  bottom: 20px !important;
}


@keyframes slide {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}






.swiper-container {
  width: 70%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

}

.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #999;
  opacity: 0.5;
  border-radius: 50%;
  margin: 0 5px;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

.listbox {
  display: flex;
  padding: 0 .2rem;
}

.list {
  flex: 1;
}

.listimg {
  display: flex;
  /* height: .64rem; */
  width: 100%;
  align-items: center;
  justify-content: center;
}

.listimg img {
  display: inline-block;
  height: 1rem;
  width: 1rem;

}

.listtext {
  width: 100%;
  /* margin-top: .56rem; */
  color: rgba(16, 16, 16, 1);
  line-height: 0.44rem;
  height: 0.44rem;
  text-align: center;
  font-size: .32rem;
}

/* 块级 */
.piecebox {
  height: 4rem;
  padding: 0 .3rem;
  margin-top: .3rem;
  margin-bottom: .3rem;
  display: flex;
}

.leftpiece {
  width: 3.3rem;
  height: 4rem;
}

.leftpiece img {
  width: 3.3rem;
  height: 4rem;
}

.rightpiece {
  flex: 1;
  position: relative;
  height: 4rem;
  padding-left: .2rem;
  /* background: red; */
}

.rightpiece .img-dx {
  position: absolute;
  top: 0;
  right: 0;
  width: 3.3rem;
  height: 1.88rem;
}

.rightpiece .img-sc {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3.3rem;
  height: 1.88rem;
}

/* 推荐模块 */
.recommend {
  overflow: hidden;
  /* margin-top: .6rem; */
  padding: .3rem;
}

.title {
  height: 0.62rem;
  line-height: .62rem;
  color: rgba(16, 16, 16, 1);
  font-size: 0.44rem;
  text-align: center;
  margin-top: .2rem;
}

.contents {
  /* width: 6.9rem; */
  /* height: 3.88rem; */
  overflow: hidden;
  box-shadow: 0 5px 8px #eee;
  border-radius: .2rem;
  margin-top: .2rem;
}

.introduce {
  /* height: 0.4rem; */
  line-height: .4rem;
  color: rgba(16, 16, 16, 1);
  font-size: 0.28rem;
  text-align: center;
  font-family: PingFangSC-regular;
}

/* 测一测 */
.measure {
  padding: .1rem .3rem;
}

.measure img {
  width: 100%;
}

.swimg img {
  height: 4.8rem !important;
}


.tab-container {
  overflow-x: auto;
}

.tab-items {
  display: flex;
  flex-wrap: nowrap;
}

.tab-item {
  /* min-width: 100px;
  padding: 10px;
  border: 1px solid gray;
  border-bottom: none;
  cursor: pointer; */


  min-width: 1.22rem;
  height: 1.22rem;
  line-height: 1.22rem;
  background-color: rgba(221, 39, 93, 1);
  text-align: center;
  border: 0.02rem solid rgba(187, 187, 187, 1);
  border-radius: 50%;
  margin: .3rem;
}

.tab-item.active {
  animation: colors 1s;
  color: #fff;
  background-color: #DD275D;
}


.container {
  width: 100%;
  overflow: hidden;
}

.contentmy {
  display: inline-block;
  white-space: nowrap;
}

/* 热门线路 */
.hotebox {
  overflow: hidden;
  margin: .3rem 0;
}

.hotelist {
  float: left;
  margin-left: .3rem;
  margin-top: .2rem;
}

.hoteimg {
  width: 3.3rem;
  height: 2.4rem;
  border-radius: 0.16rem;
  overflow: hidden;
}

.hoteimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.big-tags {
  width: 3.3rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 0.44rem;
  color: rgba(16, 16, 16, 1);
  font-size: 0.32rem;
  text-align: left;
  padding-top: .1rem;
}

.small-tags {
  color: rgba(16, 16, 16, 1);
  font-size: 0.32rem;
  text-align: left;
  font-family: PingFangSC-regular;
  overflow: hidden;
  padding: .1rem 0;
}

.small-tags span {
  float: left;
  width: 1.16rem;
  height: 0.4rem;
  line-height: 0.4rem;
  border-radius: 0.06rem;
  background-color: rgba(253, 245, 233, 1);
  color: rgba(226, 152, 54, 1);
  font-size: 0.24rem;
  text-align: center;
  font-family: Arial;
  margin-right: .1rem;
}

/* 成为会员 */
.vipbox {
  width: 100%;
  display: flex;
  padding: .1rem .2rem;
}

.vipbox img {

  width: 100%;
}

/* foot */
.footbox {
  background-color: rgba(0, 0, 0, 1);
}

.footlogo {
  display: flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
}

.footlogo img {
  width: 2.4rem;
  height: 0.82rem;
}

.foottabbox {
  padding: .3rem;
}

.bigbox {
  height: .8rem;
  width: 100%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  display: flex;
}

.smallbox {
  color: #fff;
  height: .8rem;
  line-height: .8rem;
  font-size: 0.28rem;
  text-align: center;
  flex: 1;
  border-right: 1px solid #fff;
}

.phonebox {
  width: 6.4rem;
  margin: .2rem auto;
  padding-bottom: .3rem;
  border-bottom: 1px solid #fff;
}

.phoneimg {
  display: flex;
  height: .8rem;
  align-items: center;
  justify-content: center;
}

.phoneimg img {
  width: 0.6rem;
  height: 0.6rem;
}

.phonetext {
  color: #fff;
  width: 2.6rem;
  height: 0.4rem;
  line-height: .45rem;
  text-align: center;
  font-size: 0.28rem;
  margin: .1rem auto;
}

.customer {
  padding: .3rem 0;
}

.customerbtn {
  margin: .2rem auto;
  width: 1.6rem;
  height: 0.6rem;
  line-height: .6rem;
  border-radius: 0.08rem;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
  font-size: 0.28rem;
  text-align: center;
  font-family: Microsoft Yahei;
}

.customernum {
  margin: .2rem auto;
  height: 0.52rem;
  color: rgba(255, 255, 255, 1);
  font-size: 0.36rem;

  text-align: center;
  font-family: PingFangSC-medium;
}

.customernum a {
  color: rgba(255, 255, 255, 1) !important;
}

.Ptext {
  color: rgba(255, 255, 255, 1);
  text-align: center;
  font-size: 0.2rem;
  height: .3rem;
}

.lastbox {
  padding: .4rem;
}

.flowpath {
  width: 100%;
}

.flowpath img {
  width: 100%;
}

/* 用户故事 */
.story {
  width: 100%;
  overflow-x: auto;
}

.storylist {
  display: inline-block;
  margin-right: .3rem;
  width: 4rem;


}

.scorry {
  display: flex;
  margin: .3rem 0;
}

.story::-webkit-scrollbar {
  width: 0.1rem;
}

.story::-webkit-scrollbar-track {
  background-color: #fff;
}

.story::-webkit-scrollbar-thumb {
  background-color: #fff;
}

.stoty-top {
  overflow: hidden;
  font-size: 0.28rem;
  ;
  /* padding: .2rem; */
  width: 4rem;
  /* box-shadow: 0rem 0.08rem 0.12rem 0.04rem rgba(239, 239, 239, 100); */

  border-radius: 0.16rem;
  /* background: linear-gradient(180deg, rgba(221, 39, 93, 0.1) 0%, rgba(255, 255, 255, 0) 100%); */
}

.stoty-tops {
  overflow: hidden;
  font-size: 0.28rem;
  ;


  box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(239, 239, 239, 100);

  border-radius: 0.16rem;
  /* background: linear-gradient(180deg, rgba(221, 39, 93, 0.1) 0%, rgba(255, 255, 255, 0) 100%); */
}

.stoty-top img {
  display: inline-block;
  width: 4rem;

}

.stoty-tops img {
  display: inline-block;
  width: 2.6rem;

}

.storyusertitle {
  height: 0.52rem;
  margin-top: .3rem;
  line-height: .52rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.36rem;
}

.stoty-top img {
  width: 100%;
  /* height: 4.8rem; */
  border-radius: 0.16rem;
}

.chaAll {

  height: 0.32rem;
  color: rgba(221, 39, 93, 1);
  font-size: 0.24rem;
  text-align: left;
  font-family: PingFangSC-medium;
  margin: .1rem 0;
}

.chaAll span {
  height: 0.32rem;
  float: left;

}

.chaAll img {
  float: left;
  margin-top: .15rem;
  height: .12rem;
  width: .12rem;
  vertical-align: middle;
}

.storyuser {
  margin-top: .2rem;
  display: flex;
  justify-content: space-between;
}

.userleft {
  height: .4rem;
  color: rgba(16, 16, 16, 1);
  font-size: 0.28rem;
}

.userleft span {
  float: left;
  height: .4rem;
  line-height: .4rem;
  margin-right: .1rem;
  vertical-align: middle;
}

.userleft span img {

  height: .4rem;
  width: .4rem;
  border-radius: 50%;

}

.userright {
  color: rgba(154, 154, 154, 1);
  font-size: 0.24rem;
  text-align: right;
  height: .4rem;
  line-height: .4rem;
}

.lunbo {
  position: relative;
  padding: .3rem 0;
  background-color: #fff;
  border-radius: 0.4rem 0.4rem 0rem 0rem;
  width: 7.5rem;
  /* height: 10.34rem; */
  /* top: -0.3rem; */
  z-index: 9999 !important;
}

.tab {

  overflow: hidden;
  padding: .3rem;
}

/* Style the buttons inside the tab */
.tab .button {
  margin-left: .12rem;
  border-radius: 50%;
  float: left;
  width: 1.22rem;
  height: 1.22rem;
  line-height: 1.22rem;
  text-align: center;
  color: rgba(154, 154, 154, 1);
  border: 0.02rem solid rgba(187, 187, 187, 1);
}


/* Create an active/current tablink class */
.tab .button.active {
  /* background-color: #ccc; */
  color: #fff;
  background-color: #DD275D !important;
  border: 0.02rem solid #DD275D;
  animation: colors .5s;
}

/* Style the tab content */
.tabcontent,
.tabcontents {
  display: none;
  padding: 6px 12px;

  border-top: none;
}

.tabcontent img,
.tabcontents img {
  width: 100%;
}

/* Add animation to the tab content */
.tabcontent.move,
.tabcontents.move {
  animation: slide .5s;
}

@keyframes colors {
  from {
    background-color: rgba(239, 239, 239, 1) !important;
    color: #999;
  }

  to {
    background-color: #DD275D !important;
    color: #fff;
  }
}


@keyframes slide {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

#navigation {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: #fff !important;
  z-index: 999999;
}