.content{ padding-top: 88px; padding-bottom: 60px; } .infoBox{ display: flex; flex-wrap:wrap; margin-top: 30px; margin-left: -15px; margin-right: -15px; .items{ position: relative; width: 33.3%; margin-bottom: 30px; .itemInfo{ padding-left: 15px; padding-right: 15px; } .picBox{ position: relative; .pic{ width: 100%; } .mask{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: linear-gradient(180deg, rgba(6,15,22,0.80) 0%, rgba(18,32,43,0.00) 100%); } } .textBox{ position: absolute; width: 100%; height: 100%; padding: 26px 30px; left: 0; top: 0; .title{ font-weight: bold; font-size: 22px; color: #FFFFFF; } .time{ opacity: 0.5; font-size: 16px; color: #FFFFFF; margin-top: 5px; } } } } .pagination{ display: flex; justify-content: center; margin-top: 60px; margin-bottom: 0; } .titleContainer{ margin-top: 60px; } @media (max-width: 991px) { .infoBox{ .items{ width: 50%; margin-bottom: 30px; } } } @media (max-width: 767px) { .content{ padding-top: 56px; padding-bottom: 40px; } .infoBox{ margin: 0; margin-top: 15px; .items{ width: 100%; margin-bottom: 10px; .itemInfo{ padding: 0; } .textBox{ .title{ font-size: 20px; } .time{ font-weight: 14px; } } } } .titleContainer{ margin-top: 20px; } .loadMoreBox{ position: relative; text-align: center; margin-top: 40px; } .loadMore{ display: block; margin: auto; line-height: 40px; text-align: center; } .loading{ display: none; } .button.visible-xs{ display: flex !important; } }