.ap-detail-top {
 width: 100%;
 margin-top: 45px;
 margin-bottom: 30px
}

.ap-detail-top .ap-detail-top-left {
 float: left;
 width: 736px
}

.ap-detail-top .ap-detail-top-left .position-con {
 width: 100%;
 height: 102px;
 background: url("../images/posiiton-bg.png") no-repeat;
 background-size: cover;
 margin-top: 24px;
 padding: 10px 20px 14px;
 margin-bottom: 30px;
 position: relative;
 z-index: 2
}

.ap-detail-top .ap-detail-top-left .position-con .mask {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
 z-index: 3
}

.ap-detail-top .ap-detail-top-left .position-con .position-left {
 width: 80%;
 height: 100%;
 z-index: 10
}

.ap-detail-top .ap-detail-top-left .position-con .position-left .position-title {
 font-size: 20px;
 font-family: PingFang SC;
 font-weight: 600;
 color: #007f41
}

.ap-detail-top .ap-detail-top-left .position-con .position-left .address-text {
 margin-top: 6px;
 font-size: 16px;
 font-family: PingFang SC;
 font-weight: 500;
 line-height: 22px;
 color: rgba(0, 0, 0, .8)
}

.ap-detail-top .ap-detail-top-left .position-con .position-left .sub-text {
 margin-top: 6px;
 font-size: 12px;
 font-family: PingFang SC;
 line-height: 17px;
 color: rgba(102, 102, 102, .6)
}

.ap-detail-top .ap-detail-top-left .position-con .position-right {
 z-index: 99;
 width: 96px;
 height: 77px;
 background: rgba(229, 247, 243, .65);
 border-radius: 6px;
 text-align: center;
 padding-top: 8px;
 font-size: 16px;
 font-family: PingFang SC;
 font-weight: 500;
 line-height: 22px;
 color: #378d7a;
 cursor: pointer
}

.ap-detail-top .ap-detail-top-left .position-con .position-right img {
 width: 30px;
 height: 30px
}

.ap-detail-top .ap-detail-top-right {
 float: left;
 width: 448px;
 overflow: hidden;
 background: rgba(255, 255, 255, .39);
 border: 1px solid rgba(112, 112, 112, .1);
 margin-left: 16px;
 padding: 30px 20px 20px
}

.ap-detail-top .ap-detail-top-right h3 {
 font-size: 30px;
 font-family: PingFang SC;
 font-weight: 600;
 line-height: 42px;
 color: #000;
 margin-bottom: 15px
}

.ap-detail-top .ap-detail-top-right .price {
 font-size: 20px;
 font-family: PingFang SC;
 line-height: 28px;
 color: #ff7c46;
 font-weight: 600;
 margin-bottom: 16px
}

.ap-detail-top .ap-detail-top-right .price .num {
 font-size: 30px;
 font-weight: 600;
}

.ap-detail-top .ap-detail-top-right .coupon-con {
 width: 388px;
 height: auto;
 background: rgba(253, 124, 70, .1);
 padding: 10px 15px;
 margin-bottom: 20px
}

.ap-detail-top .ap-detail-top-right .coupon-con .title {
 font-size: 18px;
 font-family: Songti TC;
 font-weight: bold;
 line-height: 25px;
 color: #f83d36;
 margin-bottom: 10px
}

.ap-detail-top .ap-detail-top-right .coupon-con .coupon-text {
 font-size: 14px;
 font-family: PingFang SC;
 line-height: 24px;
 color: #fd7c46
}

.ap-detail-top .ap-detail-top-right .line {
 width: 388px;
 height: 1px;
 background: #f5f5f5;
 margin-bottom: 20px
}

.ap-detail-top .ap-detail-top-right .right-bottom {
 width: 388px;
 height: 153px;
 background: #fff;
 border: 1px solid rgba(112, 112, 112, .06);
 border-radius: 4px;
 padding: 10px;
 font-family: PingFang SC
}

.ap-detail-top .ap-detail-top-right .right-bottom .left {
 height: 100%;
 width: 60%
}

.ap-detail-top .ap-detail-top-right .right-bottom .left .title {
 font-size: 22px;
 font-weight: 500;
 line-height: 30px;
 color: #333
}

.ap-detail-top .ap-detail-top-right .right-bottom .left .phone {
 font-size: 14px;
 font-weight: 500;
 line-height: 20px;
 color: #999;
 margin-top: 6px;
 display: flex;
 align-items: center;
}

.ap-detail-top .ap-detail-top-right .right-bottom .left .phone img {
 width: 20px;
 height: 20px
}

.ap-detail-top .ap-detail-top-right .right-bottom .left .tip {
 font-size: 16px;
 line-height: 22px;
 color: #00af89
}

.ap-detail-top .ap-detail-top-right .right-bottom .right {
 width: 110px;
 height: 110px
}

.ap-detail-top .ap-detail-top-right .right-bottom .right img {
 width: 110px;
 height: 110px
}

.ap-detail-top .ap-detail-top-right .right-bottom .right div {
 text-align: center
}

.ap-detail-tab {
 width: 736px;
 overflow: hidden;
 position: relative
}

.ap-detail-tab:before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 2px;
 background: #f7f7f7;
 border-radius: 20px
}

.ap-detail-tab .tab-item {
 width: 92px;
 height: 46px;
 text-align: center;
 font-size: 16px;
 font-family: PingFang SC;
 line-height: 22px;
 color: #afafaf;
 padding: 12px 0;
 float: left;
 cursor: pointer;
 position: relative
}

.ap-detail-tab .tab-item.special {
 font-weight: 600;
 color: #007f41
}

.ap-detail-tab .tab-item.special:before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 2px;
 background: #127f41;
 border-radius: 20px
}

.ap-detail-tab-main {
 width: 100%;
 padding-top: 32px
}

.ap-detail-tab-main .tab-con-title {
 font-size: 26px;
 font-family: PingFang SC;
 font-weight: 600;
 line-height: 37px;
 color: #000
}

.ap-detail-tab-main #houseConId .house-item {
 width: 100%;
 margin-bottom: 24px;
 overflow: hidden;
 height: 186px
}

.ap-detail-tab-main #houseConId .house-item .house-img {
 width: 248px;
 height: 186px;
 border-radius: 4px;
 display: block;
 float: left
}

.ap-detail-tab-main #houseConId .house-item .house-main {
 float: left;
 margin-left: 30px;
 width: 280px
}

.ap-detail-tab-main #houseConId .house-item .house-main .house-title {
 white-space: nowrap;
 font-size: 22px;
 font-family: PingFang SC;
 font-weight: 600;
 line-height: 30px;
 color: #000;
 margin-bottom: 10px
}

.ap-detail-tab-main #houseConId .house-item .house-main .area {
 font-size: 14px;
 font-family: PingFang SC;
 line-height: 20px;
 color: rgba(0, 0, 0, .4);
 margin-bottom: 15px
}

.ap-detail-tab-main #houseConId .house-item .house-main .price {
 font-size: 20px;
 font-family: PingFang SC;
 font-weight: 600;
 line-height: 28px;
 color: #ff7c46
}
.ap-detail-tab-main #houseConId .house-item .house-main .price .unit {
 font-size: 12px;
 font-weight: 600;
}

.ap-detail-tab-main #houseConId .house-item .house-right {
 margin-left: 48px;
 float: left
}

.ap-detail-tab-main #houseConId .house-item .house-right .code-btn {
 width: 86px;
 height: 30px;
 background: rgba(18, 127, 65, .08);
 border-radius: 4px;
 font-size: 14px;
 font-family: PingFang SC;
 font-weight: 500;
 line-height: 30px;
 color: #127f41;
 text-align: center;
 cursor: pointer
}

.ap-detail-tab-main #houseConId .house-item .house-right .code-con {
 width: 150px;
 height: 163px;
 background: url("../images/code-bg.png") no-repeat;
 background-size: 100%;
 margin-left: -20px;
 margin-top: -10px;
 padding-bottom: 22px;
 display: none
}

.ap-detail-tab-main #houseConId .house-item .house-right .code-con img {
 width: 110px;
 height: 110px
}

.ap-detail-tab-main #houseConId .hide-house-item {
 max-height: 630px;
 overflow: hidden
}

.ap-detail-tab-main #houseConId .show-house-item {
 height: auto;
 overflow: hidden
}

.ap-detail-tab-main #houseConId .house-more-btn {
 width: 492px;
 height: 64px;
 background: rgba(229, 247, 243, .5);
 border: 1px solid rgba(0, 127, 65, .2);
 border-radius: 6px;
 font-size: 24px;
 font-family: PingFang SC;
 font-weight: 500;
 line-height: 33px;
 color: #378d7a;
 outline: none;
 margin: 0 130px 35px
}

.ap-detail-tab-main #facilitiesConId {
 overflow: hidden;
 margin-right: -20px;
 margin-bottom: 15px
}

.ap-detail-tab-main #facilitiesConId .facilities-item {
 float: left;
 margin-right: 20px;
 margin-bottom: 20px
}

.ap-detail-tab-main #facilitiesConId .facilities-item img {
 width: 70px;
 height: 70px
}

.ap-detail-tab-main #facilitiesConId .facilities-item div {
 width: 70px;
 text-align: center;
 margin-top: 10px;
 font-size: 14px;
 font-family: PingFang SC;
 line-height: 20px;
 color: #666
}

.ap-detail-tab-main #feeConId {
 margin-bottom: 15px
}

.ap-detail-tab-main #feeConId .fee-tip {
 font-size: 14px;
 font-family: PingFang SC;
 line-height: 20px;
 color: #999;
 margin-bottom: 25px
}

.ap-detail-tab-main #feeConId .fee-con {
 width: 100%;
 overflow: hidden;
 font-family: PingFang SC;
 margin-bottom: 20px
}

.ap-detail-tab-main #feeConId .fee-con .fee-common-item {
 font-size: 14px;
 height: 36px;
 line-height: 36px;
 width: 100%
}

.ap-detail-tab-main #feeConId .fee-con .fee-common-item:nth-of-type(odd) {
 background: #fcfcfc
}

.ap-detail-tab-main #feeConId .fee-con .fee-common-item:nth-of-type(even) {
 background: #fff
}

.ap-detail-tab-main #feeConId .fee-con .fee-common-item .row-item {
 width: 25%;
 color: #666;
 float: left;
 box-sizing: border-box;
 white-space: nowrap
}

.ap-detail-tab-main #feeConId .fee-con .fee-table-th .th-item {
 width: 25%;
 font-weight: 500;
 color: #000;
 position: relative;
 float: left
}

.ap-detail-tab-main #feeConId .fee-con .fee-table-th .th-item:not(:last-child)::after {
 content: "";
 width: 1px;
 height: 20px;
 background: #e0e0e0;
 position: absolute;
 right: 0;
 top: 8px
}

.ap-detail-tab-main #feeConId .fee-con .fee-table-item {
 width: 50%;
 float: left;
 position: relative
}

.ap-detail-tab-main #feeConId .fee-con .fee-table-item .th-item {
 width: 25%;
 float: left
}

.ap-detail-tab-main #feeConId .fee-con .fee-table-item:nth-of-type(odd)::after {
 content: "";
 width: 1px;
 height: 20px;
 background: #e0e0e0;
 position: absolute;
 right: 0;
 top: 8px
}

.ap-detail-tab-main #detailConId {
 margin-bottom: 35px
}

.ap-detail-tab-main #detailConId #apartmentDetail {
 padding: 15px;
 overflow: hidden;
 background: rgba(255, 124, 70, .04)
}

.ap-detail-tab-main #policyConId {
 margin-bottom: 35px
}

.ap-detail-tab-main #policyConId .policy-con {
 padding: 15px;
 overflow: hidden;
 background: rgba(66, 245, 158, .04)
}

.ap-detail-tab-main #policyConId .policy-con .policy-con-item {
 overflow: hidden
}

.ap-detail-tab-main #policyConId .policy-con .policy-con-item:not(:last-child) {
 margin-bottom: 25px
}

.ap-detail-tab-main #policyConId .policy-con .policy-con-item .policy-label {
 float: left
}

.ap-detail-tab-main #policyConId .policy-con .policy-con-item .policy-value {
 font-size: 14px;
 font-family: PingFang SC;
 line-height: 20px;
 color: #666;
 float: left;
 margin-left: 30px;
 width: 590px
}

.ap-detail-tab-main #otherConId .map-con {
 width: 1200px;
 height: 480px;
 background: #fff;
 margin-bottom: 52px
}

.ap-detail-tab-main #otherConId .map-con iframe {
 padding: 0;
 margin: 0;
 height: 480px;
 width: 100%
}

.ap-detail-tab-main .sub-title {
 font-size: 18px;
 font-family: PingFang SC;
 font-weight: 500;
 line-height: 25px;
 color: #000
}

.room-info-con {
 overflow: hidden;
 margin-bottom: 8px
}

.room-info-con .rom-info-item {
 float: left;
 font-size: 14px;
 font-family: PingFang SC;
 line-height: 20px;
 margin-bottom: 12px;
 font-size: 14px;
 font-family: PingFang SC;
 line-height: 20px;
 min-width: 50%
}

.room-info-con .rom-info-item span:first-child {
 width: 70px;
 display: inline-block;
 color: #999;
 margin-right: 25px
}

.room-info-con .rom-info-item span:last-child {
 font-size: 14px;
 font-family: PingFang SC;
 font-weight: 500;
 color: rgba(0, 0, 0, .8)
}

.expendBtn {
 width: 60px;
 height: 30px;
 text-align: center;
 margin: 10px auto;
 background: rgba(229, 247, 243, .5);
 border: 1px solid rgba(0, 127, 65, .2);
 border-radius: 6px;
 color: #378d7a;
 outline: none;
 line-height: 30px;
 cursor: pointer
}



/* 轮播图样式  --- 轮播图样式 */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: Arial, sans-serif;
 padding: 20px;
}

/* 轮播容器样式 */
.carousel-container {
 display: flex;
 width: 100%;
 height: 500px;
 /* 根据实际需求调整 */
 position: relative;
 border: 1px solid #ddd;
 border-radius: 5px;
 overflow: hidden;
}

/* 左边主轮播图样式 */
.main-carousel {
 flex: 0 0 80%;
 /* 占据70%宽度 */
 height: 100%;
 position: relative;
 overflow: hidden;
}

.carousel-slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 0.5s ease;
}

.carousel-slide.active {
 opacity: 1;
}

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

/* 右边缩略图导航样式 */
.thumbnail-nav {
 flex: 0 0 20%;
 /* 占据30%宽度 */
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 10px;
 box-sizing: border-box;
 background-color: #fff;
}

.thumbnail-container {
 flex: 1;
 overflow-y: hidden;
 width: 100%;
 scroll-behavior: smooth;
}

.thumbnail-item {
 width: 100%;
 height: 30%;
 /* 显示3个缩略图 */
 margin: 5px 0;
 opacity: 0.6;
 transition: all 0.3s ease;
 cursor: pointer;
 border-radius: 3px;
 overflow: hidden;
 border: 2px solid transparent;
}

.thumbnail-item.active {
 opacity: 1;
 border-color: #fff;
}

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

.nav-arrow {
 background: #fff;
 color: white;
 border: none;
 padding: 8px 15px;
 cursor: pointer;
 z-index: 10;
 margin: 5px 0;
 border-radius: 3px;
 font-size: 16px;
 transition: background 0.3s ease;
 width: 100%;
 display: flex;
 justify-content: center;
}

.nav-arrow img {
 width: 18px;
 height: 18px;
}

.nav-arrow:disabled {
 background: rgba(0, 0, 0, 0.09);
 cursor: not-allowed;
}

.img-con {
 position: relative;
}

.video-icon {
 width: 62px !important;
 height: 62px !important;
 position: absolute;
 top: 50%;
 /* 向下偏移 50% */
 left: 50%;
 /* 向右偏移 50% */
 transform: translate(-50%, -50%);
 /* 回退自身宽高的一半 */
 z-index: 10
}