/* customer/pages/brokerindex/brokerindex.wxss */
.brokerIndex {
    width: 100%;
    min-height: 100vh;
    height: auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 150rpx;
    padding-top: 67vh;
}

.bgColors {
    background-color: #FFBE89;
}

.bg-image {
    position: absolute;
    z-index: 0;
    top: -100rpx;
    left: 0rpx;
    width: 100%;
}

.lc-style {
    width: 92%;
    box-sizing: border-box;
    padding: 70rpx 20rpx 40rpx;
    background-color: #fff;
    margin: 560rpx auto 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20rpx;
    position: relative;
}

.msgadd {
    width: 92%;
    margin: auto;
    box-sizing: border-box;
    padding: 70rpx 20rpx 50rpx;
    background-color: #fff;
    position: relative;
    border-radius: 20rpx;

}

.headerFixed {
    position: absolute;
    width: 340rpx;
    left: 50%;
    transform: translateX(-50%);
    top: -30rpx;
}

.headerFixed>image {
    width: 100%;
}

.headerTitle {
    position: absolute;
    color: #fff;
    display: flex;
    align-items: center;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}

.hCircle {
    width: 5rpx;
    height: 5rpx;
    border-radius: 50%;
    background-color: #fff;
}

.hName {
    margin: 0rpx 20rpx;
    white-space: nowrap;
    font-size: 36rpx;
    font-weight: 700;
}

.msgxminput,
.msgxminput1 {
    width: 100%;
    height: 88rpx;
    background-color: #F2F2F2;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0rpx 20rpx;
    border-radius: 10rpx;
    position: relative;
}

.requiredRed {
    position: absolute;
    left: 25rpx;
    top: 20rpx;
    color: red;
}

.msgxminput>image {
    width: 40rpx;
}

.msgxminput1>image {
    width: 35rpx;
}

.msgxminput>input {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    padding: 0rpx 20rpx;
}

.msgxminput1>input {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    padding: 0rpx 20rpx;
}

.lc-box {
    display: flex;
    align-items: center;
}

.lc-box-2>image {
    width: 80rpx;
    margin: 0rpx 40rpx;
}

.lc-box-1>image {
    width: 100rpx;
}

.lc-box-msg {
    display: flex;
    align-items: center;
}

.lc-box-msg-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
}

.relativeText1 {
    position: relative;
    left: -16rpx;
}

.relativeText2 {
    position: relative;
    right: -16rpx;
}

.lc-box-msg-2 {
    width: 80rpx;
    margin: 0rpx 35rpx;
}

.mt20 {
    margin-top: 20rpx;
}

input {
    font-size: 28rpx;
}

input::placeholder {
    color: #999999;
}

.msgxminput2>image {
    width: 45rpx;
}

.msgConfirmBtn {
    background-color: #FF5F3D;
    width: 100%;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
    margin-top: 40rpx;
    border-radius: 10rpx;
}

.customer_pm {
    width: 92%;
    padding: 70rpx 20rpx 50rpx;
    margin: 100rpx auto 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    position: relative;
    height: auto;
}

.pm_item_box {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #f2f2f2;
}

.pm_num {
    width: 80rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
}

.pm_num>image {
    width: 40rpx;
}

.pm_avatar {
    width: 70rpx;
    height: 70rpx;
    position: relative;
    margin-right: 30rpx;
}

.pm_avatar>image {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    overflow: hidden;
}

.pm_type {
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    background-color: #FF5F3D;
    border-radius: 50%;
    font-size: 24rpx;
    color: #fff;
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    text-align: center;
    line-height: 40rpx;
}

.pm_msg {
    width: 460rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28rpx;
    color: #333333;
}

.tabBar {
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    width: 100%;
    height: 130rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0rpx -10rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);
}

.tabItem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
    position: relative;
}

.tabItem>image {
    width: 44rpx;
}

.tabItem1>image {
    width: 35rpx;
}

.tabItem2>image {
    width: 40rpx;
    margin-top: 2rpx;
    margin-bottom: 1rpx;
}

.activePage {
    color: #FF5F3D;
    font-size: 28rpx;
    margin-top: 6rpx;
}

.defaultStyle {
    color: #D1D1D1;
    font-size: 28rpx;
    margin-top: 6rpx;
}

.swiperBoxFixed {
    width: 550rpx;
    height: 70rpx;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50rpx;
    position: absolute;
    top: 50rpx;
    left: 20rpx;
    overflow: hidden;
}

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

.swiper-item-msg {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    padding: 0rpx 20rpx;
    color: #fff;
}

.swiper-item-msg>image {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.redCircle {
    width: 20rpx;
    height: 20rpx;
    position: absolute;
    background-color: red;
    top: 0rpx;
    border-radius: 50%;
    left: 55%;
}