.ActivityList{ height: 100%; background-image: url(../images/center_bg.png); background-size: 100% 100%; background-repeat: no-repeat; } .ActivityList .top{ padding-top: 3rem; } .top_content{ margin: 0 1.2rem; padding: 1rem 1.2rem; background-color: rgba(255,255,255,.3); display: flex; color: white; } .top_content .left img{ width: 5rem; height: 5rem; border-radius: 50%; } .top_content .right p{ padding: .4rem 1rem; text-overflow:ellipsis; overflow:hidden; } .top_content .right p:nth-child(1){ font-size: 1.6rem; } .top_content .right p:nth-child(2){ font-size: 1.4rem; } .more_img{ padding: 2.8rem 2.5rem 2rem 2.5rem; } .more_img img{ width: 100%; } .list{ background-color: white; border-radius: 6px; border: 5px solid #e64d32; margin: 0 1.2rem; padding: .5rem 1rem; } .list_item{ padding: .6rem 0 1rem 0; border-bottom: 1px solid #E4E4E4; margin-bottom: 1rem; display: flex; } .list_item .left { position: relative; } .list_item .left img,.list_item .left span{ } .list_item .left img{ width: 8rem; height: 8rem; } .list_item .left span{ position: absolute; left: 0; top: 0; padding: .2rem 1rem; color: white; } .list_item .left span.green{ background-color: #34b96c; } .list_item .left span.orange{ background-color: #e9553a; } .list_item .left span.gray{ background-color: #969696; } .list_item .right{ flex: 2 } .list_item .right p{ padding: .4rem 1rem; padding-right: 0; } .list_item .right p:nth-child(1){ font-size: 1.4rem; color: #333333; } .list_item .right p:nth-child(2){ font-size: 1.2rem; color: #666666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .list_item .right p:nth-child(2).line-clamp-1{ -webkit-line-clamp: 1; } .list_item .right p.start{ text-align: right; } .list_item .right p.start span{ background-color: #f97b0c; color: white; font-size: 1rem; display: inline-block; height: 2rem; line-height: 2rem; } .list_item .right p.start span.name{ padding-right: 0; padding-left: .3rem; } .list_item .right p.start span.date-s-span{ padding-right: .3rem; } .list_item .right p.start span.split{ font-size: 1rem; display: inline-block; width: .2rem; } .list_item.row{ margin: 0 }