@charset "utf-8"; /* banner */ .c-banner{ width: 100%; position: relative; } .c-banner img{ width: 100%; } .c-banner .banner ul{ list-style: none; padding-left: 0px; margin-bottom: 0px; } .c-banner .banner ul li{ position: absolute display: none; opacity: 0; } .c-banner .banner ul li:nth-child(1){ opacity: 1; display: block; } .c-banner .banner ul li img{ width: 100%; position: absolute; top: 0px; } .c-banner .banner ul li:first-child img{ position: relative; } .c-banner .nexImg,.c-banner .preImg{ padding: 25px 10px 25px 10px; position: absolute; top: 50%; margin-top: -53px; border-radius: 5px; z-index: 10; } .c-banner .nexImg:hover,.c-banner .preImg:hover{ opacity: 0.8; } .c-banner .nexImg{ right: 0px; } .c-banner .nexImg img,.c-banner .preImg img{ } .c-banner .jumpBtn{ width: 100%; position: absolute; bottom: 20px; text-align: center; } .c-banner .jumpBtn ul{ margin-bottom: 0px; padding: 0px; } .c-banner .jumpBtn ul li{ width: 30px; height: 30px; border-radius: 50%; display: inline-block; background-color: white; opacity: 0.9; margin-left: 10px; } .c-banner .jumpBtn ul li:first-child{ margin-left: 0px; } @media screen and (max-width:768px) { .c-banner{ width: 100%; height: 345px; overflow: hidden; } .c-banner .banner ul li img{ width: 768px; height: 345px; position: absolute; left: 50%; margin-left: -384px; } } .notile-bg { margin-top: 30px; background: url(../img/notile_bg.jpg) no-repeat center center; background-size: cover; padding: 26px 0 60px; } .notile-bg .index-title { color: #fff; } .notile-ul { display: flex; flex-wrap: wrap; } .notile-ul li { width: 32%; padding-left: 12px; margin-bottom: 20px; margin-left: 2%; box-sizing: border-box; position: relative; } .notile-ul li:nth-child(3n - 2) { margin-left: 0; } .notile-a { width: 100%; display: block; text-decoration: none; background-color: #fff; padding: 20px 20px 34px 70px; box-sizing: border-box; transform: translateY(0px); transition: transform .4s; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } .notile-text { height: 60px; line-height: 30px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #333; text-decoration: none; } .notile-a:hover { transform: translateY(-10px); } .notile-btn { position: absolute; left: 70px; bottom: 15px; height: 2px; width: 80px; background-color: #801b75; transition: width .4s; } .notile-a:hover .notile-btn { width: calc(100% - 100px); } .notile-data { position: absolute; left: -12px; background: linear-gradient(to bottom, #d055c2, #801b75); color: #fff; text-align: center; padding: 6px 8px; } .news-ul { width: 100%; display: flex; flex-wrap: wrap; } .news-li { width: 23.5%; margin-left: 2%; position: relative; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); margin-bottom: 30px; top: 0px; transition: top .3s; opacity: 0; } .news-ul { width: 100%; display: flex; flex-wrap: wrap; } .news-li { width: 23.5%; margin-left: 2%; position: relative; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); margin-bottom: 30px; top: 0px; transition: top .3s; opacity: 0; } .news-li a { text-decoration: none; } .news-img { padding-top: 58%; background-size: cover; background-position: center; } .news-text-bg { padding: 14px; background-color: #fff; } .news-text-bg .title { height: 78px; line-height: 28px; font-size: 16px; margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #333; text-decoration: none; } .news-text-bg .time { padding-left: 26px; background: url(../img/data.png) no-repeat left center; background-size: auto 100%; color: #999; font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-li:hover { top: -10px; } .news-li:first-child, .news-li:nth-child(6) { width: 49%; margin-left: 0; } .news-li:nth-child(4) { margin-left: 0; } .news-li:nth-child(6) { margin-left: 2%; } .news-li:first-child .news-img, .news-li:nth-child(6) .news-img { padding-top: 53%; } .news-li:first-child .news-text-bg, .news-li:nth-child(6) .news-text-bg { position: absolute; bottom: 0; background-color: transparent; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); background-repeat: repeat-y; width: 95.5%; } .news-li:first-child .news-text-bg .title, .news-li:nth-child(6) .news-text-bg .title { color: #fff; font-size: 18px; margin-bottom: 0; height: 40px; -webkit-line-clamp: 2; } .news-li:first-child .news-text-bg .time, .news-li:nth-child(6) .news-text-bg .time { display: none; } .news-li a { text-decoration: none; } .news-img { padding-top: 58%; background-size: cover; background-position: center; } .notile-data-t { font-size: 22px; } .notile-data-b { font-size: 14px; } .notile-ul li { width: 32%; padding-left: 12px; margin-bottom: 20px; margin-left: 2%; box-sizing: border-box; position: relative; } .index-box { max-width: 1240px; margin: 0 auto; padding: 0 20px; }