.clear{ overflow: hidden; } .left{ float: left; } .right{ float: right; } .news-contain{ width: 100%; padding-bottom: 20px; background-repeat:no-repeat; background-size: 100% auto; background-position-y:bottom; } .new-contain-head{ width: 100%; position: relative; overflow: hidden; padding: 246px 0 0 0; height: 520px; } .new-contain-head img{ width: 100%; height: auto; display: block; } .new-contain-head-content{ /* position: absolute; */ /* top: 54%; */ width: 100%; font-size: 58px; line-height: 58px; text-align: center; color: #ffffff; overflow: hidden; } .new-contain-head-background.news{ background-image: url(../images/news/news_head_bg.png); background-size: cover; background-position: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; animation: slowScale 3s forwards; -webkit-animation: slowScale 3s forwards; } .new-contain-head-background.rela{ background-image: url(../images/news/relativity_head_bg.png); background-size: cover; background-position: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; animation: slowScale 3s forwards; -webkit-animation: slowScale 3s forwards; } .new-contain-head-background.report{ background-image: url(../images/news/report1.jpg); background-size: cover; background-position: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; animation: slowScale 3s forwards; -webkit-animation: slowScale 3s forwards; } @keyframes slowScale { 0% {transform: scale(1);} 50% {transform: scale(1.2);} 100% {transform: scale(1);} } .news-contain-list{ width: 1174px; margin: 0 auto; padding-top: 60px; } .news-contain-list-item{ width: 100%; margin-bottom: 25px; } .item-left{ position: relative; width: 470px; height: 270px; } .item-left img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px ; } .item-left .news-date{ position: absolute; left: 0; top: 0; border-radius: 10px 0 0 0; width: 85px; height: 85px; background-color: #f08200; box-shadow: 0px 10px 43px 0px rgba(78, 82, 99, 0.26); } .item-left .news-date .date{ font-size: 30px; line-height: 32px; color: #ffffff; text-align: center; padding-top: 17px; padding-bottom: 8px; } .item-left .news-date .year{ font-size: 16px; line-height: 16px; text-align: center; color: #ffffff; } .item-right{ width: 661px; } .item-right .item-date{ font-size: 14px; color: #5f6366; line-height: 24px; margin-bottom: 17px; } .item-right .item-title{ font-size: 34px; line-height: 48px; color: #171b25; font-weight: 500; margin-bottom: 17px; } .item-right .item-content{ font-size: 20px; line-height: 34px; color: #5f6366; margin-bottom: 19px; width: 100%; max-height: 68px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .item-right .item-btn span{ font-size: 16px; color: #f08200; margin-right: 10px; } .item-right .item-btn .arrow-right{ width: 21px; height: 16px; } @media screen and (max-width:1200px){ /* .new-contain-head-content{ font-size: 40px; } */ .news-contain-list{ width: 90%; margin: 0 auto; } .item-left , .item-right{ width: 100%; } .item-left .news-date{ display: none; } .item-left{ height: auto; margin-bottom: 20px; } .item-right .item-title{ font-size: 20px; line-height: 32px; } .item-right .item-content{ font-size: 16px; line-height: 18px; } } @media screen and (max-width:960px){ .new-contain-head{ height: auto; padding: 150px 0 100px; } .news-contain-list{padding-top: 30px;} .new-contain-head-content{font-size: 40px;} } @media screen and (max-width:750px){ .new-contain-head-content{font-size: 32px;} } /* detail */ .newsDeCont{max-width:700px;text-align:center;margin:0 auto 200px auto;} .newsDeCont img{max-width:100%;height:auto;margin:30px auto;} .newsDeTlt{font-size: 30px;color: #333;margin-top: 50px;margin-bottom:20px;line-height: 48px;} .newsDeTime{font-size: 20px;color: #666;margin-bottom: 30px} .newsDeTxt{font-size:20px;line-height:50px;text-indent:42px;text-align: left} @media screen and (max-width:960px){ .newsDeCont{max-width:90%;text-align:center;margin:0 auto 200px auto;font-size: 18px;} .newsDeCont img{max-width:100%;height:auto;margin:10px auto;} .newsDeTlt{font-size:28px;color: #333;margin-top: 50px;margin-bottom:20px;line-height: 48px;} .newsDeTime{font-size: 20px;color: #666;margin-bottom: 30px} .newsDeTxt{font-size:20px;line-height:50px;text-indent:42px;text-align: left} }