/* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Stops flash on tap iOS */ } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .adsPr-article-item span.adsPr-img { background-repeat: no-repeat; background-size: cover; background-position: center center; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .adsPr-article-item .adsPr-desc span.adsPr-title { -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } /* Body */ html { -webkit-font-smoothing: antialiased; } body { background: #fafafa; font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.42857; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow: hidden; } .adsPr-300x600 { position: relative; height: 600px; width: 300px; } .adsPr-300x600 .adsPr-300x600-header { display: block; height: 140px; } .adsPr-300x600 .adsPr-300x600-header a { display: block; height: 100%; width: 100%; color: inherit; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list { position: relative; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .adsPr-article-item { display: block; position: relative; color: inherit; text-decoration: none; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .adsPr-article-item span.adsPr-img { display: block; position: relative; height: auto; width: 100%; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .adsPr-article-item span.adsPr-img:before { content: ""; display: block; padding-top: 66.67%; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .adsPr-article-item .adsPr-desc span.adsPr-title { display: block; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .adsPr-article-item:hover span.adsPr-title { opacity: 0.85; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .swiper-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 7.5px; padding-right: 7.5px; padding-left: 7.5px; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .swiper-wrapper .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; display: block; width: 50%; padding: 13px 7.5px; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .swiper-wrapper .swiper-slide:first-child { width: 100%; margin-bottom: 0; padding-top: 2px; padding-bottom: 2px; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .swiper-wrapper .swiper-slide:first-child span.adsPr-img { margin-bottom: 0; overflow: hidden; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .swiper-wrapper .swiper-slide:first-child span.adsPr-img:after { position: absolute; right: 0; bottom: 0; left: 0; content: ""; background: -webkit-gradient(linear, left bottom, left top, from(black), to(rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(bottom, black, rgba(255, 255, 255, 0)); background: -o-linear-gradient(bottom, black, rgba(255, 255, 255, 0)); background: linear-gradient(to top, black, rgba(255, 255, 255, 0)); height: 100px; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .swiper-wrapper .swiper-slide:first-child .adsPr-desc { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 15px; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .swiper-wrapper .swiper-slide:first-child .adsPr-desc span.adsPr-title { font-weight: 500; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .swiper-wrapper .swiper-slide:nth-child(4) { display: none; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .adsPr-article-item span.adsPr-img { margin-bottom: 7.5px; border-radius: 5px; } .adsPr-300x600 .adsPr-300x600-body .adsPr-article-list .adsPr-article-item .adsPr-desc span.adsPr-title { color: #fff; font-size: 13px; font-weight: normal; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: block; display: -webkit-box !important; line-height: 16px; max-height: 48px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; } .adsPr-300x600 .adsPr-300x600-footer { display: block; position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; height: 100px; } .adsPr-300x600 .adsPr-300x600-footer a { display: block; height: 100%; width: 100%; color: inherit; }