.activity-list {box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;flex-wrap:wrap;margin-top:30px;color:#a7a7a7;font-family:PingFangSC-Regular}
.activity-list .activity-item {display:block;width:505px;margin-bottom:40px;border:1px solid #eee;border-radius:4px;color:#a7a7a7;cursor:pointer}
.activity-list .activity-item .item-img {width:100%;height:286px;background-image:url(../images/a81a3f66b543b1e23a2b2a7090c26d16.jpeg);background-size:100% 100%;background-position:50%;border-top-left-radius:2px;border-top-right-radius:2px;-webkit-transition:all 1s;transition:all 1s}
.activity-list .activity-item .item-img:hover {background-size:110% 110%}
.activity-list .activity-item .item-info {width:100%;padding:14px 20px 16px;border-top:1px solid #eee}
.activity-list .activity-item .item-info .item-title {line-height:24px;margin-bottom:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:18px;color:#262626;font-family:PingFangSC-Semibold}
.activity-list .activity-item .item-info .item-introduce {height:38px;margin-bottom:13px;font-size:14px;text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.activity-list .activity-item .item-info .item-situation {display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;padding-top:14px;border-top:1px dashed #ddd}
.activity-list .activity-item .item-info .item-situation .item-state {width:46px;height:20px;line-height:20px;text-align:center;background:#4285f4;font-size:12px;font-family:PingFangSC-Semibold;color:#fff}
.activity-list .activity-item .item-info .item-situation .state-on {background:#ff6262}
.activity-list .activity-item .item-info .item-situation .state-off {background:#ccc}
.activity-list .activity-item .item-info .item-situation .item-description {display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between}
.activity-list .activity-item .item-info .item-situation .item-description .item-time {display:-webkit-box;display:flex;margin-left:20px;-webkit-box-align:center;align-items:center;font-size:14px;color:#a7a7a7}
.activity-list .activity-item .item-info .item-situation .item-description .item-time .icon-time {width:14px;height:14px;margin-right:2px;margin-top:-2px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAS1BMVEUAAADIyMjBwcHBwcHBwcHAwMDExMTAwMDAwMDAwMDBwcHBwcHBwcHAwMDBwcHDw8PV1dXAwMDBwcHBwcHFxcXCwsLBwcHBwcHExMT6DRTnAAAAGXRSTlMAHGu22fMam/z/TvL6qlomDG79riN1tbQNqHpt4gAAALZJREFUeAGtkgUWwyAQRBdn4h7uf9EK3ZduXX88Hx2gP6C0sc5Zo9WN8iGCicFfuqJEVTdt17VNXaEspOsHjBMx04ihF/WGYSbBPAxbXV+C3bKwRelZBoz8BvDLiMBziNV0LacqnmakUdO1pBo6Pw2aW9nA5KdFeytb2Px06M4ysxB1cNdyQWYlSnCyWQk3KwckaWC2qUjkVGQIDIcg45OMCDJ4Rgb/fMmeL/bzbfJ8g91uzd/ZA/1aCesQf1w3AAAAAElFTkSuQmCC);background-size:100% 100%;background-repeat:no-repeat}
.activity-list .activity-item .item-info .item-situation .item-description .item-time .icon-location {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAQAAADYBBcfAAAB2klEQVR42s1Uv0tbURi9ogEdLAraobyppZvgoOBSJxHppqUu/Qva/eHgYsXRUSgUOkmbsUML0i7hnPte5CEBm0GwWTLlQUmlJWApMb7TIYkmfT+Sbv3udL/D+X7d+x1j/gPTqF3HIc7ZYAPnOLTrGh2ChlWeQf2HZ1gdRNtiBLFCtzjnT/qTxTm6rECMsJVBowvxGtulXK+3lMM2ryG6admW0WKEzURskxFaWE7OdwJxL7WaPYgnCYBdgVg7nmjfAgd5hgyRD5y253iCNciuxCMeQHzZpfHiZqIXXardhXgQJ5Yhb6nTUR7iUeAEDo8g5NtebwliOd5+HSrNdIKEUDtP4EAMO9OdgVCPZ2xCGssiagxiM078BhXvZpVqZyF8jxMLEDayhoPHEP3kX/O5e4s/hzF8dzv3HjudYgNK+RvGGD7EFa5uw/RCOxC+pK0QPkJ8nQhVx1GFkrfAPoXwszu8OLwG4bc3/7ffv4c6ZJ9n7eMriJXgTr8ikBA/ZS5ydRynEN9rpKf3fYg1OztAA4oP8APizg3tGcSm/2gI1bFraDHiE2OM8Rf5C7IvhtQ5uhAvvYXAYZj6CCnUNxBrLEMs9CvQACvlWIAgfvWm/1GWvWm+5Qfvfhr+B1lCZgV/bdflAAAAAElFTkSuQmCC)}
.activity-list .activity-item .item-info .item-situation .item-description .item-time .icon-online {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAQAAADYBBcfAAAATklEQVR42mNgGBBwwPPA4wP/iYSPD3giNBKvDawVofH/gf9Euw5Z7ajGUY0kQepopLMfyc5W5GZkfM4hxRukazy4FZ8jD24lV+MWhhEGAJwikEuFJMYhAAAAAElFTkSuQmCC)}
.activity-list .activity-item:hover {box-shadow:0 0 20px 1px}
.load-more {margin-bottom:64px;text-align:center;font-size:16px;font-family:PingFangSC-Regular;color:#4285f4}
.load-more .load-btn {padding:7px 34px;border:1px solid #4285f4;border-radius:1px;cursor:pointer}


@media screen and (max-width:1024PX) {

    .activity-list {margin-top:0;padding: 3%;}
    .activity-list .activity-item {width:100%;margin-bottom:1rem;border-radius:4px;}
    .activity-list .activity-item .item-img {width:100%;height:13rem;}
    .activity-list .activity-item .item-info {width:100%;padding:14px 20px 16px;border-top:1px solid #eee}
    .activity-list .activity-item .item-info .item-title {line-height:24px;margin-bottom:10px;overflow:hidden;font-size:18px;}
    .activity-list .activity-item .item-info .item-introduce {height:38px;margin-bottom:13px;font-size:14px;}
    .activity-list .activity-item .item-info .item-situation .item-state {width:46px;height:20px;line-height:20px;text-align:center;background:#4285f4;font-size:12px;font-family:PingFangSC-Semibold;color:#fff}

    .activity-list .activity-item .item-info .item-situation .item-description {display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between}
    .activity-list .activity-item .item-info .item-situation .item-description .item-time {display:-webkit-box;display:flex;margin-left:20px;-webkit-box-align:center;align-items:center;font-size:14px;color:#a7a7a7}
    .activity-list .activity-item .item-info .item-situation .item-description .item-time .icon-time {width:14px;height:14px;margin-right:2px;margin-top:-2px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAS1BMVEUAAADIyMjBwcHBwcHBwcHAwMDExMTAwMDAwMDAwMDBwcHBwcHBwcHAwMDBwcHDw8PV1dXAwMDBwcHBwcHFxcXCwsLBwcHBwcHExMT6DRTnAAAAGXRSTlMAHGu22fMam/z/TvL6qlomDG79riN1tbQNqHpt4gAAALZJREFUeAGtkgUWwyAQRBdn4h7uf9EK3ZduXX88Hx2gP6C0sc5Zo9WN8iGCicFfuqJEVTdt17VNXaEspOsHjBMx04ihF/WGYSbBPAxbXV+C3bKwRelZBoz8BvDLiMBziNV0LacqnmakUdO1pBo6Pw2aW9nA5KdFeytb2Px06M4ysxB1cNdyQWYlSnCyWQk3KwckaWC2qUjkVGQIDIcg45OMCDJ4Rgb/fMmeL/bzbfJ8g91uzd/ZA/1aCesQf1w3AAAAAElFTkSuQmCC);background-size:100% 100%;background-repeat:no-repeat}

}