.htmlcontainer { color: #333; line-height: normal; }

.htmlcontainer .xmbox { position: relative; min-height: 400px; }

.head-box { width: 986px; margin: 50px auto 0; padding-bottom: 40px; border-bottom: 1px dotted rgba(51, 51, 51, 0.1); }

.head-box.no { padding-bottom: 0; }

.head-box .title { font-weight: bold; font-size: 32px; }

.head-box .title span { font-size: 22px; }

.head-box .des { color: rgba(38, 61, 53, 0.5); margin-top: 20px; }

.head-box .intro { margin-top: 10px; color: #1A2F28; font-size: 16px; }

.head-box .tabbar { display: flex; align-items: center; justify-content: center; padding: 60px 0 22px; font-size: 16px; }

.head-box .tabbar .cell { position: relative; color: rgba(51, 51, 51, 0.7); cursor: pointer; min-width: 120px; text-align: center; }

.head-box .tabbar .cell:nth-child(2) { margin: 0 180px; }

.head-box .tabbar .cell.on { font-weight: bold; font-size: 18px; color: #333; }

.head-box .tabbar .cell.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; margin: 0 auto; width: 120px; height: 4px; background: #27BA74; }

.float-li img { position: absolute; }

.float-li img.top { top: 0; left: -22px; }

.float-li img.bottom { right: -22px; bottom: 20px; transform: rotate(180deg); }

.list a { color: inherit; }

.list .li { padding: 50px 0; margin: 0; border: none; }

.list .li.adopt { display: flex; align-items: center; justify-content: space-between; }

.list .li.adopt:not(:last-child) { border-bottom: 1px dotted rgba(51, 51, 51, 0.1); }

.list .li .title { font-weight: bold; font-size: 22px; }

.list .li .des { font-size: 15px; margin: 10px 0 20px; }

.list .li .info-box { height: 212px; display: flex; align-items: center; justify-content: space-between; border-radius: 5px; background: #F4F4F4; }

.list .li .info-box img { width: 390px; height: 212px; object-fit: cover; border-radius: 5px; }

.list .li .info-box .info { width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; margin-left: 60px; }

.list .li .info-box .info .con { width: 0; flex: 1; max-width: 350px; font-size: 14px; }

.list .li .info-box .info .con .title { font-size: 18px; }

.list .li .info-box .info .con .title span { color: #22A14D; }

.list .li .info-box .info .con .time { display: flex; align-items: center; margin-left: -18px; }

.list .li .info-box .info .con .time::before { content: ''; width: 18px; height: 18px; background: url(../../images/city/dehong/icon-zb.png) no-repeat center/cover; }

.list .li .info-box .info .con .time .ellipsis { flex: 1; width: calc(100% - 18px); }

.list .li .info-box .info .con .grey { color: rgba(51, 51, 51, 0.6); }

.list .li .go { color: #22A14D; }

.list .li .ewm { width: 120px; margin-right: 30px; }

.list .li .ewm .img { background: #fff; padding: 5px; box-sizing: border-box; }

.list .li .ewm .img canvas { width: 120px; height: 120px; }

.list .li .ewm .img img { width: 100%; height: 100%; }

.list .li .ewm p { font-size: 14px; text-align: center; }

.list .li .info-con { width: 0; flex: 1; }

.list .li .info-con .title-box { display: flex; align-items: baseline; }

.list .li .info-con .title-box .title { max-width: 42%; }

.list .li .info-con .title-box .cell { font-size: 16px; margin-left: 20px; }

.list .li .info-con .title-box .cell .name, .list .li .info-con .title-box .cell .state { font-size: 14px; }

.list .li .info-con .title-box .cell .green { color: #22A14D; }

.list .li .info-con .title-box .cell .end { color: rgba(51, 51, 51, 0.5); }

.list .li .info-con .go { margin-left: 20px; }

.list .li .info-con .time { display: flex; align-items: center; }

.list .li .info-con .time img { margin-right: 2px; }

.list .li .img-box { position: relative; margin-left: 60px; width: 306px; height: 212px; }

.list .li .img-box .big-img { width: 100%; height: 100%; border-radius: 5px; }

.list .li .img-box .img-li { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; align-items: center; border-radius: 0 0 5px 5px; background: rgba(0, 0, 0, 0.7); padding: 10px; box-sizing: border-box; }

.list .li .img-box .img-li .img-item { position: relative; width: 52px; height: 37px; margin-right: 8px; }

.list .li .img-box .img-li .img-item img { width: 100%; height: 100%; cursor: pointer; }

.list .li .img-box .img-li .img-item::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); cursor: pointer; }

.list .li .img-box .img-li .img-item.on::after { display: none; }

.list .li .img-box .ewm { position: absolute; right: 20px; bottom: -20px; width: 80px; margin-right: 0; }

.list .li .img-box .ewm .img canvas { width: 80px; height: 80px; }

.list .li .img-box .ewm p { font-size: 12px; }

.brand-box { width: 1024px; margin: 20px auto 0; padding-bottom: 40px; }

.brand-box .section { font-size: 18px; }

.brand-box .base-back { margin: 20px 0; }

.brand-box .base-back .item:not(:last-child) { margin-bottom: 30px; }

.brand-box .base-back .item .info-box { display: flex; align-items: center; }

.brand-box .base-back .item .info-box img { width: 40px; height: 40px; object-fit: cover; border-radius: 100%; margin-right: 12px; }

.brand-box .base-back .item .info-box .info { width: 0; flex: 1; }

.brand-box .base-back .item .info-box .info .name { font-size: 17px; font-weight: bold; }

.brand-box .base-back .item .info-box .info .time { opacity: .5; }

.brand-box .base-back .item .des { font-size: 16px; margin: 10px 0; }

.brand-box .base-back .item .img-box { width: 100%; font-size: 0; }

.brand-box .base-back .item .img-box .el-image { display: inline-block; width: calc((100% - 80px) / 9); min-height: 104px; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }

.brand-box .base-back .item .img-box .el-image:not(:last-child) { margin-right: 10px; }

.brand-box .adopt-back { padding: 5px 0 16px 16px; margin-bottom: 5px; border-left: 1px dotted rgba(51, 51, 51, 0.1); }

.brand-box .adopt-back .item .name { position: relative; font-size: 17px; font-weight: bold; }

.brand-box .adopt-back .item .name::after { content: ''; position: absolute; top: 8px; left: -20px; width: 8px; height: 8px; background: #D9D9D9; border-radius: 100%; }

.brand-box .loadmore { text-align: center; opacity: .7; cursor: pointer; }