/*20210311sun制作*/
.ui-pc.ui-pc-small * {
    /*margin: 0;
    padding: 0;
    border: 0;*/
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
}
/*.ui-pc.ui-pc-small a {
    color: inherit;
    font-size: inherit;
}
.ui-pc.ui-pc-small a:hover {
    color: inherit;
    opacity: 1 !important;
}*/

::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}


/*顶部左侧*/

.datacard {
    height: 558px;
    position: absolute;
    top: 80px;
    left: 44px;
    pointer-events: none;
    z-index: 101
}

.datacard.folded .datacard-bar .datacard-text .datacard-text-arrow {
    height: 48px
}

.datacard.folded .datacard-bar .datacard-text .datacard-text-arrow:after {
    -webkit-transform: translateZ(0) rotate(180deg);
    transform: translateZ(0) rotate(180deg)
}

.datacard.folded .datacard-modal {
    pointer-events: none !important;
    opacity: 0 !important;
}

.datacard .more_btn {
    float: right;
    color: #e0e0e0;
    font-size: 14px;
}

.datacard .datacard-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    text-align: left;
    white-space: nowrap
}

.datacard .datacard-bar .datacard-text {
    position: relative;
    min-width: 268px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 48px;
    height: 48px;
    max-height: 48px;
    display: inline-block;
    pointer-events: auto;
    border-radius: 4px;
    background: rgba(0, 0, 0, .5);
    text-align: center
}

.datacard .datacard-bar .datacard-text.disabled span {
    padding-right: 0
}

.datacard .datacard-bar .datacard-text.disabled .datacard-text-arrow {
    display: none
}

.datacard .datacard-bar .datacard-text span {
    display: inline-block;
    max-width: 350px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    text-align: center
}

.datacard .datacard-bar .datacard-text .datacard-text-arrow {
    width: 14px;
    height: 48px;
    margin-left: -14px;
    display: inline-block;
    vertical-align: top;
    pointer-events: none;
    position: relative;
    visibility: visible
}

.datacard .datacard-bar .datacard-text .datacard-text-arrow:after {
    content: "";
    display: block;
    width: 12px;
    height: 6px;
    border-radius: 12px;
    background-image: url(image/arrow-up.v6.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -3px 0 0 0;
    -webkit-transition: background-color .1s ease, -webkit-transform .3s ease;
    transition: background-color .1s ease, -webkit-transform .3s ease;
    transition: background-color .1s ease, transform .3s ease;
    transition: background-color .1s ease, transform .3s ease, -webkit-transform .3s ease;
    -webkit-transform: translateZ(0) rotate(0deg);
    transform: translateZ(0) rotate(0deg)
}
.datacard-zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    pointer-events: none;
}
.datacard-zoom.datacard-zoom-show {
    background-color: rgb(0 0 0 / 85%);
    pointer-events: auto;
}
.datacard .datacard-bar .datacard-modal {
    min-height: 460px;
    position: relative;
    top: 15px;
    padding: 20px 0;
    z-index: 99;
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    border-radius: 4px;
    background-color: rgba(111, 111, 111, 0.5);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out;
    transition: opacity .3s ease-out, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, opacity .3s ease-out;
    transition: transform .3s ease-out, opacity .3s ease-out, -webkit-transform .3s ease-out
}

.datacard .datacard-bar .datacard-modal .stage {
    position: relative;
    left: 0;
    height: 420px;
    margin-left: 20px
}

.datacard .datacard-bar .datacard-modal .stage .piece {
    display: inline-block;
    width: 378px;
    height: 420px;
    margin-right: 20px;
    border-radius: 4px;
    overflow: hidden;
    -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .5);
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .5)
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 {
    position: relative;
    padding-bottom: 24px;
    background-color: rgb(70 68 66);
    color: #fff;
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-title {
    position: absolute;
    width: 100%;
    height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 30px
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-title .datacard-name {
    width: 100%;
    font-size: 18px;
    line-height: 80px;
    white-space: nowrap;
    text-overflow: ellipsis;
    letter-spacing: 0;
    overflow: hidden;
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-title .datacard-name span {
    position: relative
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-title .datacard-name span:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 1.5px;
    width: 72px;
    background-color: #fff;
    pointer-events: none
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-title .datacard-view-count {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: right;
    -ms-flex-item-align: center;
    align-self: center;
    letter-spacing: 0;
    font-size: 12px;
    white-space: nowrap;
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-title .datacard-view-count .view-count-main {
    text-align: center;
    float: right
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-title .datacard-view-count .view-count-main .view-count {
    display: block;
    margin-right: 0;
    line-height: 18px
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info {
    height: 100%;
    padding: 80px 30px 0;
    overflow-y: hidden
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label {
    width: 48.5%;
    float: left;
    margin: 11px 0 15px;
    overflow: hidden;
    position: relative
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label:nth-child(odd):not(.datacard-label-block) {
    margin-right: 4px
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label.datacard-label-block-four .label-item-right {
    height: auto !important
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label.datacard-label-block-four .label-item-right .label-item-right-bottom {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
    line-height: 16px !important;
    white-space: normal
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label.datacard-label-block {
    width: 100%
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label.datacard-label-block .label-item-right .label-item-right-bottom {
    max-width: 100%;
    text-overflow: ellipsis
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left {
    position: absolute;
    left: 0;
    top: 0
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon {
    width: 18px;
    height: 18px;
    background-size: 18px 18px !important
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-price {
    background: url(image/price.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-house_model {
    background: url(image/house_model.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-unit_price {
    background: url(image/unit_price.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-area {
    background: url(image/area.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-se_ctime {
    background: url(image/se_ctime.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-orientation {
    background: url(image/orientation.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-building_finish_year {
    background: url(image/building_finish_year.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-building_type {
    background: url(image/building_type.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-city_name {
    background: url(image/city_name.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-floor_state {
    background: url(image/floor_state.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-furniture {
    background: url(image/furniture.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-type {
    background: url(image/type.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-nation_name {
    background: url(image/nation_name.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-features {
    background: url(image/features.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-description {
    background: url(image/description.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-industry {
    background: url(image/industry.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-near_street {
    background: url(image/near_street.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-parking_lot {
    background: url(image/parking_lot.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-registered_company {
    background: url(image/registered_company.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-left.label-icon-work_station {
    background: url(image/work_station.v6.svg) no-repeat
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-right {
    height: 38px;
    margin-left: 32px;
    text-align: left;
    font-family: "PingFang SC", "Microsoft YaHei", SimHei, "STHeiti Light", arial, tahoma, verdana, sans-serif, 宋体;
    letter-spacing: 0.5px;
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-right .label-item-right-top {
    display: block;
    height: 18px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-bottom: 4px;
    font-size: 12.5px;
    color: #868686;
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-right .label-item-right-bottom {
    width: 100%;
    padding-right: 0;
    display: block;
    height: 16px;
    font-size: 14.5px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-left: 0;
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-info .datacard-label .label-item-right .label-item-right-bottom.label-item-right-bottom-red {
    color: #fe615a
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-modal-stamp {
    position: absolute;
    top: unset;
    bottom: 25px;
    right: 25px;
    width: 80px;
    height: 80px
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-modal-stamp.sold {
    background: url(image/sold.883e9ccc35b2ab6c6acf.png) no-repeat;
    background-size: 80px 80px
}

.datacard .datacard-bar .datacard-modal .stage .pie-1 .datacard-modal-stamp.off {
    background: url(image/off.c82ff59fba91a6863938.png) no-repeat;
    background-size: 80px 80px
}

.datacard .datacard-bar .datacard-modal .stage .pie-2 {
    overflow: hidden
}

.datacard .datacard-bar .datacard-modal .stage .pie-2 .datacard-map {
    position: relative;
    height: 100%;
}

.datacard .datacard-bar .datacard-modal .stage .pie-2 .datacard-map:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    background-position: 50%;
    background: url(image/current-center.v6.svg) no-repeat;
    background-size: 30px 30px;
    pointer-events: none
}

.datacard .datacard-bar .datacard-modal .stage .pie-2 .datacard-map .js-baidumap {
    display: block;
    height: 100%;
}

.datacard .datacard-bar .datacard-modal .stage .pie-2 .datacard-map .js-baidumap:after {
    content: "\67E5\770B\5C0F\533A\53CA\5468\8FB9";
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 120px;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    border-radius: 2px;
    font-size: 13px;
    background: url(image/blowup.v6.svg) no-repeat;
    background-size: 120px 30px;
    filter: opacity(0.7);
    /*filter: invert(30%);*/
}
.datacard .datacard-bar .datacard-modal .stage .pie-2 .datacard-map:hover .js-baidumap:after {
    filter: opacity(1);
}

.datacard .datacard-bar .datacard-modal .stage .pie-2 .datacard-map img {
    -o-object-fit: cover;
    object-fit: cover;
    height: 130%;
    width: 130%;
    display: block;
    border: none;
    margin: 0 auto;
    border-radius: 2px;
    /*filter: invert(100%) hue-rotate(140deg);*/
    filter: invert(90%) brightness(180%) hue-rotate(175deg);
    position: relative;
    left: -15%;
    top: -14.5%;
}

.datacard .datacard-bar .datacard-modal .stage .pie-2 .datacard-map .datacard-map-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 420px;
    border: none;
    border-radius: 2px;
    pointer-events: none;
    background: rgba(0, 0, 0, .1)
}

.datacard .datacard-bar .datacard-modal .stage .pie-2 .datacard-map .datacard-map-mask:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    background: url(image/current-around.v6.svg) no-repeat;
    background-size: 40px 40px;
    pointer-events: none;
    -webkit-animation: breathing 2.5s linear infinite;
    animation: breathing 2.5s linear infinite
}

@-webkit-keyframes breathing {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    13% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        opacity: .9
    }

    25% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .8
    }

    38% {
        -webkit-transform: scale(.85);
        transform: scale(.85);
        opacity: .7
    }

    50% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .6
    }

    63% {
        -webkit-transform: scale(.85);
        transform: scale(.85);
        opacity: .7
    }

    75% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .8
    }

    88% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        opacity: .9
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes breathing {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    13% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        opacity: .9
    }

    25% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .8
    }

    38% {
        -webkit-transform: scale(.85);
        transform: scale(.85);
        opacity: .7
    }

    50% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .6
    }

    63% {
        -webkit-transform: scale(.85);
        transform: scale(.85);
        opacity: .7
    }

    75% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .8
    }

    88% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        opacity: .9
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images {
    width: 100%;
    height: 420px;
    position: relative;
    text-align: left;
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-big {
    width: 100%;
    height: 285px
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-big.images-onlyone {
    width: 100%;
    height: 420px
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-big img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-small {
    position: relative;
    width: 100%;
    height: 135px
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-small .datacard-images-small-1 {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-size: 50% 100%
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-small .datacard-images-small-1 img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-small .datacard-images-small-2 {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-size: 50% 100%
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-small .datacard-images-small-2 img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-small .datacard-images-more {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 49%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    pointer-events: none;
    border-radius: 4px;
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-small .datacard-images-more .more-count {
    display: block;
    margin-top: 50px;
    font-size: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-small .datacard-images-more .more-text {
    display: block;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0
}

.datacard .datacard-bar .datacard-modal .stage .pie-3 .datacard-images .datacard-images-small .datacard-images-more .more-text.no-more-text {
    margin-top: 65px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.ui-pc.ui-pc-small .datacard .datacard-bar {
    /*-webkit-transform: scale(.85);
    transform: scale(.85);
    -webkit-transform-origin: left top;
    transform-origin: left top*/
    zoom: .85;
}



/*顶部右侧*/

.minimap {
    position: absolute;
    top: 80px;
    right: 55px;
    width: 153px;
    background: rgba(0, 0, 0, .2);
    border-radius: 14px;
    z-index: 100;
    color:#fff;
}

.minimap.not-house {
    top: 10px;
}

.minimap.not-house .viewport-floorplan-control-button {
    height: 24px;
}

.minimap.simplify .minimap-label {
    display: none
}

.minimap .minimap-label {
    display: none;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    margin: 0 22px;
    text-align: center;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    border-radius: 0 20px 0 20px
}

.minimap-main {
    position: relative;
    height: auto;
    width: 153px
}

.minimap-main .minimap-map {
    width: 153px;
    height: 153px;
    position: relative;
}

.minimap .minimap-main .minimap-map .minimap-map-image {
    position: absolute;
    width: 143px;
    height: 143px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/*.minimap-main .minimap-map .minimap-map-image img {
    border: none;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none
}*/

.minimap-main .minimap-map .minimap-map-image .minimap-map-image-audio {
    position: absolute;
    width: 0;
    height: 0;
    -webkit-transition: top 1s linear, left 1s linear;
    transition: top 1s linear, left 1s linear
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-image-audio .minimap-map-image-audio-avatar {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-left: -9px;
    margin-top: -9px;
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    overflow: hidden
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-image-audio .minimap-map-image-audio-avatar img {
    width: 100%;
    border: none
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-image-camera {
    position: absolute;
    width: 49px;
    height: 49px;
    pointer-events: none;
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-image-camera:hover .minimap-camera,
.minimap-main .minimap-map .minimap-map-image .minimap-map-image-camera:hover .minimap-camera-focus {
    z-index: 10;
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-image-camera .minimap-camera {
    width: 12px;
    height: 12px;
    background-color: rgb(18 255 251);
    border: 2px solid #fff;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    margin: auto;
    pointer-events: auto;
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-image-camera .minimap-camera-focus {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    right: 0;
    border-radius: 50%;
    margin: auto;
    pointer-events: auto;
    cursor: default;
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-image-camera .minimap-camera-drag {
    position: absolute;
    display: block;
    width: 49px;
    height: 43px;
    background: url(image/camera.v6.svg);
    background-size: contain;
    background-repeat: no-repeat;
    top: -10.5px;
    transform-origin: 24.5px 35.5px;
    pointer-events: none;
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-svg {
    position: absolute;
    top: 0;
    overflow: unset;
    pointer-events: none;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-svg .minimap-map-polyline {
    pointer-events: auto;
    cursor: pointer
}

.minimap-main .minimap-map .minimap-map-image .minimap-map-svg .minimap-map-polyline:hover {
    fill: url(#minimapsvg-hover)
}

.ui-pc.ui-pc-small .minimap {
}

.viewport-floorplan .minimap, .viewport-vr .minimap {
    display: none
}

.lite-page .minimap .minimap-label {
    width: 74px;
    margin: 0 53px
}

.nav-groups {
    display: flex;
    width: 100%;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    overflow: hidden;
}

.nav-groups .viewport-floorplan-control-button {
    flex: 1;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    background-color: rgb(0 0 0 / 15%);
}

.nav-groups .viewport-floorplan-control-button i {
    display: inline-block;
    vertical-align: top;
    height: 34px;
    width: 34px;
    background-repeat: no-repeat;
    background-position: 50%;
}

.nav-groups .viewport-floorplan-control-button.with-floorplan i {
    background-image: url(image/control-icon-floorplan.v6.svg);
    background-size: 25px 20px;
}

.nav-groups .viewport-floorplan-control-button.with-minimap i {
    background-image: url(image/control-icon-minimap.v6.svg);
    background-size: 22px 19px;
}

/*顶部左侧*/
.app-front .top-logo.logo-pc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 72px;
    left: 44px;
    top: 20px;
    width: auto;
    position: absolute;
    z-index: 101;
    height: 40px;
}

.app-front .top-logo.logo-pc .logo-content {
    display: block;
    max-height: 36px;
}

/*底部左侧*/
.app-front .logo {
    position: absolute;
    left: 0;
    bottom: 11px;
    z-index: 101;
}

.app-front .logo .logo-content {
    display: block;
    height: 30px
}

.app-front .logo .logo-content.logo-lite {
    height: 30px !important
}

.app-front .logo.logo-pc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 72px;
    left: 44px;
    bottom: 20px;
    opacity: .9;
    width: auto;
}

.app-front .logo.logo-pc .logo-content {
    display: block;
    height: 26px;
    cursor: pointer
}

.app-front .logo.logo-pc .statementpc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 72px;
    margin-left: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    color: hsla(0, 0%, 100%, .6)
}

.app-front .logo.logo-pc .statementpc .logo-content {
    margin-left: 10px;
    opacity: 0.7;
    height: 25px;
    top: -1px;
    position: relative;
}

.app-front .logo.logo-pc .statementpc a {
    margin-left: 9px;
    white-space: nowrap
}

.app-front .logo.logo-pc .statementpc:before {
    content: "";
    display: block;
    width: 1px;
    height: 26px;
    background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0)), color-stop(50%, hsla(0, 0%, 100%, .7)), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .7) 50%, hsla(0, 0%, 100%, 0))
}

.app-front .logo {
    bottom: 110px
}

/*权责声明*/

.b-right-btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 72px;
    right: 44px;
    bottom: 20px;
    opacity: .9;
    width: auto;
    position: absolute;
}


.information {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 999
}

.information .information-mask {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(0, 0, 0, .4);
    pointer-events: auto
}

.information .information-modal {
    position: absolute;
    width: 490px;
    margin-left: -245px;
    left: 50%;
    top: 50px;
    bottom: 47px;
    padding: 35px;
    background: rgba(0, 0, 0, .7);
    border-radius: 2px;
    pointer-events: auto
}

.information .information-modal .close {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 26px;
    height: 26px;
    opacity: .6;
    z-index: 1
}

.information .information-modal .close:after, .information .information-modal .close:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 19px;
    background: #fff
}

.information .information-modal .close:before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.information .information-modal .close:after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg)
}

.information .information-modal .information-modal-title {
    font-size: 20px;
    line-height: 20px;
    font-weight: 700
}

.information .information-modal .information-modal-desc {
    font-size: 12px;
    line-height: 17px;
    margin-top: 5px;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scale(.83);
    transform: scale(.83);
    letter-spacing: 1.5px;
    font-weight: lighter;
    background-size: 96px 18px;
    background-position: 0;
    background-repeat: no-repeat
}

.information .information-modal .information-modal-content {
    position: absolute;
    top: 90px;
    left: 35px;
    right: 25px;
    bottom: 35px;
    overflow: hidden;
    margin-right: -14px;
    overflow: scroll;
}

.information .information-modal .information-modal-content .information-modal-content-scroller {
    padding-right: 14px
}

.information .information-modal .information-modal-content .iScrollVerticalScrollbar {
    width: 2px !important
}

.information .information-modal .information-modal-content .iScrollVerticalScrollbar .iScrollIndicator {
    background: hsla(0, 0%, 100%, .15) !important;
    border: none !important;
    right: 0
}

.information .information-modal .information-modal-content .information-modal-content-top-fix {
    width: 100%;
    height: 1px
}

.compact .information .information-modal {
    width: 334px;
    margin-left: -167px;
    top: 68px;
    bottom: 100px;
    padding: 30px
}

.information .information-production .information-production-logo {
    width: 109px;
    height: 62px;
    background-size: 109px 62px;
    float: left
}

.information .information-production .information-production-text {
    font-size: 14px;
    line-height: 22px;
    margin: 10px 0 0 128px
}

.information .information-production .information-production-link {
    position: absolute;
    left: 0;
    top: 55px;
    display: block;
    text-align: center;
    margin-top: 35px;
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap
}

.information .information-production .information-production-link span {
    display: inline-block;
    vertical-align: middle
}

.information .information-production .information-production-link i {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat
}

.information .information-disclaimer h2 {
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    margin: 5px 0 15px
}

.information .information-disclaimer p {
    margin: 0 0 10px 20px;
    position: relative;
    font-size: 14px;
    line-height: 22px
}

.information .information-disclaimer p i {
    position: absolute;
    left: -20px;
    font-style: normal
}

.ui-pc .information .information-modal {
    width: 672px;
    height: 388px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: rgba(0, 0, 0, .8)
}

.ui-pc .information .information-modal .information-modal-content {
    right: 35px;
    top: 86px;
    margin-right: 0
}

.ui-pc .information .information-modal .information-modal-content .information-modal-content-scroller {
    padding-right: 0
}

.ui-pc .information .information-modal .information-modal-content .information-modal-content-scroller .information-production-logo {
    margin: 5px auto 15px;
    float: unset
}

.ui-pc .information .information-modal .information-modal-content .information-modal-content-scroller .information-production-text {
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 0.5px;
    margin: 0 10px
}

.ui-pc .information .information-modal .information-modal-content .information-modal-content-scroller .information-production-link {
    position: relative;
    left: 50%;
    top: unset;
    margin-top: 40px;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.ui-pc .information .information-disclaimer p {
    line-height: 25px;
    letter-spacing: 0.5px
}

.information .information-modal.information-production.js-production.information-new {
    padding: 20px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 1119px 780px;
    width: 490px;
    height: 285px;
    margin-left: 0;
    left: auto;
    top: auto;
    bottom: auto
}

.information .js-production.information-new .close {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    opacity: .4;
    z-index: 1
}

.information .js-production.information-new .close:after, .information .js-production.information-new .close:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 19px;
    background: #fff
}

.information .js-production.information-new .close:before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.information .js-production.information-new .close:after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg)
}

.information .js-production.information-new .information-production-header {
    position: relative;
    width: 242px;
    height: 111px;
    margin: 9px auto 0
}

.information .js-production.information-new .information-production-header .information-production-logo {
    position: relative;
    float: none;
    margin: 0 auto;
    width: 59px;
    height: 111px;
    background-size: 59px 111px
}

.information .js-production.information-new .information-production-header .information-production-titlebg {
    background-repeat: no-repeat;
    background-position: 66.36259977194983% 43.83561643835616%;
    background-size: 1119px 780px;
    width: 242px;
    height: 50px;
    position: relative;
    top: -50px;
    text-align: center;
    left: 5px
}

.information .js-production.information-new .information-production-header .information-production-titlebg .information-production-titlefont {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.5px;
    text-align: center;
    display: inline-block;
    vertical-align: middle
}

.information .js-production.information-new .information-production-header .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

.information .js-production.information-new .information-production-button {
    position: relative;
    border-radius: 27px;
    background-color: #254fab;
    display: block;
    margin: 9px auto 0;
    font-size: 14px;
    width: 145px;
    height: 32px;
    border: none;
    outline: none
}

.information .js-production.information-new .information-modal-content {
    position: absolute;
    margin: 0 auto;
    bottom: 20px;
    top: auto;
    left: 14px;
    right: 0;
    width: 348px;
    height: 44px
}

.information .js-production.information-new .information-modal-content .information-production-text {
    opacity: .81;
    font-size: 12px;
    line-height: 1.83;
    text-align: justify;
    color: #fff;
    margin: 0 auto;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.information .js-production.information-new .information-production-link {
    opacity: .9;
    font-size: 12px;
    line-height: 1.83;
    color: hsla(0, 0%, 100%, .5);
    bottom: 20px;
    right: 78px;
    left: auto;
    top: auto;
    margin: 0
}

.information .js-production.information-new .information-production-link i {
    margin-left: 5px;
    background-repeat: no-repeat;
    background-position: 51.75202156334232% 40.25974025974026%;
    background-size: 1119px 780px;
    width: 6px;
    height: 10px;
    opacity: .9;
    display: inline-block;
    vertical-align: middle
}

.ui-pc .information-modal.information-production.js-production.information-new {
    width: 672px;
    height: 388px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-size: 100% 100%
}

.ui-pc .information-modal.information-production.js-production.information-new .close {
    right: 20px;
    top: 20px
}

.ui-pc .information-modal.information-production.js-production.information-new .information-production-header {
    margin-top: 35px
}

.ui-pc .information-modal.information-production.js-production.information-new .information-production-button {
    margin: 9px auto 0
}

.ui-pc .information-modal.information-production.js-production.information-new .information-modal-content {
    margin: 0 auto;
    bottom: 50px;
    top: auto;
    width: 600px;
    left: 0
}

.ui-pc .information-modal.information-production.js-production.information-new .information-modal-content .information-modal-content-scroller {
    padding-right: 0;
    height: 44px
}

.ui-pc .information-modal.information-production.js-production.information-new .information-modal-content .information-modal-content-scroller .information-production-text {
    margin: 0 auto;
    opacity: .81;
    font-size: 14px;
    line-height: 1.83;
    text-align: justify;
    color: #fff;
    width: 400px
}

.ui-pc .information-modal.information-production.js-production.information-new .information-production-link {
    position: absolute;
    font-size: 14px;
    line-height: 1;
    bottom: 50px;
    right: 136px
}

.ui-pc .information-modal.information-production.js-production.information-new .information-production-link i {
    vertical-align: middle
}

/*底部中间*/

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation {
    position: relative;
    width: 126px;
    height: 72px;
    margin-left: 10px;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
    transition: opacity .3s ease, -webkit-transform .3s ease;
    transition: transform .3s ease, opacity .3s ease;
    transition: transform .3s ease, opacity .3s ease, -webkit-transform .3s ease;
    pointer-events: auto;
    cursor: pointer
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-bg-pc {
    position: absolute;
    top: -34px;
    left: 40px;
    width: 47px;
    height: 50px;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    background: url(image/ai-half-xiaobei.0761ce0bd01f02397b87.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
    opacity: 1;
    -webkit-transition: opacity 0s .26s;
    transition: opacity 0s .26s
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-bg-pc:before {
    left: 18px
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-bg-pc:after, .bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-bg-pc:before {
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    width: 1px;
    height: 3px;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    background: #0de4ff;
    -webkit-animation: ai-eye 2s infinite;
    animation: ai-eye 2s infinite
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-bg-pc:after {
    right: 19px
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-audio-btn-bg-pc {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    overflow: hidden
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-audio-btn-bg-pc:before {
    background-image: url(image/ai-water-line.1eb0bfc4d2e1280ba5d3.png);
    -webkit-animation: line-animation-iphone 2s steps(49) infinite alternate;
    animation: line-animation-iphone 2s steps(49) infinite alternate
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-audio-btn-bg-pc:after, .bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-audio-btn-bg-pc:before {
    content: "";
    display: block;
    width: 188px;
    height: 104px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(.67, .69);
    transform: translate3d(-50%, -50%, 0) scale(.67, .69);
    background-repeat: no-repeat;
    background-size: 188px 5200px
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-audio-btn-bg-pc:after {
    background-image: url(image/ai-water-face.b9072f1660c452805596.png);
    -webkit-animation: face-animation-iphone 2s steps(49) infinite alternate;
    animation: face-animation-iphone 2s steps(49) infinite alternate
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-audio-btn-group-pc {
    height: 72px;
    padding: 16px 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, .2);
    overflow: hidden
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-audio-btn-group-pc .ai-audio-btn-status-pc {
    display: block;
    height: 18px;
    margin: 0 0 8px 6px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background: no-repeat 50%/100% 100% url(image/play.a15dba44ffc4725fb8dc.svg)
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation .ai-audio-bar-pc .ai-audio-btn-group-pc .ai-audio-btn-label-pc {
    display: block;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation.playing .ai-audio-bar-pc {
    pointer-events: none;
    opacity: 0;
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation.playing .ai-audio-bar-pc .ai-bg-pc {
    opacity: 0;
    -webkit-transition: unset;
    transition: unset
}

.bottomtoolbar .bottomtoolbar-main .ai-audio-animation.hide .ai-audio-bar-pc {
    opacity: 0;
    pointer-events: none
}

.bottomtoolbar.huangxuan .ai-audio-btn-bg-pc, .bottomtoolbar.huangxuan .ai-bg-pc {
    display: none
}

.bottomtoolbar.huangxuan .ai-audio-btn-status-pc {
    position: absolute;
    z-index: 20;
    width: 100%;
    margin: 0 !important;
    top: 17px;
    left: 3px
}

.bottomtoolbar.huangxuan .ai-audio-btn-label-pc {
    position: absolute;
    z-index: 20;
    width: 100%;
    bottom: 15px
}

.bottomtoolbar.huangxuan .hx-bg {
    position: absolute;
    left: 50%;
    bottom: 40px;
    -webkit-transform: translateX(-50%) scale(1.34);
    transform: translateX(-50%) scale(1.34);
    z-index: 10;
    background-position: 0 0;
    width: 70px;
    height: 91.68px;
    background-size: 141px auto;
    background-repeat: no-repeat
}

.bottomtoolbar.huangxuan .hx-bg-back {
    -webkit-animation: hxentryback-sprites-animation 2.958333333333333s steps(71) 0s infinite normal;
    animation: hxentryback-sprites-animation 2.958333333333333s steps(71) 0s infinite normal;
    z-index: 0;
    bottom: 6px
}

.bottomtoolbar.huangxuan .hx-bg-back, .bottomtoolbar.huangxuan .hx-bg-front {
    width: 104px;
    height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background-size: 104px 8640px;
    background-repeat: no-repeat;
    right: 4px;
    top: auto;
    left: auto;
    -webkit-transform: scale(1.34);
    transform: scale(1.34)
}

.bottomtoolbar.huangxuan .hx-bg-front {
    -webkit-animation: hxentryfront-sprites-animation 2.958333333333333s steps(71) 0s infinite normal;
    animation: hxentryfront-sprites-animation 2.958333333333333s steps(71) 0s infinite normal;
    z-index: 20;
    bottom: 7px
}

.bottomtoolbar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    z-index: 103
}

.bottomtoolbar .bottomtoolbar-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 72px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: auto
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel {
    width: 475px;
    position: relative;
    height: 72px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .2);
    text-align: center;
    pointer-events: none
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    pointer-events: auto;
    height: 60px;
    width: calc(100% - 12px);
    line-height: 60px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .15)
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .content {
    width: 100%;
    height: 100%
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box {
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    margin: 5px 10px;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box.agent-active {
    cursor: pointer
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box i {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 0;
    right: 0;
    background-image: url(image/certificate-icon.v6.svg);
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 22;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border {
    position: absolute;
    top: 6%;
    left: 6%;
    width: 44px;
    height: 44px;
    overflow: visible;
    /*box-shadow: -1px 0px 3px 1px rgb(0 0 0 / 35%);*/
    transition: margin-left 0.3s ease-out, opacity 0.5s ease-out;
    z-index: 20;
}
.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border .avatar {
    border-radius: 50%;
    box-shadow: -1px 0px 3px 1px rgb(0 0 0);
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(2) {
    left: calc(6% - 38px);
    margin-left: 30px;
    z-index: 19;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(3) {
    left: calc(6% - (38px + (34px * 1)));
    /*margin-left: calc(38px + (34px * 1));*/
    margin-left: 57px;
    z-index: 18;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(4) {
    left: calc(6% - (38px + (34px * 2)));
    margin-left: calc(38px + (34px * 2));
    z-index: 17;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(5) {
    left: calc(6% - (38px + (34px * 3)));
    margin-left: calc(38px + (34px * 3));
    z-index: 16;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(6) {
    left: calc(6% - (38px + (34px * 4)));
    margin-left: calc(38px + (34px * 4));
    z-index: 15;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(7) {
    left: calc(6% - (38px + (34px * 5)));
    margin-left: calc(38px + (34px * 5));
    z-index: 14;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(8) {
    left: calc(6% - (38px + (34px * 6)));
    margin-left: calc(38px + (34px * 6));
    z-index: 13;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(9) {
    left: calc(6% - (38px + (34px * 7)));
    margin-left: calc(38px + (34px * 7));
    z-index: 12;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(10) {
    left: calc(6% - (38px + (34px * 8)));
    margin-left: calc(38px + (34px * 8));
    z-index: 11;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(11) {
    left: calc(6% - (38px + (34px * 9)));
    margin-left: calc(38px + (34px * 9));
    z-index: 10;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:nth-child(n+4) {
    opacity: 0;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box-panel:hover .avatar-box .avatar-border {
    margin-left: 0;
    opacity: 1;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box-panel:hover .avatar-box .avatar-border:hover {
    z-index: 21;
}

/*.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    -webkit-transition: background .3s ease;
    transition: background .3s ease
}*/

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border .avatar {
    width: 100%;
    vertical-align: baseline;
}

/*.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border + .avatar-border {
    z-index: -1;
    left: calc(50% - 5px);
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border + .avatar-border + .avatar-border {
    z-index: -2;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box-panel:hover .avatar-box .avatar-border + .avatar-border {
    left: calc(50% - 38px);
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box-panel:hover .avatar-box .avatar-border + .avatar-border + .avatar-border{
    left: calc(50% - 72px);
}*/

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .agent-info-box {
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 83px;
    height: 100%;
    text-align: left;
    white-space: nowrap
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .agent-info-box .agent-name {
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    max-width: 83px;
    overflow: hidden;
    text-overflow: ellipsis
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .agent-info-box .agent-title {
    font-size: 12px;
    line-height: 12px;
    color: hsla(0, 0%, 100%, .6);
    margin-top: 4px;
    max-width: 83px;
    overflow: hidden;
    text-overflow: ellipsis
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .agent-info-box.agent-active {
    cursor: pointer
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .entry-btn {
    height: 100%;
    float: right;
    opacity: 1
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .telephone-btn {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 92px;
    opacity: 0.7;
}
.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .telephone-btn:hover {
    opacity: 1
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .telephone-btn i {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    background: no-repeat 50% url(/skin/img/system/icon-zixun.svg);
    background-size: 75%
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .telephone-btn em {
    line-height: normal;
    letter-spacing: 0.5px;
    font-style: normal
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .telephone-btn.wide {
    margin-right: 30px
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn {
    position: relative;
    width: 85px;
    margin-right: 27px;
    opacity: .4 !important;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .realtime-span-btn, .bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn i {
    opacity: .7
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn:hover .toolbarpc-realtime-modal {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1)
}

/*.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn:hover .realtime-span-btn, .bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn:hover i {
    opacity: 1
}*/

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn i {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background: no-repeat url(image/people.v6.svg)
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .toolbarpc-realtime-modal {
    height: 154px;
    position: absolute;
    bottom: 56px;
    left: 40px;
    -webkit-transform-origin: center 90%;
    transform-origin: center 90%;
    -webkit-transform: translateZ(0) scale(0);
    transform: translateZ(0) scale(0);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.34, 1.21, .4, 1);
    transition: -webkit-transform .3s cubic-bezier(.34, 1.21, .4, 1);
    transition: transform .3s cubic-bezier(.34, 1.21, .4, 1);
    transition: transform .3s cubic-bezier(.34, 1.21, .4, 1), -webkit-transform .3s cubic-bezier(.34, 1.21, .4, 1)
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .toolbarpc-realtime-modal .toolbarpc-modal-main {
    height: 130px;
    white-space: nowrap;
    border-radius: 4px;
    background: rgba(0, 0, 0, .7)
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .toolbarpc-realtime-modal .toolbarpc-modal-main .arrow {
    display: block;
    width: 0;
    height: 0;
    border-color: rgba(0, 0, 0, .7) transparent transparent;
    border-style: solid;
    border-width: 12px 12px 0;
    position: absolute;
    bottom: 12px;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .toolbarpc-realtime-modal .toolbarpc-modal-main .toolbarpc-modal-right {
    display: inline-block;
    width: 226px;
    height: 100%
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .toolbarpc-realtime-modal .toolbarpc-modal-main .toolbarpc-modal-right .qr-code {
    float: left;
    width: 130px;
    height: 100%;
    padding: 12px
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .toolbarpc-realtime-modal .toolbarpc-modal-main .toolbarpc-modal-right .qr-code div {
    display: block;
    position: relative;
    width: 106px;
    height: 106px;
    background: #fff;
    padding: 6px
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .toolbarpc-realtime-modal .toolbarpc-modal-main .toolbarpc-modal-right .qr-code div:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: url(image/ke-logo.v6.svg) no-repeat;
    background-size: 20px 20px
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .toolbarpc-realtime-modal .toolbarpc-modal-main .toolbarpc-modal-right .qr-code-desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: justify;
    float: right;
    width: 96px;
    height: 100%;
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
    word-break: break-all;
    padding: 12px 12px 12px 0
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .realtime-btn .toolbarpc-realtime-modal .toolbarpc-modal-main .toolbarpc-modal-right .qr-code-desc .realtime-span:first-child {
    margin-bottom: 5px
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn {
    float: right;
    position: relative;
    width: 105px;
    height: 100%;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    background: rgba(0, 0, 0, .33);
    -webkit-transition: background .3s ease;
    transition: background .3s ease
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn:active {
    background: rgba(0, 0, 0, .5)
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn:active .audio-btn-group {
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    color: #ddd;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn .audio-btn-group {
    height: 60px;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn .audio-btn-label {
    display: inline-block;
    line-height: 60px;
    font-weight: 700;
    text-align: center
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn .audio-btn-status {
    display: inline-block;
    line-height: 100%;
    vertical-align: text-top;
    width: 25px;
    height: 22px;
    margin-left: 8px;
    background: no-repeat 50%/100% 100% url(image/play.v6.svg)
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn.disabled .audio-btn-status {
    opacity: 0.4;
}

.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn .gradient-line-border.left i:before {
    opacity: 0
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc {
    position: relative;
    height: 72px;
    margin-left: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .2);
    pointer-events: auto;
    display: flex;
    align-items: center;
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc {
    display: block;
    float: left;
    position: relative;
    width: 61px;
    height: 100%;
    cursor: pointer
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc:hover .toolbarpc-wechat-modal {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1)
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc:hover a {
    opacity: 1
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc a {
    display: block;
    position: absolute;
    top: 50%;
    left: 19px;
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
    background: url(image/share-icon.v6.svg) no-repeat;
    background-position: 65.21739130434783% 65.21739130434783%;
    background-size: 124px 124px;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    opacity: .7
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc .toolbarpc-wechat-modal {
    height: 144px;
    position: absolute;
    bottom: 72px;
    left: -72px;
    -webkit-transform-origin: 42% bottom;
    transform-origin: 42% bottom;
    -webkit-transform: translateZ(0) scale(0);
    transform: translateZ(0) scale(0);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.34, 1.21, .4, 1);
    transition: -webkit-transform .3s cubic-bezier(.34, 1.21, .4, 1);
    transition: transform .3s cubic-bezier(.34, 1.21, .4, 1);
    transition: transform .3s cubic-bezier(.34, 1.21, .4, 1), -webkit-transform .3s cubic-bezier(.34, 1.21, .4, 1)
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc .toolbarpc-wechat-modal .toolbarpc-modal-main {
    height: 130px;
    white-space: nowrap;
    border-radius: 4px;
    background: rgba(0, 0, 0, .7)
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc .toolbarpc-wechat-modal .toolbarpc-modal-main .arrow {
    display: block;
    width: 0;
    height: 0;
    border-color: rgba(0, 0, 0, .7) transparent transparent;
    border-style: solid;
    border-width: 12px 12px 0;
    position: absolute;
    bottom: 2px;
    left: 96px
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc .toolbarpc-wechat-modal .toolbarpc-modal-main .toolbarpc-modal-right {
    display: inline-block;
    width: 255px;
    height: 100%
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc .toolbarpc-wechat-modal .toolbarpc-modal-main .toolbarpc-modal-right .qr-code {
    float: left;
    width: 130px;
    height: 100%;
    padding: 12px
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc .toolbarpc-wechat-modal .toolbarpc-modal-main .toolbarpc-modal-right .qr-code div {
    display: block;
    position: relative;
    width: 106px;
    height: 106px;
    background: #fff;
    padding: 6px
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-wechat-pc .toolbarpc-wechat-modal .toolbarpc-modal-main .toolbarpc-modal-right .qr-code-desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    float: right;
    width: 125px;
    height: 100%;
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
    word-break: break-all;
    padding: 12px 12px 12px 0
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-weibo-pc {
    display: block;
    float: left;
    position: relative;
    width: 61px;
    height: 100%;
    cursor: pointer
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-weibo-pc:hover a {
    opacity: 1
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-weibo-pc a {
    display: block;
    position: absolute;
    top: 50%;
    left: 9px;
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
    background: url(image/share-icon.v6.svg) no-repeat;
    background-position: 100% 100%;
    background-size: 124px 124px;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    opacity: .7
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-facebook-pc {
    display: block;
    float: left;
    position: relative;
    width: 60px;
    height: 100%;
    cursor: pointer;
    text-align: center
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-facebook-pc:hover a {
    opacity: 1
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-facebook-pc a {
    display: block;
    width: 32px;
    height: 32px;
    position: relative;
    top: 50%;
    margin: 0 auto;
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
    background: url(image/share-icon.v6.svg) no-repeat;
    background-position: 0 0;
    background-size: 124px 124px;
    width: 30px;
    height: 30px;
    opacity: .7
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-twitter-pc {
    display: block;
    float: left;
    position: relative;
    width: 60px;
    height: 100%;
    cursor: pointer;
    text-align: center
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-twitter-pc:hover a {
    opacity: 1
}

.bottomtoolbar .bottomtoolbar-main .toolbarpc .share-twitter-pc a {
    display: block;
    width: 32px;
    height: 32px;
    position: relative;
    top: 50%;
    margin: 0 auto;
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
    background: url(image/share-icon.v6.svg) no-repeat;
    background-position: 31.914893617021278% 31.914893617021278%;
    background-size: 124px 124px;
    width: 30px;
    height: 30px;
    opacity: .7
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel {
    height: 72px;
    border-radius: 2px;
    margin-left: 10px;
    background-color: rgba(0, 0, 0, .2);
    pointer-events: auto
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container.narrow {
    width: 202px
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container.narrow .icon-next, .bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container.narrow .icon-prev {
    background: none
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container.narrow .slide-area {
    width: 154px
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 284px;
    height: 60px;
    margin: 6px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, .15)
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .icon-prev {
    width: 24px;
    height: 100%;
    background-image: url(image/icon-prev.v6.svg);
    background-repeat: no-repeat;
    background-size: 8px 12px;
    background-position: 50%
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .icon-prev.active {
    cursor: pointer;
    background-image: url(image/icon-prev-active.v6.svg)
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .icon-next {
    width: 24px;
    height: 100%;
    background-image: url(image/icon-next.v6.svg);
    background-repeat: no-repeat;
    background-size: 8px 12px;
    background-position: 50%
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .icon-next.active {
    cursor: pointer;
    background-image: url(image/icon-next-active.v6.svg)
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area {
    width: 236px;
    height: 100%;
    overflow: hidden
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area .picture-container {
    height: 100%;
    padding: 3px 0;
    -webkit-transition: -webkit-transform .5s ease;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease;
    white-space: nowrap
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area .picture-container .item {
    position: relative;
    display: inline-block;
    width: 72px;
    height: 54px;
    margin-right: 10px;
    cursor: pointer
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area .picture-container .item:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid hsla(0, 0%, 100%, 0)
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area .picture-container .item:hover:after {
    border: 1px solid #fff
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area .picture-container .item .img-box {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #d0d0d0
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area .picture-container .item .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area .picture-container .item .img-box .mask {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .47)), color-stop(40%, rgba(7, 7, 7, .55)), to(hsla(0, 0%, 100%, 0)));
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .47), rgba(7, 7, 7, .55) 40%, hsla(0, 0%, 100%, 0))
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area .picture-container .item .title {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis
}

.bottomtoolbar .bottomtoolbar-main .more-house-panel .more-house-container .slide-area .picture-container .item .title.current:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    margin: auto;
    width: 44px;
    height: 2px;
    border-radius: 50%;
    background-color: #006eee
}

.bottomtoolbar .bottomtoolbar-main.no-realtime.no-audio .multimedia-panel {
    width: 488px
}

.bottomtoolbar .bottomtoolbar-main.no-realtime.no-audio .multimedia-panel .entry-bar {
    width: 475px
}

.bottomtoolbar .bottomtoolbar-main.no-realtime.no-audio .multimedia-panel .entry-bar .telephone-btn {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.bottomtoolbar {
    top: 50px
}

.bottomtoolbar .multimedia-panel .entry-bar {
    opacity: 1;
    z-index: 20;
    /*-webkit-transition: opacity 1s ease;*/
    /*transition: opacity 1s ease*/
}

.bottomtoolbar .multimedia-panel .audiobarpc {
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    /*-webkit-transition: opacity 1s ease;*/
    /*transition: opacity 1s ease*/
}

.bottomtoolbar .multimedia-panel.show {
    background: none
}

.bottomtoolbar .multimedia-panel.show .audiobarpc {
    pointer-events: auto;
    opacity: 1;
    z-index: 20
}

.bottomtoolbar .multimedia-panel.show .entry-bar {
    opacity: 0;
    z-index: 10
}

.bottomtoolbar .multimedia-panel.show .ai-audio-bar-pc {
    opacity: 0;
    pointer-events: none
}

.bottomtoolbar .bottomtoolbar-main {
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease
}

.bottomtoolbar .bottomtoolbar-main.in-aiaudio {
    opacity: 0
}

.bottomtoolbar .bottomtoolbar-main.in-aiaudio .ai-audio-animation .ai-audio-bar-pc, .bottomtoolbar .bottomtoolbar-main.in-aiaudio .multimedia-panel .entry-bar, .bottomtoolbar .bottomtoolbar-main.in-aiaudio .toolbarpc {
    pointer-events: none
}

.ui-pc-small .bottomtoolbar .bottomtoolbar-main {
    -webkit-transform: scale(.85);
    transform: scale(.85)
}

.bottomtoolbar.huangxuan .audio-btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.bottomtoolbar.huangxuan .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn {
    background: none
}

.bottomtoolbar.huangxuan .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn .audio-btn-status {
    margin: 0 2px 0 0
}

.bottomtoolbar.huangxuan .bottomtoolbar-main .multimedia-panel .entry-bar .audio-btn .gradient-line-border.left i:before {
    opacity: 1;
    height: 84%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.bottomtoolbar .toolbarpc .switch {
    display: inline-block;
    position: relative;
}

.bottomtoolbar .toolbarpc .switch.off .open {
    display: none;
}

.bottomtoolbar .toolbarpc .switch.on .close {
    display: none;
}

.bottomtoolbar .toolbarpc .switch .icon > i {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
}

.bottomtoolbar .toolbarpc .biaochiswitch .open i {
    background: no-repeat 50%/100% 100% url(image/no-ruler.v6.svg);
}

.bottomtoolbar .toolbarpc .biaochiswitch .close i {
    background: no-repeat 50%/100% 100% url(image/ruler.v6.svg);
}

.bottomtoolbar .toolbarpc .switch .icon {
    margin: 0 12.8px;
    text-align: center;
}

.bottomtoolbar .toolbarpc .changjingswitch .open i {
    background: no-repeat 50%/100% 100% url(image/unscene.v6.svg);
}

.bottomtoolbar .toolbarpc .changjingswitch .close i {
    background: no-repeat 50%/100% 100% url(image/scene.v6.svg);
}

.bottomtoolbar .toolbarpc .biaochiswitch:after, .bottomtoolbar .toolbarpc .changjingswitch:after, .bottomtoolbar .toolbarpc .dianzanswitch:after, .bottomtoolbar .toolbarpc .qingpingswitch:after {
    content: "";
    display: block;
    width: 1px;
    height: 80%;
    background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0)), color-stop(50%, #fff), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #fff 50%, hsla(0, 0%, 100%, 0));
    position: absolute;
    top: 8px;
    bottom: 0;
    right: -2px;
    margin: auto 0;
}

.bottomtoolbar .toolbarpc .dianzanswitch .open i {
    background: no-repeat 50%/100% 100% url(image/quzan.v6.svg);
}

.bottomtoolbar .toolbarpc .dianzanswitch .close i {
    background: no-repeat 50%/100% 100% url(image/dianzan.v6.svg);
}

.bottomtoolbar .toolbarpc .fenxiangswitch .icon i {
    background: no-repeat 50%/100% 100% url(image/fenxiang.v6.svg);
}

.bottomtoolbar .toolbarpc .qingpingswitch .icon i {
    background: no-repeat 50%/100% 100% url(image/qingping.v1.svg);
}



.multimedia-panel .audiobarpc {
    pointer-events: auto
}

/*讲房语音条*/
.audiobarpc {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none
}

.audiobarpc .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 72px;
    border-radius: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.audiobarpc .content .agent-box {
    display: block;
    position: relative;
    width: 80px;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    cursor: pointer
}

.audiobarpc .content .agent-box.agent-active {
    cursor: pointer
}

.audiobarpc .content .agent-box.agent-active:hover .agent-circle {
    -webkit-transform: scale(.9);
    transform: scale(.9);
    opacity: .5
}

.audiobarpc .content .agent-box .agent-circle {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 17px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: no-repeat 50%/100% 100% url(image/avatar-box.v6.svg);
    overflow: hidden;
    display: block
}

.audiobarpc .content .agent-box .agent-circle .agent-border {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden
}

.audiobarpc .content .agent-box .agent-circle .agent-border .avatar {
    width: 100%
}

.audiobarpc .content .controller-box {
    display: flex;
    width: unset;
    flex-grow: 1;
    height: 72px;
    align-items: center;
    position: relative;
    background: rgba(0, 0, 0, .2);
}
.audiobarpc .content .controller-box .line-mark-left,
.audiobarpc .content .controller-box .line-mark-right {
    width: 1px;
    height: 72%;
    overflow: hidden;
    opacity: .5;
    background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0)), color-stop(#fff), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0));
}
.audiobarpc .content .controller-box .line-mark-right {
    background: -webkit-gradient(linear, right top, right bottom, from(hsla(0, 0%, 100%, 0)), color-stop(#fff), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0));
}

.audiobarpc .content .controller-box .icon-active:before {
    opacity: 1;
    cursor: pointer
}

.audiobarpc .content .controller-box .room-list {
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}
.swiper-container.slider-area .swiper-wrapper {
    align-items: center;
}
.audiobarpc .content .controller-box .room-list .slider-area {
    width: 100%;
    height: 100%;
    position: absolute;
}

.audiobarpc .content .controller-box .room-list .slider-area .item {
    height: 52px;
    padding: 0 4px;
}

.audiobarpc .content .controller-box .room-list .slider-area .item.playing .item-content .progress-bar {
    display: block
}

.audiobarpc .content .controller-box .room-list .slider-area .item .item-content {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: rgba(0, 0, 0, .3);
    color: #fff
}

.audiobarpc .content .controller-box .room-list .slider-area .item .item-content:active {
    color: hsla(0, 0%, 100%, .4);
    background: rgba(0, 0, 0, .5)
}

.audiobarpc .content .controller-box .room-list .slider-area .item .item-content .room-name {
    font-size: 12px;
    line-height: 52px
}

.audiobarpc .content .controller-box .room-list .slider-area .item .item-content .progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    display: none;
    height: 3px;
    margin: 0 5px;
    bottom: 10px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .4)
}

.audiobarpc .content .controller-box .room-list .slider-area .item .item-content .progress-bar .progress {
    position: absolute;
    border-radius: 3px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(41, 255, 253, 0)), to(rgba(18, 255, 251, .7)));
    background: linear-gradient(90deg, rgba(41, 255, 253, 0), rgba(18, 255, 251, .7))
}

.audiobarpc .content .controller-box .pause-btn {
    width: 85px;
    height: 72px;
    position: relative;
    cursor: pointer;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-transition: background .3s ease, -webkit-transform .3s ease;
    transition: background .3s ease, -webkit-transform .3s ease;
    transition: transform .3s ease, background .3s ease;
    transition: transform .3s ease, background .3s ease, -webkit-transform .3s ease;
}

.audiobarpc .content .controller-box .pause-btn i {
    display: inline-block;
    width: 58px;
    height: 58px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .4);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 50%;
}

.audiobarpc .content .controller-box .pause-btn i:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: no-repeat 50%/100% 100% url(image/pause.v6.svg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

.audiobarpc .playing-tip-box {
    display: none;
    position: absolute;
    top: -34px;
    height: 34px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center
}

.audiobarpc .playing-tip-box .playing-tip {
    display: inline-block;
    border-radius: 2px;
    background: rgba(0, 0, 0, .2);
    line-height: 24px;
    vertical-align: top;
    font-size: 12px;
    padding: 0 10px
}

.audiobarpc .playing-tip-box .playing-tip .room-name:after {
    content: "\4E28";
    margin: 0 -1px;
    color: hsla(0, 0%, 100%, .4)
}

.audiobarpc .playing-tip-box .playing-tip i {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin: -2px 0 0 2px;
    -webkit-animation: playing-frames 2s steps(38) infinite;
    animation: playing-frames 2s steps(38) infinite;
    background-size: auto 100%;
    background-position: 0
}

@-webkit-keyframes playing-frames {
    0% {
        background-position-x: 0
    }

    to {
        background-position-x: 100%
    }
}

@keyframes playing-frames {
    0% {
        background-position-x: 0
    }

    to {
        background-position-x: 100%
    }
}

/*底部右侧*/

/*其它*/

a {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-touch-callout: none
}

body, button, input, select, textarea {
    /*color: #fff;*/
}

.ui-pc {
    background-image: url(image/background-pc.v6.jpg);
}

.app-front {
    color: #fff;
}

/*相册展开*/

.picturepc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.8);
    /*backdrop-filter: blur(10px);*/
}

.picturepc.open {
    display: block
}

/*.picturepc:before {
    content: "";
    position: absolute;
    display: block;
    top: -44px;
    bottom: -50px;
    left: -80px;
    right: -80px;
    background-color: rgba(0, 0, 0, .4)
}*/

.picturepc .picture-modal {
    margin: 0 auto;
    max-width: 1200px;
    height: 100%;
    pointer-events: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.picturepc .picture-modal .content {
    position: relative;
    /*padding: 20px;
    background-color: rgb(113 113 113 / 43%);
    backdrop-filter: blur(3px);
    border-radius: 3px;
    box-shadow: 0 0 10px #000;*/
    /*width: 720px;*/
    width: calc(100% - 20px);
    /*max-width: 1200px;*/
}

.video-pc .video-modal .content {
    position: relative;
}

.user-login-pc .user-login-modal .content {
    position: relative;
}


.picturepc .picture-modal .content .close-btn, .video-pc .video-modal .content .close-btn, .user-login-pc .user-login-modal .content .close-btn {
    display: block;
    width: 45px;
    height: 45px;
    position: relative;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: -65px;
    cursor: pointer
}

.picturepc .picture-modal .content .close-btn:before, .video-pc .video-modal .content .close-btn:before, .user-login-pc .user-login-modal .content .close-btn:before {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    opacity: .5;
    background: no-repeat 50%/100% 100% url(image/icon-close.v6.svg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

.picturepc .picture-modal .content .close-btn:hover, .video-pc .video-modal .content .close-btn:hover, .user-login-pc .user-login-modal .content .close-btn:before  {
    opacity: .6
}

.picturepc .picture-modal .content .close-btn:before, .video-pc .video-modal .content .close-btn:before, .user-login-pc .user-login-modal .content .close-btn:before  {
    opacity: 1
}

.picturepc .picture-modal .picture-show-area {
    position: relative;
    width: 668px;
    height: 512px;
    margin-bottom: 17px;
    /*background-color: #d0d0d0*/
}

.picturepc .picture-modal .picture-show-area:hover .pic-icon-next, .picturepc .picture-modal .picture-show-area:hover .pic-icon-prev {
    display: block
}

.picturepc .picture-modal .picture-show-area .pic-icon-prev {
    display: none;
    position: relative;
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 10;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%
}

.picturepc .picture-modal .picture-show-area .pic-icon-prev:before {
    content: "";
    display: block;
    width: 16px;
    height: 30px;
    opacity: .5;
    background: no-repeat 50%/100% 100% url(image/icon-prev.v6.svg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

.picturepc .picture-modal .picture-show-area .pic-icon-next {
    display: none;
    position: relative;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 10;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%
}

.picturepc .picture-modal .picture-show-area .pic-icon-next:before {
    content: "";
    display: block;
    width: 16px;
    height: 30px;
    opacity: .5;
    background: no-repeat 50%/100% 100% url(image/icon-next.v6.svg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

.picturepc .picture-modal .picture-show-area .icon-active:before {
    opacity: 1;
    cursor: pointer
}

.picturepc .picture-modal .picture-show-area .item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    text-align: center
}

.picturepc .picture-modal .picture-show-area .item img {
    height: 100%;
    max-width: 100%
}

.picturepc .picture-modal .picture-show-area .playing {
    opacity: 1
}

.picturepc .picture-modal .navigation {
    position: relative;
    height: 94px
}

.picturepc .picture-modal .navigation .nav-icon-prev {
    position: relative;
    position: absolute;
    right: 100%;
    top: 0;
    width: 76px;
    height: 100%
}

.picturepc .picture-modal .navigation .nav-icon-prev:before {
    content: "";
    display: block;
    width: 16px;
    height: 30px;
    opacity: .5;
    background: no-repeat 50%/100% 100% url(image/icon-prev.v6.svg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: none;
}

.picturepc .picture-modal .navigation .nav-icon-next {
    position: relative;
    position: absolute;
    left: 100%;
    top: 0;
    width: 76px;
    height: 100%;
    display: none;
}

.picturepc .picture-modal .navigation .nav-icon-next:before {
    content: "";
    display: block;
    width: 16px;
    height: 30px;
    opacity: .5;
    background: no-repeat 50%/100% 100% url(image/icon-next.v6.svg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

.picturepc .picture-modal .navigation .icon-active:before {
    opacity: 1;
    cursor: pointer
}

.picturepc .picture-modal .navigation .slide-area {
    width: 668px;
    height: 100%;
    overflow: visible;
}

.picturepc .picture-modal .navigation .slide-area .picture-container {
    height: 100%;
    -webkit-transition: -webkit-transform .5s ease;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease;
    white-space: nowrap
}

.picturepc .picture-modal .navigation .slide-area .picture-container .item {
    display: inline-block;
    width: 128px;
    height: 100%;
    margin-right: 7px;
    cursor: pointer;
    vertical-align: top
}

.picturepc .picture-modal .navigation .slide-area .picture-container .item .img-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #d0d0d0
}

.picturepc .picture-modal .navigation .slide-area .picture-container .item .img-box img {
    width: 100%;
    max-height: 100%
}

.picturepc .picture-modal .navigation .slide-area .picture-container .item .img-box .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .4);
    margin: auto
}

.picturepc .picture-modal .navigation .slide-area .picture-container .playing .mask {
    opacity: 0
}

.ui-pc-small .picturepc .picture-modal .content .close-btn, .ui-pc-small .video-pc .video-modal .content .close-btn, .ui-pc-small .user-login-pc .user-login-modal .content .close-btn:before  {
    position: absolute;
    width: 35px;
    height: 35px;
}

.ui-pc-small .picturepc .picture-modal .content .close-btn:before, .ui-pc-small .video-pc .video-modal .content .close-btn:before, .ui-pc-small .user-login-pc .user-login-modal .content .close-btn:before  {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    background: no-repeat 50%/100% 100% url(image/icon-close.v6.svg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    opacity: 1
}

.ui-pc-small .picturepc .picture-modal .content .picture-show-area {
    /*width: 720px;*/
    /*height: 405px;*/
    width: 100%;
    height: calc(100vh - 340px);
    margin-bottom: 8px;
}

.ui-pc-small .picturepc .picture-modal .content .picture-show-area .pic-icon-prev {
    width: 46px;
    height: 46px;
    left: 24px;
}

.ui-pc-small .picturepc .picture-modal .content .picture-show-area .pic-icon-next {
    width: 46px;
    height: 46px;
    right: 24px;
}

.ui-pc-small .picturepc .picture-modal .content .navigation {
    height: 77px;
}

.ui-pc-small .picturepc .picture-modal .content .navigation .slide-area {
    /*width: 720px;*/
    width: 100%;
    /*top: -10px;
    left: -10px;*/
}

.ui-pc-small .picturepc .picture-modal .content .navigation .slide-area > .swiper-wrapper {
    /*padding: 10px;
    box-sizing: content-box;*/
}

.ui-pc-small .picturepc .picture-modal .content .navigation .slide-area .picture-container .item {
    width: 102px;
    margin-right: 9px;
}

/*经纪人展开*/
.agent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0, 0, 0, .65);
}

.agent.on {
    display: none;
}

.agent .agent-mask {
    position: absolute;
    top: -44px;
    bottom: -50px;
    left: -80px;
    right: -80px;
    background: rgba(0, 0, 0, .4);
    pointer-events: auto
}

.agent .agent-info-modal {
    position: relative;
}

.agent .agent-info-modal .agent-info-modal-panel {
    background: rgba(0, 0, 0, .7);
    padding: 46px 25px 25px;
    pointer-events: auto
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-panel-close {
    display: block;
    width: 14px;
    height: 14px;
    opacity: .6;
    position: absolute;
    right: 10px;
    top: 10px
}

.agent .agent-info-modal .agent-info-modal-panel-close:after, .agent .agent-info-modal .agent-info-modal-panel-close:before {
    content: "";
    width: 130%;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.agent .agent-info-modal .agent-info-modal-panel-close:before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.agent .agent-info-modal .agent-info-modal-panel-close:after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg)
}

.agent .agent-info-modal .agent-info-modal-panel-avatar {
    width: 70px;
    height: 70px;
    position: absolute;
    left: 21px;
    top: -35px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-panel-avatar .agent-info-modal-panel-avatar-image {
    width: 60px;
    height: 60px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    margin: 5px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-panel-avatar .agent-info-modal-panel-avatar-image img {
    width: 100%;
    border: none;
    display: block
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-panel-avatar .agent-info-modal-panel-avatar-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    overflow: hidden;
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-panel-avatar .agent-info-modal-panel-avatar-mask:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 500%;
    border-radius: 50%;
    background: rgba(0, 0, 0, .7);
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title {
    font-size: 20px;
    margin-top: -9px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title .agent-info-modal-title-name {
    vertical-align: middle;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    margin-left: 10px;
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title .agent-info-modal-title-position {
    vertical-align: middle;
    display: inline-block;
    font-size: 12px;
    line-height: 17px;
    padding: 0 5px;
    color: hsla(0, 0%, 100%, .5);
    -webkit-box-shadow: 0 0 0 0.7px hsla(0, 0%, 100%, .2);
    box-shadow: 0 0 0 0.7px hsla(0, 0%, 100%, .2);
    border-radius: 0.6px;
    margin-left: 5px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title .agent-info-modal-title-certificate {
    width: 24px;
    height: 18px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 5px;
    background: no-repeat url(image/certificate.v6.svg);
    background-size: 24px 18px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title .agent-info-modal-title-score {
    vertical-align: middle;
    display: inline-block;
    font-size: 16px;
    line-height: 18px;
    color: #fe615a;
    margin-top: 1px;
    margin-left: 5px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-desc p {
    margin: 0;
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5);
    line-height: 18px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-board {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 16px -25px 0 -14px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-board .agent-info-modal-board-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-board .agent-info-modal-board-item em, .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-board .agent-info-modal-board-item span {
    display: block;
    text-align: center
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-board .agent-info-modal-board-item em {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-board .agent-info-modal-board-item span {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5);
    line-height: 12px;
    margin-top: 2px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-button {
    display: block;
    background: #008cf7;
    border-radius: 2px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 700
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-button i, .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-button span {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px
}

.agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-button i {
    width: 17px;
    height: 16px;
    background-image: url(image/phone.v6.svg);
    background-size: 17px 16px;
    background-repeat: no-repeat;
    margin-right: 5px
}

.agent .agent-card-modal {
    width: 490px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .7)
}

.agent .agent-card-modal .agent-card-modal-panel {
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: auto;
    padding: 30px;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .5)
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-close {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 2px;
    position: absolute;
    right: 5px;
    top: 5px
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-close:after, .agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-close:before {
    content: "";
    width: 80%;
    height: 1px;
    background: hsla(0, 0%, 100%, .5);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-close:before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-close:after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg)
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-title {
    display: block;
    height: 22px;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-title.hidden {
    display: none
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-picture {
    display: block;
    position: relative;
    height: 160px;
    width: 160px;
    text-align: center;
    overflow: hidden;
    pointer-events: none;
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-picture.hidden {
    display: none
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-picture.hidden + .agent-card-modal-panel-content {
    margin-left: 0
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-picture img {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    border: none
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content {
    display: block;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 160px;
    margin-left: 20px;
    padding-right: 4px;
    overflow: hidden
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content.hidden {
    display: none
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .iScrollVerticalScrollbar {
    width: 2px !important
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .iScrollVerticalScrollbar .iScrollIndicator {
    background: hsla(0, 0%, 100%, .15) !important;
    border: none !important;
    right: 0
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-certificate-number {
    display: block
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-certificate-number.hidden {
    display: none
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-certificate-number.hidden + .agent-certificate-desc {
    margin-top: 0
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-certificate-desc {
    display: block;
    margin-top: 28px
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-certificate-desc.hidden {
    display: none
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-card-modal-panel-content-label {
    height: 18px;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-card-modal-panel-content-label.certificate-label-number {
    display: block;
    margin-bottom: 7px
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-card-modal-panel-content-label.certificate-label-desc {
    display: block;
    margin-bottom: 5px
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-card-modal-panel-content-value {
    font-size: 14px;
    opacity: .6
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-card-modal-panel-content-value.certificate-value-number {
    display: block;
    height: 16px;
    line-height: 16px
}

.agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content .agent-card-modal-panel-content-value.certificate-value-desc {
    display: block;
    line-height: 22px;
    text-align: justify;
    word-break: break-all
}

.ui-pc .agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-picture {
    width: 100%;
    height: 530px;
}

.ui-pc .agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content {
    max-height: 300px
}

.ui-pc.ui-pc-small .agent .agent-card-modal {
    width: 415px
}

.ui-pc.ui-pc-small .agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-picture {
    height: 450px;
}

.ui-pc.ui-pc-small .agent .agent-card-modal .agent-card-modal-panel .agent-card-modal-panel-body .agent-card-modal-panel-content {
    max-height: 250px
}

.ui-pc .agent .agent-info-modal {

}
.swiper-container.slide-aim-broker {
    padding-top: 25px;
    max-width: 850px;
}
.ui-pc .agent .agent-info-modal .agent-info-modal-panel {
    padding: 20px 34px;
    display: inline-block;
    position: relative;
    min-width: 230px;
    border-radius: 2px;
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel-close {
    width: 16px;
    height: 16px;
    right: 10px;
    top: -50px;
    position: absolute;
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-panel-avatar {
    width: 100px;
    height: 100px;
    left: 15px;
    top: -20px;
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-panel-avatar .agent-info-modal-panel-avatar-image {
    width: 82px;
    height: 82px;
    margin: 9px
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title {
    margin-top: 0
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title .agent-info-modal-title-box {
    margin-left: 85px;
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title .agent-info-modal-title-position {
    height: 20px;
    line-height: 20px;
    margin-top: 9px;
    border-radius: 0.6px;
    zoom: 0.9;
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title .agent-info-modal-title-certificate {
    width: 28px;
    height: 22px;
    margin-left: 10px;
    border-radius: 1px;
    background-size: 28px 22px
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-title .agent-info-modal-title-score {
    margin-left: 10px;
    font-size: 16px
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-desc {
    margin-top: 20px
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-desc p {
    font-size: 16px
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-desc p:last-child {
    margin-top: 12px
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-board {
    margin: 20px -25px 0;
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-board .agent-info-modal-board-item span {
    margin-top: 16px;
    font-size: 14px
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-button {
    height: 41px;
    line-height: 41px;
    margin-top: 28px;
    font-size: 18px;
}

.ui-pc .agent .agent-info-modal .agent-info-modal-panel .agent-info-modal-button i {
    width: 20px;
    height: 20px;
    background-image: url(/skin/img/system/icon-zixun.svg);
    background-size: 20px 20px;
    margin-right: 8px
}

.gradient-line-border {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none
}

.gradient-line-border.top:before {
    top: -0.5px
}

.gradient-line-border.bottom:after, .gradient-line-border.top:before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    opacity: .1;
    background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), color-stop(#fff), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0))
}

.gradient-line-border.bottom:after {
    bottom: -0.5px
}

.gradient-line-border.left i:before {
    left: -0.5px
}

.gradient-line-border.left i:before, .gradient-line-border.right i:after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: .1;
    background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0)), color-stop(#fff), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0))
}

.gradient-line-border.right i:after {
    right: -0.5px
}

@-webkit-keyframes ai-eye {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    20% {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5)
    }

    40% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    50% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    70% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    80% {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5)
    }

    to {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
}

@keyframes ai-eye {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    20% {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5)
    }

    40% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    50% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    70% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    80% {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5)
    }

    to {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
}

@-webkit-keyframes face-animation-iphone {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -5096px
    }
}

@keyframes face-animation-iphone {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -5096px
    }
}

@-webkit-keyframes line-animation-iphone {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -5096px
    }
}

@keyframes line-animation-iphone {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -5096px
    }
}

@-webkit-keyframes hxentryback-sprites-animation {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -8520px
    }
}

@keyframes hxentryback-sprites-animation {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -8520px
    }
}

@-webkit-keyframes hxentryfront-sprites-animation {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -8520px
    }
}

@keyframes hxentryfront-sprites-animation {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -8520px
    }
}
.lp-map-address-room {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0 0 0 / 62%);
}
#lp-map-address {
    width: 80%;
    height: 80%;
}

#lp-map-address .anchorBL,
#lp-map-address .BMap_cpyCtrl.BMap_noprint {
    display: none;
}
.swiper-container.swiper-hx-slider {
    width: 100%;
    height: 100%;
}
.swiper-container.swiper-hx-slider .swiper-slide .cover-img {
    width: 100%;
    height: 100%;
}
.swiper-container.slide-area .swiper-slide {
    background-color: #000;
}
.swiper-container.slide-area .swiper-slide > .cover-img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    opacity: 0.55;
}
.swiper-container.slide-area .swiper-slide.ssactive {
    
}
.swiper-container.slide-area .swiper-slide.ssactive > .cover-img {
    border: solid 1px rgb(255 255 255 / 64%);
    box-shadow: 0 0 6px rgb(255 255 255 / 64%);
    opacity: 1;
}

.lp-map-address-room .close-btn {
    display: block;
    position: absolute;
    top: calc(10% + 5px);
    right: calc(10% + 5px);
    width: 26px;
    height: 26px;
    background: rgba(0,0,0,.2);
    border-radius: 2px;
    z-index: 1;
}

.lp-map-address-room  .close-btn:after, .lp-map-address-room  .close-btn:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 19px;
    background: #fff;
}

.lp-map-address-room .close-btn:before {
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
}

.lp-map-address-room .close-btn:after {
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
}

.datacard .datacard-bar .datacard-modal .stage .pie-3.big-one .datacard-images .datacard-images-big {
    width: 100%;
    height: 100%;
}

.datacard .datacard-bar .datacard-modal .stage .pie-3.take-two {
    -webkit-box-shadow: none;
    box-shadow: none;
    overflow: visible;
}

.datacard .datacard-bar .datacard-modal .stage .pie-3.take-two .datacard-images .datacard-images-big {
    width: 100%;
    height: 49%;
    margin-top: 2%;
    -webkit-box-shadow: 0 3px 10px 0 rgb(0 0 0 / 50%);
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 50%);
    border-radius: 4px;
    overflow: hidden;
}

.datacard .datacard-bar .datacard-modal .stage .pie-3.take-two .datacard-images .datacard-images-big:first-child {
    margin-top: 0;
}

.datacard .datacard-bar .datacard-modal .stage .pie-3.take-three {
    -webkit-box-shadow: none;
    box-shadow: none;
    overflow: visible;
}

.datacard .datacard-bar .datacard-modal .stage .pie-3.take-three .datacard-images .datacard-images-big {
    width: 100%;
    height: 276px;
    margin-bottom: 2%;
    -webkit-box-shadow: 0 3px 10px 0 rgb(0 0 0 / 50%);
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 50%);
    border-radius: 4px;
    overflow: hidden;
}
.datacard .datacard-bar .datacard-modal .stage .pie-3.take-three .datacard-images .datacard-images-small-1,
.datacard .datacard-bar .datacard-modal .stage .pie-3.take-three .datacard-images .datacard-images-small-2 {
    margin-right: 4px;
    width: 49%;
    -webkit-box-shadow: 0 3px 10px 0 rgb(0 0 0 / 50%);
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 50%);
    border-radius: 4px;
    overflow: hidden;
}

.datacard .datacard-bar .datacard-modal .stage .pie-3.take-three .datacard-images .datacard-images-small-2 {
    margin-right: 0;
}


.secondary-panel.scene-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 100;
}

.sp-img-groups {
    width: 631px;
    position: absolute;
    border-radius: 4px;
    background: rgba(0, 0, 0, .2);
    /*height: 80px;*/
    left: 0;
    right: 0;
    bottom: 95px;
    padding: 6px;
    transition: all .3s ease-out;
    pointer-events: auto;
}

.off-panel .sp-img-groups {
    bottom: -80px;
    opacity: 0;
}

.swiper-slide.sp-img-items {
    width: 68px;
    height: 68px;
    background-color: #ddd;
    border: 2px solid #fff;
    position: relative;
}

.sp-img-items.sp-active {
    border-color: #f6b64c;
}

.sp-name {
    min-height: 1em;
    user-select: none;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgb(0 0 0 / 50%);
    color: #fff;
    text-align: center;
}

.sp-img-items .cover-img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.avatar-box-panel {
    float: left;
    height: 100%;
}
.ctrl-tooltip-room {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
.minimap-map-image-camera .minimap-camera .ctrl-tooltip-room {
    top: -500%;
}
.minimap-map-image-camera .ctrl-tooltip {
    background-color: rgb(255 255 255 / 80%);
    box-shadow: 0 0 4px rgb(0 0 0 / 68%);
}
.minimap-map-image-camera .ctrl-tooltip .ct-info {
    padding: 5px 8px;
    color: #000;
}
.minimap-map-image-camera .ctrl-tooltip .ct-mark {
    border-color: rgb(255 255 255 / 80%) transparent transparent transparent;
}
.minimap-map-image-camera .ctrl-tooltip-room .ctrl-tooltip:after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 1px;
    height: 7px;
    overflow: hidden;
    left: 50%;
    top: 26px;
    margin-left: -3.5px;
    transform: rotate(329deg);
    background-color: rgb(0 0 0 / 36%);
}
.minimap-map-image-camera .ctrl-tooltip-room .ctrl-tooltip:before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 1px;
    height: 9px;
    overflow: hidden;
    left: 50%;
    top: 26px;
    margin-left: 2px;
    transform: rotate(39deg);
    background-color: rgb(0 0 0 / 40%);
}
.minimap-map-image-camera .minimap-camera-focus .ctrl-tooltip-room {
    top: -245%;
}
.ctrl-tooltip {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -ms-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    position: relative;
    background-color: #1B1E24;
    width: auto;
    border-radius: 5px;
    line-height: initial;
    word-break: keep-all;
    display: none;
}
.ctrl-tooltip .ct-info {
    padding: 8px 10px;
    color: #fff;
    white-space: nowrap;
}
.ctrl-tooltip .ct-mark {
    content: "";
    position: absolute;
    z-index: 10;
    width: 0;
    height: 0;
    overflow: hidden;
    border-style: solid;
    left:50%;
    top:100%;
    border-width: 7px 5px 0 5px;
    margin-left:-5px;
    border-color: #1B1E24 transparent transparent transparent;
    _border-color: #1B1E24 #000000 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.bottomtoolbar .bottomtoolbar-main .multimedia-panel .entry-bar .avatar-box .avatar-border:hover .ctrl-tooltip.flipInTop,
.minimap-map-image-camera .ctrl-tooltip.ctrl-tooltip-show.flipInTop,
.minimap-map-image-camera .minimap-camera:hover .ctrl-tooltip.flipInTop,
.minimap-map-image-camera .minimap-camera-focus:hover .ctrl-tooltip.flipInTop {
    display: block;
    -webkit-animation-name: flipInRight;
    -moz-animation-name: flipInRight;
    -o-animation-name: flipInRight;
    animation-name: flipInRight;
}
@-webkit-keyframes flipInUp {
    0% { -webkit-transform: perspective(400px) rotateX(-90deg); opacity: 0;} 
    40% { -webkit-transform: perspective(400px) rotateX(5deg);}
    70% { -webkit-transform: perspective(400px) rotateX(-5deg);}
    100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;}
}
@-moz-keyframes flipInUp {
    0% {-moz-transform: perspective(400px) rotateX(-90deg);opacity: 0;}
    40% {-moz-transform: perspective(400px) rotateX(5deg);}
    70% {-moz-transform: perspective(400px) rotateX(-5deg);}
    100% {-moz-transform: perspective(400px) rotateX(0deg);opacity: 1;}
}
@-o-keyframes flipInUp {
    0% {-o-transform: perspective(400px) rotateX(-90deg);opacity: 0;}
    40% {-o-transform: perspective(400px) rotateX(5deg);}
    70% {-o-transform: perspective(400px) rotateX(-5deg);}
    100% {-o-transform: perspective(400px) rotateX(0deg);opacity: 1;}
}
@keyframes flipInUp {
    0% {transform: perspective(400px) rotateX(-90deg);opacity: 0;}
    40% {transform: perspective(400px) rotateX(5deg);}
    70% {transform: perspective(400px) rotateX(-5deg);}
    100% {transform: perspective(400px) rotateX(0deg);opacity: 1;}
}
@-webkit-keyframes flipInRight {
    0% { -webkit-transform: perspective(400px) rotateY(-90deg); opacity: 0;} 
    40% { -webkit-transform: perspective(400px) rotateY(5deg);}
    70% { -webkit-transform: perspective(400px) rotateY(-5deg);}
    100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1;}
}
@-moz-keyframes flipInRight {
    0% {-moz-transform: perspective(400px) rotateY(-90deg);opacity: 0;}
    40% {-moz-transform: perspective(400px) rotateY(5deg);}
    70% {-moz-transform: perspective(400px) rotateY(-5deg);}
    100% {-moz-transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
@-o-keyframes flipInRight {
    0% {-o-transform: perspective(400px) rotateY(-90deg);opacity: 0;}
    40% {-o-transform: perspective(400px) rotateY(5deg);}
    70% {-o-transform: perspective(400px) rotateY(-5deg);}
    100% {-o-transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
@keyframes flipInRight {
    0% {transform: perspective(400px) rotateY(-90deg);opacity: 0;}
    40% {transform: perspective(400px) rotateY(5deg);}
    70% {transform: perspective(400px) rotateY(-5deg);}
    100% {transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
/*---*/
.max-mini-map {
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / 85%);
    touch-action: none;
}
.max-mini-map .minimap-main {
    width: 100%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 0;
    right: unset;
    bottom: unset;
    margin: auto;
    overflow: hidden;
}
.max-mini-map .minimap-map.js-minimap {
    width: 100%;
    height: 100%;
    position: relative;
}
.max-mini-map .minimap-map.js-minimap .minimap-map-image {
    position: absolute;
    cursor: -webkit-grab;
    cursor: grab;
    background-repeat: no-repeat;
    background-size: cover;
}
.max-mini-map .minimap-map.js-minimap .minimap-map-image:active {
    cursor: grabbing;
}

/*小地图新增20210520*/

.ui-minimap-area-top {
    width: 100%;
    height: 10%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ui-minimap-close-btn {
    display: block;
    width: 28px;
    height: 28px;
    overflow: hidden;
    position: relative;
    margin-right: 50px;
}

.ui-minimap-close-btn:after, .ui-minimap-close-btn:before {
    content: "";
    width: 130%;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ui-minimap-close-btn:before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ui-minimap-close-btn:after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.ui-minimap-area-bottom {
    width: 100%;
    height: 10%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.ui-minimap-zoombar {
    color: #fff;
    background: rgba(52, 52, 52, 0.6);
    border: 1px solid #343434;
    border-radius: 21px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
}

.ui-minimap-zoombar .ui-minimap-btn {
    cursor: pointer;
    width: 16px;
    height: 16px;
    box-sizing: content-box !important;
    padding: 3px;
    margin-right: 3px;
}

.ui-minimap-zoombar .ui-minimap-btn.zoom-in {
    margin-left: 3px;
    margin-right: 0;
}

.ui-minimap-zoombar .disabled.ui-minimap-btn {
    opacity: .5;
    cursor: default;
}

/*20210804新增*/
/*顶部中间*/

.top-btn-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 200;
}

.tb-btn-groups {
    width: 300px;
    position: absolute;
    border-radius: 4px;
    background: rgba(0, 0, 0, .2);
    height: 40px;
    left: 0;
    right: 0;
    top: 80px;
    transition: all .3s ease-out;
    pointer-events: auto;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
}

.manyou-btn, .quanlan-btn, .pingmian-btn{
    flex: 1;
    text-align: center;
    position: relative;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(67, 67, 67, .71)), to(#0d0d0d));
    background-image: linear-gradient(0deg, rgba(67, 67, 67, .71), #0d0d0d);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
}

.manyou-btn + .pingmian-btn, .pingmian-btn + .quanlan-btn {
    border-left: 1px #565656 solid;
}

.manyou-btn.on, .quanlan-btn.on, .pingmian-btn.on {
    opacity: 1;
}

.manyou-icon, .pingmian-icon, .quanlan-icon{
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    margin: 0 10px 0 -5px;
}

.ui-mobile .manyou-icon, .ui-mobile .pingmian-icon, .ui-mobile .quanlan-icon{
    width: 24px;
    height: 24px;
    margin: 0 3px 0 -5px;
}

.manyou-icon {
    background: no-repeat 50%/100% 100% url(image/manyou.v1.svg);
}

.pingmian-icon {
    background: no-repeat 75%/75% 75% url(image/control-icon-minimap.v6.svg);
}

.quanlan-icon {
    background: no-repeat 50%/100% 100% url(image/3dquanlan.v1.svg);
}

/*20210923新增按钮*/

.tb-minibtn-groups {
    width: 168px;
    position: absolute;
    background: rgba(0, 0, 0, .2);
    height: 27px;
    left: 0;
    right: 0;
    top: 136px;
    transition: all .3s ease-out;
    pointer-events: auto;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    border-radius: 20px;
    color: #333;
}

.guancha-btn, .tuodong-btn {
    flex: 1;
    text-align: center;
    position: relative;
    background-image: linear-gradient(0deg, rgb(255 255 255 / 35%), #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    padding-bottom: 1px;
}

.guancha-btn + .tuodong-btn{
    border-left: 1px #565656 solid;
}

.guancha-btn.on, .tuodong-btn.on {
    opacity: 1;
}

.guancha-icon, .tuodong-icon{
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
    margin: 0 10px 0 -5px;
}

.guancha-icon {
    background: no-repeat 50%/100% 100% url(image/guancha.v1.svg);
}

.tuodong-icon {
    background: no-repeat 50%/100% 100% url(image/tuodong.v1.svg);
}
/*---*/
.guide-opening {

}
.guide-opening .nav-groups,
.guide-opening .lp-map-address-room {
    pointer-events: none !important;
}
.guide-opening .lp-map-address-room .close-btn,
.guide-opening .datacard .datacard-bar .datacard-text,
.guide-opening .tb-btn-groups {
    display: none;
}
.guide-opening .lp-map-address-room #lp-map-address {
    pointer-events: auto;
}

/*--------*/
.layui-layer-msg {
    pointer-events: none !important;
}
.tdmod-help-pc {
    background-color: rgb(0 0 0 / 70%);
    position: absolute;
    z-index: 500;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tdmod-help-pc .help-pic {
    width: 100%;
    height: 100%;
    background-image: url(/skin/js/system/vr-edit/img/vr_sys/tdmod-help-pc.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 1440px;
    max-height: 900px;
}
.nav-groups .opi3 {
    opacity: 0.3;
}
.navg-tdmodloadicon {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}