/* pages/UK/UK.wxss */
.page-header image{
  display: block;
  width: 100%;
  height: 500rpx;
}
.hot-apartment{
  padding: 56rpx 0 80rpx;

}
.hot-apartment .title{
  padding: 0 40rpx 32rpx;
  font-size: 38rpx;
  color: #333; 
  font-weight: 600;
}
.city-list{
  padding: 0 20rpx 0 40rpx;
  display: flex;
  flex-wrap: wrap;
}
.city-list .item{
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  display: inline-flex;
}
.city-list .item:last-child{
  margin-right: 0;
}
.city-list .item .text{
  display: inline-flex;
  align-items: center;
  background: #f2f2f2;
  color: #666;
  padding: 0 20rpx;
  line-height: 72rpx;
  height: 72rpx;
  border-radius: 10rpx;
}
.city-list .item.active .text{
  color: #fff;
  background: #77cbc1;
}

.city-list .item .text .you{
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex:0 0 16px;
  margin-left: 4px;
}
.card-container{
  padding:20rpx 0 0 40rpx;
}
.indicator-dots{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  margin: 40rpx auto 44rpx;

}
.indicator-dots .item{
  display: inline-flex;
  border:1px solid #ccc;
  border-radius: 50%;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-right: 2px;
}
.indicator-dots .item.active{
  background: #77cbc1;
  border-color: #77cbc1
}
.card-container .btn .text{
  display: flex;
  align-items: center;
  justify-content: center;
  border:1px solid #77cbc1;
  color: #77cbc1;
  font-size: 26rpx;
  width: 400rpx;
  height: 72rpx;
  border-radius: 36rpx;
  margin: 0 auto;
}
.card-container .btn image{
  display: inline-flex;
  flex:0 0 12px;
  width: 12px;
  height: 12px;
  margin-left: 4px;
}
.hover{
  background: transparent
}
.uk-strategy{
  border-top: 10px solid #f2f2f2;
  padding: 60rpx 0 40rpx;
}
.uk-strategy .title{
  padding: 0 40rpx 40rpx;
  font-size: 38rpx;
  color: #333; 
  font-weight: 600;
}
.uk-strategy .list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 40rpx 0;
}
.uk-strategy .item{
  display: inline-flex;
  width: calc(50%  - 10rpx);
  height: 280rpx;
  border-radius: 20rpx;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  color: #000
}
/* app,card,job,luggage,strategy,ticket */
.uk-strategy .item.luggage{
  background: #fef7da;
}
.uk-strategy .item .icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
  height: 100rpx;
}
.uk-strategy .item.luggage .icon image{
  width: 65.6rpx;
  height: 100rpx;
}
.uk-strategy .item.housetype{
  background: #e5faf5;
}
.uk-strategy .item.housetype .icon image{
  width: 103rpx;
  height: 96rpx;
}
.uk-strategy .item.ticket{
  background: #eef1f6;
}
.uk-strategy .item.ticket .icon image{
  width: 95.7rpx;
  height: 84rpx;
}
.uk-strategy .item.card{
  background: #faeceb;
}
.uk-strategy .item.card .icon image{
  width: 100rpx;
  height: 100rpx;
}
.uk-strategy .item.job{
  background: #fff4e2;
}
.uk-strategy .item.job .icon image{
  width: 94rpx;
  height: 72rpx;
}
.uk-strategy .item.app{
  background: #f0eff5;
}
.uk-strategy .item.app .icon image{
  width: 64.5rpx;
  height: 98rpx;
}
.uk-strategy .item .order{
  position: absolute;
  left: -16rpx;
  top: -16rpx;
  transform: rotateZ(-40deg);
  border-bottom: 1px solid #e4e4e4;
  width: 80rpx;
  height: 80rpx;
  color: #ccc;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  transform-origin: center;
  font-size: 28rpx;
}
.uk-strategy .item .order .text{
  transform: rotateZ(40deg);
  position: absolute;
  left: 40rpx;
  top: 34rpx;
}

.about-belloliving{
  border-top: 10px solid #f2f2f2;
  padding: 60rpx 40rpx 60rpx;
}
.about-belloliving .title{
  padding: 0 0rpx 32rpx;
  font-size: 38rpx;
  color: #333; 
  font-weight: 600;
}
.about-belloliving .list{
  background: #f9f9f9;
  border-radius: 20rpx;
  padding: 16rpx 40rpx;

}
.about-belloliving .list .item{
  display: flex;
  align-items: center;
  padding: 44rpx 0rpx 44rpx 16rpx;
  border-bottom: 1px solid #e4e4e4;
}
.about-belloliving .list .item:last-child{
  border-bottom: none;
}
.about-belloliving .list .item image{
  
  width: 60rpx;
  height: 60rpx;
}
.about-belloliving .list .text{
  color: #666;
  display: inline-flex;
  word-break: break-all;
  font-size: 26rpx;
  line-height: 1.6

}
.about-belloliving .list .sub{
  display: inline-flex;
  width: 120rpx;
  flex:0 0 120rpx;
  margin-right: 60rpx;
  color: #77cbc1;
  flex-direction: column;
  position: relative;
  align-items: center;
}
.about-belloliving .list .icon{
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}
.about-belloliving .list .year{
  padding-left: 0;
}
.about-belloliving .list .year .sub{
    flex: 0 0 160rpx;
    width: 160rpx;
    margin-right: 36rpx;
}
.about-belloliving .list .year .sub image{
  width: 160rpx;
  height: 160rpx;
}
.about-belloliving .list .year .sub .name{
  position: absolute;
  left: 0;
  top: -10rpx;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}
.about-belloliving .list .year .sub .name .num{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  margin-right: 4rpx;
}
.contact{
  margin-top: 40rpx;
  background: #f9f9f9;
  border-radius: 20rpx;
  padding: 64rpx 0 56rpx;
}
.contact .name{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
.contact .name::before,.contact .name::after{
  display: inline-flex;
  content: "";
  width: 48rpx;
  flex: 0 0 48rpx;
  height: 1px;
  background: #ccc;
  margin: 0 20rpx;
}
.contact .belloliving-wechat{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40rpx 0 10rpx;
  font-size: 30rpx;
  color: #333;
}
.contact .belloliving-wechat .num{
  display: inline-flex;
  color: #77cbc1;
  background: #ebebeb;
  border-radius: 6rpx;
  padding: 0 28rpx;
  height: 48rpx;
  line-height: 46rpx;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;

}
.contact .button{
  border:1px solid #e4e4e4;
  background: transparent;
  border-radius:36rpx;
  height: 72rpx;
  box-sizing: border-box;
  width: 310rpx;
  font-size: 26rpx;
  margin: 40rpx auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact .button image{
  width: 44rpx;
  height: 36rpx;
  margin-right: 14rpx;
}
.contact .tips{
  text-align: center;

}
.contact .tips .text{
  color: #77cbc1;
  font-weight: bold;
  display: inline
}