:root{
  --main-color-blue: #076CE0;
  --main-color-orange: #FF8D1A;
  --main-color-red: #FF5733;
  --main-span: calc((100vw - 750rem) / 2);
}

/* 布局 */
.flex{
  display: flex;
}

.flex1{
  flex: 1;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-column{
  flex-direction: column;
}

.justify-between{
  justify-content: space-between;
}

.justify-around{
  justify-content: space-around;
}

.justify-center{
  justify-content: center;
}

.justify-end{
  justify-content: flex-end;
}

.items-center{
  align-items: center;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.row-reverse{
  flex-direction: row-reverse;
}

.column-reverse{
  flex-direction: column-reverse;
}

/* 单行文本超出省略号 */
.text-overflow{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}

/* 默认高分辨率图隐藏 */
.x2-img{
  display: none;
}

.x3-img{
  display: none;
}

/* 文本对齐 */
.align-right{
  text-align: right;
}

/* 容器 */
body{
  padding-left: var(--main-span);
  padding-right: var(--main-span);
  font-size: 16rem;
}

.container{
  margin-left: auto;
  margin-right: auto;
  padding-left: 48rem;
  padding-right: 48rem;
}

.screenHeight{
  min-height: 100vh;
}

/* 边距 */
.span-t-10{
  padding-top: 10rem;
}

.span-t-20{
  padding-top: 20rem;
}

.span-t-24{
  padding-top: 24rem;
}

.span-l-24{
  padding-left: 24rem;
}

.span-r-24{
  padding-right: 24rem;
}

.span-b-24{
  padding-bottom: 24rem;
}

.span-t-30{
  padding-top: 30rem;
}

.span-t-40{
  padding-top: 40rem;
}

.span-b-40{
  padding-bottom: 40rem;
}

.span-l-48{
  padding-left: 48rem;
}

.span-r-48{
  padding-right: 48rem;
}

.span-t-50{
  padding-top: 50rem;
}

.span-b-50{
  padding-bottom: 50rem;
}

.span-safe-bottom{
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
}

/* 间隔线 */
.span-line{
  margin-left: 32rem;
  margin-right: 32rem;
  margin-top: 25rem;
  margin-bottom: 25rem;
  border-bottom: dashed 2rem #E5E5E5;
}

/* 圆角 */
.radius-10{
  border-radius: 10rem;
}

.radius-20{
  border-radius: 20rem;
}

/* 背景色 */
.main-bg{
  background-image: linear-gradient(to bottom, #E7F0FF, #F4F5FE);
}

.main-bg-2{
  background-color: #F8F8F8;
}

.main-bg-3{
  background-color: #FFFFFF;
}

.main-bg-4{
  background-image: linear-gradient(to top right, rgba(206, 223, 240, 1), rgba(240, 255, 209, 0.01));
}

/* 图标容器 */
.icon-wrap{
  font-size: 0;
}

/* 箭头 */
.main-arrow{
  position: relative;
  width: 10rem;
  height: 20rem;
}

.main-arrow:before,
.main-arrow:after{
  content: "";
  position: absolute;
  right: 2rem;
  width: 16rem;
  height: 3rem;
  background-color: #808080;
  border-radius: 2rem;
}

.main-arrow:before{
  bottom: 50%;
  margin-bottom: -2rem;
  transform-origin: right bottom;
  transform: rotate(45deg);
}

.main-arrow:after{
  top: 50%;
  margin-top: -2rem;
  transform-origin: right top;
  transform: rotate(-45deg);
}

/* 图片空占位 */
.notCover-wrap{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.notCover-wrap img{
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80rem;
  height: 80rem;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

/* 确认弹窗 */
.modal-wrap{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
}

.modal-wrap .mask{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-wrap .wrap{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600rem;
  background-color: white;
  border-radius: 10rem;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.modal-wrap .wrap .title{
  padding-top: 30rem;
  padding-bottom: 10rem;
  font-size: 36rem;
  line-height: 50rem;
  text-align: center;
}

.modal-wrap .wrap .content{
  padding-top: 40rem;
  padding-bottom: 40rem;
  padding-left: 50rem;
  padding-right: 50rem;
  min-height: 160rem;
  max-height: 400rem;
  font-size: 30rem;
  color: #999;
  line-height: 42rem;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-wrap .wrap .foot-wrap{
  height: 96rem;
  border-top: 2rem solid #d5d5d6;
}

.modal-wrap .wrap .foot-wrap .cancel-btn,
.modal-wrap .wrap .foot-wrap .confirm-btn{
  height: 96rem;
  font-size: 36rem;
}

.modal-wrap .wrap .foot-wrap .cancel-btn{
  color: #000000;
}

.modal-wrap .wrap .foot-wrap .confirm-btn{
  color: var(--main-color-blue);
  box-shadow: inset 2rem 0 0 #d5d5d6;
}

/* 首页 */
.index-container{
  position: relative;
  padding-top: 400rem;
  padding-bottom: 410rem;
  min-height: 100vh;
  background-image: linear-gradient(to bottom, #DDE9FB, #FFFFFF);
}

.index-container .lt-icon{
  position: absolute;
  left: 0;
  top: 0;
}

.index-container .lt-icon{
  font-size: 0;
}

.index-container .lt-icon img{
  width: 352rem;
  height: auto;
}

.index-container .logo{
  margin-bottom: 90rem;
  font-size: 0;
}

.index-container .logo img{
  width: 240rem;
}

.index-container .logo span{
  font-size: 60rem;
  font-weight: bold;
}

.sign-in{
  margin-top: 180rem;
}

.sign-in span{
  font-size: 32rem;
  color: var(--main-color-blue);
  line-height: 44rem;
}

.sign-in .icon-wrap{
  margin-left: 8rem;
}

.sign-in .icon-wrap img{
  width: 40rem;
}

.sign-in .btn{
  cursor: pointer;
}

/* 注册 */
.register-container{
  padding-bottom: 130rem;
}

.register-container .head{
  margin-bottom: 50rem;
}

.register-container .head .title{
  font-size: 36rem;
  color: #121212;
  line-height: 50rem;
}

.register-container .head .text{
  font-size: 28rem;
  color: #121212;
  line-height: 40rem;
}

.register-container .head .text a{
  color: var(--main-color-blue);
}

/* 登录 */
.login-container{
  padding-top: 90rem;
  padding-bottom: 410rem;
}

.login-container .logo{
  /* margin-bottom: 36rem; */
  margin-bottom: 30rem;
  font-size: 0;
}

.login-container .logo img{
  width: 242rem;
}

.login-container .logo span{
  font-size: 48rem;
  font-weight: bold;
  line-height: 60rem;
}

.login-container .hello{
  margin-bottom: 88rem;
  font-size: 40rem;
  color: #121212;
  line-height: 56rem;
}

.login-container .main-form .item.code-item{
  width: 100%;
}

.login-container .main-form .item .getCode{
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 240rem;
}

.login-container .setting .point{
  width: 24rem;
  height: 24rem;
  box-shadow: inset 0 0 0 2rem #A6A6A6;
  border-radius: 50%;
}

.login-container .setting.active .point{
  position: relative;
  box-shadow: inset 0 0 0 2rem var(--main-color-blue);
}

.login-container .setting.active .point:before{
  content: "";
  position: absolute;
  left: 4rem;
  top: 4rem;
  width: 16rem;
  height: 16rem;
  background-color: var(--main-color-blue);
  border-radius: 50%;
}

.login-container .setting .text{
  margin-left: 6rem;
  font-size: 24rem;
  color: #A6A6A6;
  line-height: 34rem;
}

.login-container .setting .text a{
  margin-left: 10rem;
  margin-right: 10rem;
  color: var(--main-color-blue);
}

.login-container .login-btn{
  margin-top: 60rem;
}

/* 会议室 */
.room-container .cover{
  position: relative;
  padding-top: calc(382 / 750 * 100%);
}

.room-container .cover .img{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-container .wrap{
  padding-bottom: 40rem;
}

.room-container .price-wrap{
  padding-top: 20rem;
  padding-bottom: 20rem;
}

.room-container .price-wrap .discount-price .txt:nth-child(1){
  font-size: 0;
}

.room-container .price-wrap .discount-price .txt:nth-child(1) span{
  vertical-align: baseline;
}

.room-container .price-wrap .discount-price .txt:nth-child(2){
  margin-bottom: 5rem;
}

.room-container .price-wrap .discount-price span{
  font-size: 24rem;
  color: var(--main-color-blue);
}

.room-container .price-wrap .discount-price .symbol{
  margin-left: 8rem;
  font-size: 26rem;
}

.room-container .price-wrap .discount-price .num{
  font-size: 48rem;
  line-height: 50rem;
}

.room-container .price-wrap .discount-price .discount{
  padding-left: 12rem;
  padding-right: 12rem;
  margin-left: 16rem;
  height: 34rem;
  font-size: 20rem;
  color: var(--main-color-blue);
  border: solid 1px var(--main-color-blue);
  border-radius: 8rem;
}

.room-container .price-wrap .discount-price .price{
  margin-left: 16rem;
  font-size: 24rem;
  color: #A6A6A6;
  line-height: 34rem;
}

.room-container .price-wrap .sales-volume{
  font-size: 24rem;
  color: #808080;
  line-height: 34rem;
}

.room-container .card-wrap{
  padding-bottom: 8rem;
}

.room-container .card-wrap .head .title{
  max-width: calc(100% - 22rem - 120rem);
  font-weight: 600;
  font-size: 32rem;
  color: #121212;
  line-height: 44rem;
}

.room-container .card-wrap .head .status{
  margin-left: 22rem;
  width: 120rem;
  height: 48rem;
  font-size: 24rem;
  color: #FFFFFF;
  background: #43CF7C;
}

.room-container .card-wrap .address{
  margin-top: 12rem;
  font-size: 24rem;
  color: #000000;
  line-height: 40rem;
}

.room-container .card-wrap .tags{
  margin-top: 12rem;
}

.room-container .card-wrap .tags span{
  padding-left: 14rem;
  padding-right: 14rem;
  margin-right: 16rem;
  margin-bottom: 16rem;
  font-size: 20rem;
  color: #2C2C2C;
  line-height: 44rem;
  background: #F2F2F2;
}

.room-container .card-wrap .tags span:last-child{
  margin-right: 0;
}

.room-container .image-text-wrap .title{
  font-size: 28rem;
  color: #121212;
  line-height: 40rem;
  letter-spacing: 2rem;
}

.room-container .image-text-wrap .content{
  font-size: 28rem;
  color: #121212;
  line-height: 40rem;
}

.room-container .image-text-wrap .content img{
  max-width: 100%;
}

.know-wrap .title{
  font-size: 28rem;
  color: #121212;
  line-height: 40rem;
  letter-spacing: 2rem;
}

.know-wrap .list{
  margin-top: 24rem;
}

.know-wrap .list .item:nth-child(n+2){
  margin-top: 30rem;
}

.know-wrap .list .item .label .icon-wrap img{
  width: 30rem;
}

.know-wrap .list .item .label span{
  margin-left: 14rem;
  font-size: 24rem;
  color: #121212;
  line-height: 34rem;
  letter-spacing: 2rem;
}

.know-wrap .list .item .cont{
  margin-top: 8rem;
}

.know-wrap .list .item .cont .li{
  position: relative;
  padding-left: 44rem;
  font-size: 24rem;
  color: #666666;
  line-height: 34rem;
  letter-spacing: 2rem;
}

.know-wrap .list .item .cont .li:nth-child(n+2){
  margin-top: 12rem;
}

.know-wrap .list .item:nth-child(2) .cont .li:before{
  content: "";
  position: absolute;
  left: 12rem;
  top: 14rem;
  width: 6rem;
  height: 6rem;
  background-color: #333333;
  border-radius: 50%;
}

.room-time-select-wrapper .drawer-wrap-head{
  padding-top: 28rem;
  padding-bottom: 28rem;
}

.room-time-select-wrapper .drawer-wrap-head .title{
  font-size: 32rem;
  color: #121212;
  line-height: 44rem;
}

.room-time-select-wrapper .drawer-wrap-head .icon-wrap{
  cursor: pointer;
}

.room-time-select-wrapper .drawer-wrap-head .icon-wrap img{
  width: 42rem;
}

.room-time-select-wrapper .drawer-wrap-content{
  position: relative;
}

.room-time-select-wrapper .drawer-wrap-content .loading{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
  background-color: #FFFFFF;
}

@keyframes loading {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.room-time-select-wrapper .drawer-wrap-content .loading .icon{
  width: 38rem;
  height: 38rem;
  background-image: url(../images/icon-loading.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: loading 1s 0s linear infinite;
}

.room-time-select-wrapper .drawer-wrap-content .loading span{
  margin-top: 20rem;
  font-size: 24rem;
  color: #999999;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap{
  padding-bottom: 12rem;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .sub-head .day{
  font-size: 28rem;
  color: #121212;
  line-height: 40rem;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .sub-head .tips .icon-wrap img{
  width: 26rem;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .sub-head .tips span{
  margin-left: 8rem;
  font-size: 24rem;
  color: var(--main-color-orange);
  line-height: 36rem;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .calendar{
  width: calc(100% - 70rem);
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .calendar .item{
  margin-right: 12rem;
  height: 120rem;
  color: #121212;
  cursor: pointer;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .calendar .item.active{
  color: var(--main-color-blue);
  background: rgba(7, 108, 224, 0.1);
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .calendar .item.disabled{
  position: relative;
  color: #121212 !important;
  background-color: #FAFAFA !important;
  cursor: not-allowed;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .calendar .item.disabled:before{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 16rem;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), #EEEFF0);
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .calendar .item .week{
  font-size: 24rem;
  line-height: 34rem;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .calendar .item .day{
  margin-top: 6rem;
  font-size: 32rem;
  line-height: 44rem;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .all-calendar{
  position: relative;
  margin-right: -24rem;
  height: 120rem;
  width: 140rem;
  overflow: hidden;
  cursor: pointer;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .all-calendar .icon-wrap:nth-child(1) img{
  width: 42rem;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .all-calendar .icon-wrap:nth-child(2){
  margin-top: 6rem;
}

.room-time-select-wrapper .drawer-wrap-content .top-wrap .calendar-wrap .all-calendar .icon-wrap:nth-child(2) img{
  width: 34rem;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap{
  padding-top: 30rem;
  padding-bottom: 60rem;
  height: 750rem;
  max-height: calc(100vh - 292rem - 274rem);
  overflow-y: auto;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item{
  margin-right: 28rem;
  width: calc((100% - 28rem * 2) / 3);
  height: 200rem;
  cursor: pointer;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item:nth-child(3n+3){
  margin-right: 0;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item:nth-child(n+4){
  margin-top: 30rem;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item .number{
  font-size: 32rem;
  color: #121212;
  line-height: 44rem;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item .status{
  margin-top: 18rem;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item .status .icon-wrap{
  margin-right: 4rem;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item .status .icon-wrap img{
  width: 26rem;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item .status span{
  font-size: 24rem;
  color: #808080;
  line-height: 34rem;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item.active{
  background-color: var(--main-color-blue);
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item.active .number,
.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item.active .status span{
  color: #FFFFFF;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item.disabled{
  background-color: #A6A6A6 !important;
  cursor: not-allowed;
}

.room-time-select-wrapper .drawer-wrap-content .content-wrap .duration-wrap .item.disabled .status span{
  color: #383838;
}

.room-time-select-wrapper .drawer-wrap-foot{
  padding-bottom: 40rem;
}

.room-time-select-wrapper .drawer-wrap-foot .title{
  font-size: 28rem;
  color: #121212;
  line-height: 40rem;
}

.room-time-select-wrapper .drawer-wrap-foot .time-box{
  margin-top: 8rem;
  font-size: 24rem;
  line-height: 34rem;
}

.room-time-select-wrapper .drawer-wrap-foot .time-box .day,
.room-time-select-wrapper .drawer-wrap-foot .time-box .time{
  color: #383838;
}

.room-time-select-wrapper .drawer-wrap-foot .time-box .time{
  margin-left: 20rem;
} 

.room-time-select-wrapper .drawer-wrap-foot .time-box .duration{
  position: relative;
  margin-left: 32rem;
  color: var(--main-color-blue);
}

.room-time-select-wrapper .drawer-wrap-foot .time-box .duration:before{
  content: "";
  position: absolute;
  left: -17rem;
  top: 50%;
  margin-top: -12rem;
  width: 1px;
  height: 24rem;
  background-color: #383838;
}

.room-time-select-wrapper .drawer-wrap-foot .btns{
  margin-top: 24rem;
  padding-left: 32rem;
  height: 104rem;
  background: #383838;
}

.room-time-select-wrapper .drawer-wrap-foot .btns .price .number{
  font-size: 0;
}

.room-time-select-wrapper .drawer-wrap-foot .btns .price .number span{
  color: #FFFFFF;
  vertical-align: baseline;
}

.room-time-select-wrapper .drawer-wrap-foot .btns .price .number span.symbol{
  font-size: 32rem;
}

.room-time-select-wrapper .drawer-wrap-foot .btns .price .number span.num{
  font-size: 48rem;
}

.room-time-select-wrapper .drawer-wrap-foot .btns .price .original{
  margin-left: 6rem;
  margin-top: 8rem;
  font-size: 24rem;
  color: #A6A6A6;
  line-height: 34rem;
  text-decoration:line-through;
}

.room-time-select-wrapper .drawer-wrap-foot .btns .submit-btn{
  width: 256rem;
  font-size: 32rem;
  color: #FFFFFF;
  background-color: var(--main-color-blue);
  border-radius: 0 20rem 20rem 0;
  cursor: pointer;
}

/* 会议室提交 */
.navbar-2-wrap .back-btn{
  cursor: pointer;
}

.navbar-2-wrap .back-btn .icon-wrap img{
  width: 48rem;
}

.room-pay-success-wrap{
  padding-bottom: 500rem;
}

.room-pay-success-wrap-2{
  margin-bottom: 30rem;
}

.room-pay-success-wrap-2 .title{
  font-size: 48rem;
  color: #121212;
  line-height: 68rem;
}

.room-pay-success-wrap-2 .tips{
  font-size: 24rem;
  color: #383838;
  line-height: 34rem;
}

.room-pay-status-wrap .icon-wrap img{
  width: 50rem;
}

.room-pay-status-wrap span{
  margin-left: 18rem;
  font-size: 32rem;
  color: #121212;
  line-height: 44rem;
}

.room-pay-card{
  padding-left: 32rem;
  padding-right: 32rem;
}

.room-pay-success-wrap .room-pay-card{
  margin-top: 80rem;
}

.room-pay-card .head{
  height: 90rem;
  border-bottom: dashed 2rem #E5E5E5;
}

.room-pay-card .head .title{
  font-size: 28rem;
  color: #121212;
}

.room-pay-card .head .more span{
  margin-right: 14rem;
  font-size: 24rem;
  color: #808080;
}

.room-pay-card .wrap{
  padding-top: 48rem;
}

.room-pay-card .wrap .title{
  font-size: 28rem;
  color: #808080;
  line-height: 40rem;
  text-align: center;
}

.room-pay-card .wrap .password{
  margin-top: 44rem;
  font-size: 32rem;
  color: #121212;
  line-height: 44rem;
  text-align: center;
}

.room-pay-card .wrap .password.active{
  font-size: 28rem;
  color: red;
}

.room-pay-card .wrap .tips{
  padding: 26rem;
  margin-top: 42rem;
  font-size: 24rem;
  color: #808080;
  line-height: 34rem;
  text-align: center;
  background: #FAFAFA;
}

.room-pay-success-wrap .submit-btn{
  margin-top: 70rem;
}

.room-pay-time-wrap{
  margin-top: 16rem;
}

.room-pay-time-wrap .title .text{
  font-size: 48rem;
  color: #121212;
  line-height: 68rem;
}

.room-pay-time-wrap .title .time{
  margin-left: 10rem;
  font-size: 48rem;
  color: #DE485E;
  line-height: 68rem;
}

.room-pay-time-wrap .tips{
  margin-left: 8rem;
  font-size: 24rem;
  color: #383838;
  line-height: 34rem;
}

.room-info-wrap{
  padding-bottom: 8rem;
}

.room-info-wrap .pic{
  position: relative;
  width: 184rem;
  height: 184rem;
  overflow: hidden;
}

.room-info-wrap .pic .img{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-info-wrap .wrap{
  padding-left: 20rem;
  width: calc(100% - 184rem);
}

.room-info-wrap .wrap .title{
  max-width: calc(100% - 120rem - 22rem);
  font-size: 32rem;
  color: #121212;
  line-height: 44rem;
}

.room-info-wrap .wrap .status{
  margin-left: 22rem;
  width: 120rem;
  height: 48rem;
  font-size: 24rem;
  color: #FFFFFF;
  background: #43CF7C;
}

.room-info-wrap .wrap .address{
  font-size: 24rem;
  color: #000000;
  line-height: 28rem;
}

.room-info-wrap .wrap .tags{
  margin-top: 16rem;
}

.room-info-wrap .wrap .tags span{
  margin-right: 16rem;
  margin-bottom: 16rem;
  padding-left: 16rem;
  padding-right: 16rem;
  font-size: 20rem;
  color: #2C2C2C;
  line-height: 44rem;
  background-color: #F2F2F2;
}

.room-info-wrap .wrap .tags span:last-child{
  margin-right: 0;
}

.roomAdd-submit-wrap .wrap,
.roomAdd-submit-wrap .placeholder{
  height: 170rem;
  height: calc(170rem + constant(safe-area-inset-bottom));
  height: calc(170rem + env(safe-area-inset-bottom));
}

.roomAdd-submit-wrap.room-refund .wrap,
.roomAdd-submit-wrap.room-refund .placeholder{
  height: 210rem;
  height: calc(210rem + constant(safe-area-inset-bottom));
  height: calc(210rem + env(safe-area-inset-bottom));
}
 
.roomAdd-submit-wrap .wrap{
  position: fixed;
  left: var(--main-span);
  bottom: 0;
  right: var(--main-span);
  z-index: 999;
}

.roomAdd-submit-wrap .wrap .tips{
  margin-bottom: 12rem;
  font-size: 22rem;
  color: #383838;
  line-height: 30rem;
}

.roomAdd-submit-wrap .wrap .price{
  color: var(--main-color-blue);
}

.roomAdd-submit-wrap .wrap .price .numberStr{
  margin-bottom: 5rem;
  font-size: 28rem;
}

.roomAdd-submit-wrap .wrap .price .text{
  margin-right: 10rem;
  margin-bottom: 8rem;
  font-size: 24rem;
  color: #383838;
}

.roomAdd-submit-wrap .wrap .price .number{
  font-size: 0;
}

.roomAdd-submit-wrap .wrap .price .number span{
  vertical-align: baseline;
}

.roomAdd-submit-wrap .wrap .price .number span.symbol{
  font-size: 32rem;
}

.roomAdd-submit-wrap .wrap .price .number span.num{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36rem;
}

.roomAdd-submit-wrap .wrap .price .original{
  margin-left: 6rem;
  margin-top: 8rem;
  font-size: 24rem;
  color: #A6A6A6;
  line-height: 34rem;
  text-decoration:line-through;
}

.roomAdd-submit-wrap .wrap .duration-wrap{
  font-size: 24rem;
  color: var(--main-color-blue);
  line-height: 34rem;
}

.roomAdd-submit-wrap .wrap .duration-wrap .discounts{
  position: relative;
  margin-left: 32rem;
}

.roomAdd-submit-wrap .wrap .duration-wrap .discounts:before {
  content: "";
  position: absolute;
  left: -17rem;
  top: 50%;
  margin-top: -12rem;
  width: 1px;
  height: 24rem;
  background-color: var(--main-color-blue);
}

.roomAdd-submit-wrap .wrap .submit-btn-wrap{
  gap: 16rem;
}

.roomAdd-submit-wrap .wrap .submit-btn{
  width: 200rem;
}

.drawer-wrap-content-2{
  margin-top: 2rem;
  margin-bottom: 40rem;
}

.drawer-wrap-content-2 .pay-err-wrap{
  padding-top: 60rem;
  padding-bottom: 16rem;
}

.drawer-wrap-content-2 .pay-err-wrap .status .icon-wrap img{
  width: 48rem;
}

.drawer-wrap-content-2 .pay-err-wrap .status  span{
  margin-left: 20rem;
  font-size: 30rem;
  color: #000000;
  line-height: 42rem;
}

.drawer-wrap-content-2 .pay-err-wrap .tips{
  margin-top: 30rem;
  font-size: 24rem;
  color: #808080;
  line-height: 34rem;
  text-align: center;
}

.drawer-wrap-content-2 .price-wrap{
  padding-top: 20rem;
  padding-bottom: 20rem;
  background: rgba(255,141,26,0.1);
}

.drawer-wrap-content-2 .price-wrap .item{
  height: 64rem;
}

.drawer-wrap-content-2 .price-wrap .item .label{
  font-size: 28rem;
  color: #383838;
}

.drawer-wrap-content-2 .price-wrap .item .text{
  font-size: 28rem;
  color: #383838;
}

.drawer-wrap-content-2 .price-wrap .item .text.discount{
  color: var(--main-color-orange);
}

.drawer-wrap-foot .btns{
  width: 182rem;
  height: 72rem;
  font-size: 28rem;
  color: #808080;
  border: 2rem solid #A6A6A6;
  cursor: pointer;
}

.drawer-wrap-foot .btns.active{
  color: #FFFFFF;
  background-color: var(--main-color-blue);
  border-color: var(--main-color-blue);
}

.push-loading-wrap {
  overflow: hidden;
}

.push-loading-wrap.status0{
  height: 0px !important;
  transition: all 0.2s;
}

.push-loading-wrap.status3,
.push-loading-wrap.status4{
  height: 60rem !important;
  transition: all 0.2s;
}

.push-loading-wrap span{
  font-size: 24rem;
  color: #666666;
}

/* 个人中心 */
.my-container .user-wrapper{
  padding-top: 46rem;
}

.my-container .user-wrapper .info {
  padding-left: 16rem;
  padding-right: 16rem;
}

.my-container .user-wrapper .info .avatar{
  position: relative;
  width: 144rem;
  height: 144rem;
  border: solid 6rem #FFFFFF;
  border-radius: 50%;
  box-shadow: 0px 4rem 12rem rgba(7, 108, 224, 0.05);
}

.my-container .user-wrapper .info .avatar .img{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.my-container .user-wrapper .info .avatar .notCover-wrap img{
  width: 60rem;
  height: 60rem;
}

.my-container .user-wrapper .info .avatar .icon-wrap{
  position: absolute;
  right: 5rem;
  bottom: 1rem;
}

.my-container .user-wrapper .info .avatar .icon-wrap img{
  width: 36rem;
}

.my-container .user-wrapper .info .avatar .camera{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 50%;
}

.my-container .user-wrapper .info .wrap{
  width: calc(100% - 144rem);
}

.my-container .user-wrapper .info .wrap .name{
  width: 100%;
  font-size: 32rem;
  color: #121212;
  line-height: 44rem;
}

.my-container .user-wrapper .info .wrap .vip{
  margin-top: 14rem;
  padding-left: 14rem;
  padding-right: 14rem;
  padding-top: 10rem;
  padding-bottom: 10rem;
  background-color: rgba(67, 207, 124, 0.10);
  border-radius: 8rem;
}

.my-container .user-wrapper .info .wrap .vip .icon-wrap img{
  width: 28rem;
}

.my-container .user-wrapper .info .wrap .vip span{
  margin-left: 8rem;
  font-size: 24rem;
  color: #43CF7C;
  line-height: 28rem;
}

.my-container .user-wrapper .company-wrapper{
  margin-top: 64rem;
  padding-left: 32rem;
  padding-right: 32rem;
  height: 142rem;
  background: #323648;
  border-radius: 20rem 20rem 0 0;
}

.my-container .user-wrapper .company-wrapper .title{
  font-size: 32rem;
  color: #FFFFFF;
  line-height: 44rem;
}

.my-container .user-wrapper .company-wrapper .city{
  padding-left: 20rem;
  padding-right: 20rem;
  min-width: 120rem;
  height: 56rem;
  font-size: 28rem;
  color: #FFFFFF;
  background-color: var(--main-color-blue);
  border-radius: 28rem;
}

.my-container .user-wrapper .company-wrapper .discounts{
  margin-top: 10rem;
  font-size: 24rem;
  color: #E9EEF3;
  line-height: 34rem;
}

.my-container .bot-wrapper{
  padding-bottom: 250rem;
}

.my-container .menu-wrapper .item{
  padding-left: 32rem;
  padding-right: 32rem;
  height: 105rem;
}

.my-container .menu-wrapper .item .icon-wrap img{
  width: 40rem;
}

.my-container .menu-wrapper .item .cont{
  padding-left: 28rem;
  width: calc(100% - 40rem);
}

.my-container .menu-wrapper .item .cont .label{
  font-size: 28rem;
  color: #121212;
  line-height: 40rem;
}

.my-container .menu-wrapper .item .cont .text{
  font-size: 28rem;
  color: #383838;
  line-height: 40rem;
}

.my-container .my-btn{
  margin-top: 78rem;
}

/* 表单 */
.main-form .item{
  position: relative;
  min-height: 96rem;
  box-shadow: 0px 4rem 12rem rgba(7, 108, 224, 0.05);
  border-radius: 16rem;
}

.main-form .item .label{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding-left: 40rem;
  width: 200rem;
  font-size: 32rem;
  color: #121212;
  line-height: 96rem;
  cursor: pointer;
  pointer-events: none;
}

.main-form .item .cont .input{
  display: block;
  padding-left: 40rem;
  padding-right: 40rem;
  width: 100%;
  height: 96rem;
  font-size: 32rem;
  color: #121212;
  line-height: 96rem;
  border-radius: 16rem;
  background: none;
  border: none;
}

.main-form .item .cont .input:focus{
  box-shadow: inset 0 0 0 2rem rgba(7, 108, 224, 0.8), 0 0 0 4rem rgba(7, 108, 224, 0.1);
}

.main-form .item .cont .input::-webkit-input-placeholder {
  color: #A6A6A6;
}

.main-form .item .cont .input:-moz-placeholder {
  color: #A6A6A6;
}

.main-form .item .cont .input::-moz-placeholder {
  color: #A6A6A6;
}

.main-form .item .cont .input:-ms-input-placeholder {
  color: #A6A6A6;
}

.register-container .main-form .item .cont .input{
  padding-left: 200rem;
}

.main-form .row-item {
  gap: 30rem;
}

.main-form .item.code-item{
  width: 390rem;
}

.main-form .item.code-item .label{
  width: 174rem;
}

.main-form .item .getCode{
  height: 96rem;
  font-size: 32rem;
  color: var(--main-color-blue);
  cursor: pointer;
}

.main-form .item .getCode.active{
  font-size: 28rem;
  color: #999999;
}

.main-form .item.city-item.primary{
  background-color: var(--main-color-blue);
}

.main-form .item.city-item .label{
  padding: 0;
  width: 100%;
}

.main-form .item.city-item.primary .label{
  color: #FFFFFF;
}

.main-form .register-btn{
  margin-top: 134rem;
}

.main-form-2{
  padding-top: 15rem;
  padding-bottom: 15rem;
}

.main-form-2 .main-title{
  padding-top: 25rem;
  padding-bottom: 15rem;
  padding-left: 32rem;
  padding-right: 32rem;
  font-size: 30rem;
  color: #000000;
  line-height: 42rem;
}

.main-form-2 .item{
  padding-left: 32rem;
  padding-right: 32rem;
  min-height: 70rem;
}

.main-form-2 .item .label{
  font-size: 28rem;
  color: #383838;
  line-height: 70rem;
}

.main-form-2 .item .text{
  flex: 1;
  padding-top: 15rem;
  padding-bottom: 15rem;
  font-size: 28rem;
  color: #121212;
  line-height: 40rem;
  text-align: right;
}

.main-form-2 .item .text-2{
  flex: 1;
  padding-top: 13rem;
  padding-bottom: 13rem;
  font-size: 28rem;
  color: #666666;
  line-height: 48rem;
}

.main-form-2 .item .text .original{
  color: var(--main-color-orange);
}

.main-form-2 .item .text .price{
  color: var(--main-color-red);
}

.main-form-2 .item .textarea{
  margin-bottom: 13rem;
}

.main-form-2 .item .textarea textarea{
  display: block;
  padding-top: 26rem;
  padding-bottom: 26rem;
  padding-left: 32rem;
  padding-right: 32rem;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 374rem;
  font-size: 28rem;
  color: #383838;
  line-height: 40rem;
  min-height: 374rem;
  background: #FAFAFA;
  border: none;
}

.main-form-2 .item .textarea textarea:focus{
  background-color: #FFFFFF;
  box-shadow: inset 0 0 0 2rem rgba(7, 108, 224, 0.8), 0 0 0 4rem rgba(7, 108, 224, 0.1);
}

.main-form-2 .item .textarea textarea::-webkit-input-placeholder {
  color: #808080;
}

.main-form-2 .item .textarea textarea:-moz-placeholder {
  color: #808080;
}

.main-form-2 .item .textarea textarea::-moz-placeholder {
  color: #808080;
}

.main-form-2 .item .textarea textarea:-ms-input-placeholder {
  color: #808080;
}

.main-form-2 .list-2{
  padding-left: 32rem;
  padding-right: 32rem;
  padding-top: 15rem;
  padding-bottom: 25rem;
}

.main-form-2 .item-2{
  position: relative;
  height: 96rem;
}

.main-form-2 .item-2 .label{
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 32rem;
  padding-right: 32rem;
  font-size: 28rem;
  color: #383838;
  line-height: 96rem;
  pointer-events: none;
}

.main-form-2 .item-2 .input input{
  display: block;
  padding-right: 32rem;
  padding-left: 204rem;
  width: 100%;
  height: 96rem;
  font-size: 28rem;
  color: #383838;
  line-height: 96rem;
  background: #FAFAFA;
  box-shadow: inset 0 0 0 2rem #A6A6A6;
  text-align: right;
}

.main-form-2 .item-2 .input input:focus{
  background-color: #FFFFFF;
  box-shadow: inset 0 0 0 2rem rgba(7, 108, 224, 0.8), 0 0 0 4rem rgba(7, 108, 224, 0.1);
}

.main-form-2 .item-2 .input input::-webkit-input-placeholder {
  color: #A6A6A6;
}

.main-form-2 .item-2 .input input:-moz-placeholder {
  color: #A6A6A6;
}

.main-form-2 .item-2 .input input::-moz-placeholder {
  color: #A6A6A6;
}

.main-form-2 .item-2 .input input:-ms-input-placeholder {
  color: #A6A6A6;
}

/* 底部菜单 */
.tabbar-wrap .wrap,
.tabbar-wrap .wrap a,
.tabbar-wrap .placeholder{
  height: 160rem;
  height: calc(160rem + constant(safe-area-inset-bottom));
  height: calc(160rem + env(safe-area-inset-bottom));
}

.tabbar-wrap .wrap{
  position: fixed;
  left: var(--main-span);
  bottom: 0;
  right: var(--main-span);
  z-index: 999;
}

.tabbar-wrap .wrap .icon-wrap img{
  width: 40rem;
}

.tabbar-wrap .wrap .icon-wrap.check{
  display: none;
}

.tabbar-wrap .wrap a.active .icon-wrap{
  display: none;
}

.tabbar-wrap .wrap a.active .icon-wrap.check{
  display: block;
}

.tabbar-wrap .wrap span{
  margin-top: 16rem;
  font-size: 24rem;
  color: #AAAAAA;
  line-height: 34rem;
}

.tabbar-wrap .wrap a.active span{
  color: var(--main-color-blue);
}

/* 公共按钮 */
.main-btn{
  height: 104rem;
  font-size: 32rem;
  color: #383838;
  line-height: 100rem;
  background-color: #FFFFFF !important;
  border: 2rem solid #A6A6A6;;
  border-radius: 20rem !important;
  cursor: pointer;
}

.main-btn.primary{
  color: #FFFFFF !important;
  background-color: var(--main-color-blue) !important;
  border-color: var(--main-color-blue);
  box-shadow: 0 6rem 12rem rgba(7, 108, 224, 0.2) !important;
}

.main-btn.gray{
  color: #999999;
  border-color: #dddddd;
}

/* 副导航 */
.navbar-container{
  position: sticky;
  left: 0;
  top: 0;
  z-index: 999;
}

.navbar-container .wrap{
  position: relative;
  height: 112rem;
}

.navbar-container .item{
  font-size: 28rem;
  color: #383838;
  line-height: 44rem;
  cursor: pointer;
}

.navbar-container .item.active{
  font-size: 32rem;
  color: #121212;
}

.navbar-container .line{
  position: absolute;
  bottom: 14rem;
  left: 0;
  margin-left: -30rem;
  width: 60rem;
  height: 8rem;
  background: var(--main-color-blue);
  border-radius: 4rem;
  transition: all 0.2s;
}

/* 订单列表 */
.order-container .swiper-slide {
  height: 1px;
  min-height: calc(100vh - 112rem - 160rem);
}

.order-container .swiper-slide-active {
  height: auto;
}

.order-container .list{
  padding-top: 6rem;
}

.order-container .card{
  padding-left: 30rem;
  padding-right: 30rem;
  padding-top: 30rem;
  padding-bottom: 40rem;
  /* min-height: 436rem; */
}

.order-container .card:nth-child(n+2){
  margin-top: 20rem;
}

.order-container .card .head .title{
  max-width: calc(100% - 100rem);
  font-size: 32rem;
  color: #121212;
  line-height: 44rem;
}

.order-container .card .head .status{
  font-size: 28rem;
  color: #808080;
  line-height: 40rem;
}

.order-container .card .head .status.color-red{
  color: var(--main-color-red);
}

.order-container .card .company{
  margin-top: 22rem;
  font-size: 28rem;
  color: #383838;
  line-height: 40rem;
}

.order-container .card .time{
  padding-left: 30rem;
  padding-right: 30rem;
  margin-top: 24rem;
  height: 68rem;
  font-size: 24rem;
  color: #383838;
  background: #FAFAFA;
}

.order-container .card .time .day span:nth-child(n+2){
  margin-left: 10rem;
}

.order-container .card .price{
  font-size: 28rem;
  color: #383838;
  line-height: 40rem;
}

.order-container .card .price span:nth-child(n+2){
  margin-left: 14rem;
}

.order-container .card .price span b{
  font-size: 36rem;
  font-weight: normal;
}

.order-container .card .btns .btn{
  margin-top: 22rem;
  padding-left: 30rem;
  padding-right: 30rem;
  min-width: 180rem;
  height: 72rem;
  font-size: 28rem;
  color: #808080;
  border: 2rem solid #D4D4D4;
  cursor: pointer;
}

.order-container .card .btns .btn:nth-child(n+2){
  margin-left: 16rem;
}

.order-container .card .btns .btn.primary{
  color: #FFFFFF;
  background-color: var(--main-color-blue);
  border-color: var(--main-color-blue);
}

.order-container .card .btns .btn.pay-btn{
  padding-left: 0;
  padding-right: 0;
  min-width: 280rem;
}

.order-container .card .btns .btn span:nth-child(2){
  margin-left: 8rem;
}

/* 找回密码部分文字 */

.setText{
  font-size: 32rem;
  color: #333333;
  line-height: 44rem;
}

.setText a{
  color: #333333;
}

/* 协议 */
.agreement-container .content{
  font-size: 28rem;
  color: #444444;
  line-height: 44rem;
}

/* 数据加载完提示 */
.loadingEnd{
  padding-top: 40rem;
  padding-bottom: 40rem;
  font-size: 24rem;
  color: #999999;
  text-align: center;
}
 
/* 小于750并且横屏模式 */
@media screen and (max-width: 750px) and (orientation: landscape){
  :root{
    --main-span: 0;
  }
}

@media   
  only screen and (-webkit-min-device-pixel-ratio: 2),   
  only screen and (min-device-pixel-ratio: 2),   
  only screen and (min-resolution: 192dpi),   
  only screen and (min-resolution: 2dppx) {  
  /* 在这里编写针对高分辨率屏幕的CSS样式 */  
  .x1-img{
    display: none;
  }

  .x2-img{
    display: block;
  }
}

@media   
  only screen and (-webkit-min-device-pixel-ratio: 3),   
  only screen and (min-device-pixel-ratio: 3) {  
  /* 在这里编写针对更高分辨率（如3倍Retina）屏幕的CSS样式 */ 
  .x1-img{
    display: none;
  }

  .x2-img{
    display: block;
  }

  .x3-img{
    display: none;
  }
}