.hotFocus { display: flex; flex-wrap: wrap; align-items:flex-start; margin-bottom: 50px; } .hotFocus .focusNews,.hotFocus .topNews { width: 48%; } .focusNews { margin-left: 0px; } .focusNews .item { position: relative; height: 480px; } .focusNews .item .thum { overflow: hidden; height: 100%; } .focusNews .item .thum .pic { background: center center no-repeat; background-size: cover; -webkit-transition: all .5s; height: 100%; } .focusNews .item:hover .thum .pic{ -webkit-transform: scale(1.05); } .focusNews .item .thum .pic img { display: block; width: 100%; max-width: 100%; max-height: 100%; } .focusNews .item h2 { position: absolute; left: 0px; right: 0px; font-size: 18px; color: #fff; bottom: 20px; z-index: 1; margin-left: 20px; margin-right: 130px; } .focusNews .item .mask2 { height: 15%; position: absolute; left: 0px; right: 0px; bottom: 0px; background: linear-gradient(180deg, rgba(77, 77, 77, 0) 0%, #000000 100%); } .focusNews .swiper-pagination { text-align: right; padding-right: 20px; bottom: 25px; } .focusNews .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background: #fff; } .focusNews .swiper-pagination .swiper-pagination-bullet-active { background: #fff; } .topNews li { margin-bottom: 40px; } .topNews li a { font-size: 18px; font-weight: bold; color: #333; } .topNews li a:hover{ color:#1252D4; } .topNews li p { color: #999; margin-top: 15px; } .newsList { display: flex; flex-wrap: wrap; align-items:flex-start; margin-bottom: 50px; } .newsList .item { position: relative; height: auto; width: 31.33%; margin-right: 3%; margin-bottom: 30px; } .newsList .item:nth-child(3n) { margin-right: 0%; } .newsList .item .thum { overflow: hidden; } .newsList .item .thum .pic { background: center center no-repeat; background-size: cover; -webkit-transition: all .5s; } .newsList .item .thum .pic img { display: block; width: 100%; max-width: 100%; max-height: 100%; } .newsList .item a:hover .thum .pic{ -webkit-transform: scale(1.05); } .newsList .item a { color: #333; } .newsList .item a:hover h2 { color: #1252D4; } .newsList .item h2 { font-size: 18px; font-weight: bold; margin: 25px 0px 10px 0px; } .newsList .item p.text-muted { color: #999; font-size: 14px; } .newsList .item .date { margin-top: 30px; } .newsList .item .date .monthDay{ font-size: 28px; font-family: GOTHICB-Font; color: #999; } .newsList .item .date .year { font-size: 15px; font-family: GOTHICB-Font; margin-left: 15px; color: #999; } @media screen and (max-width: 1200px) { .newsList .item { width: 48.5%; margin-right: 3%; } .newsList .item:nth-child(3n) { margin-right: 3%;; } .newsList .item:nth-child(2n) { margin-right: 0px; } .newsList .item .date { margin-top: 20px; } } @media screen and (max-width: 768px) { .hotFocus { margin-bottom: 20px; } .hotFocus .focusNews,.hotFocus .topNews { width: 100%; } .focusNews .item h2 { font-size: 16px; margin-right: 80px; } .hotFocus { flex-direction: column; } .focusNews { margin-bottom: 30px; } .focusNews .item { height: 100% } .topNews li { margin-bottom: 25px; } .newsList .item { width: 100%; margin-right: 0%; } }