@charset "utf-8"; body { overflow-x: hidden; } @font-face { font-family: "sys"; src: url(./sySong.woff); } .banner { width: 100%; position: relative; } .banner a { display: block; } .banner>img { display: block; width: 100%; } .banner .slick { position: relative; z-index: 9; } .banner .slick-slide a { display: block; position: relative; } .banner .slick-slide a img { display: block; width: 100%; position: relative; z-index: 7; } .banner a::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/banner-zzc.png) repeat-x; background-position: center top; z-index: 9; } .banner .slick-prev, .banner .slick-next { width: 30px; height: 45px; z-index: 9; transition: all 0.5s; } .banner .slick-prev { background: url(../images/banner-l.png) no-repeat; background-position: center center; left: 140px; } .banner .slick-next { right: 140px; background: url(../images/banner-r.png) no-repeat; background-position: center center; } .banner .slick-dots { font-size: 0; text-align: center; bottom: 50px; width: 100%; left: 50%; transform: translateX(-50%); max-width: 1600px; } .banner .slick-dots::before{ content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.6); } .banner .slick-dots li { position: relative; width: 48px; height: 48px; margin: 0 25px; } .banner .slick-dots li::before { content: ""; position: absolute; width: 8px; height: 8px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background: #FFFFFF; z-index: 1; border-radius: 50%; } .banner .slick-dots li div { border-radius: 80px; opacity: 1; box-sizing: border-box; border: 1px dashed #FFFFFF; background: #056a69; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; opacity: 0; transition: all 0.5s; position: relative; z-index: 9; } .banner .slick-dots li div span { display: block; font-family: Arial; font-size: 24px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #FFFFFF; } .banner .slick-dots li.slick-active div { opacity: 1; } .s1-c { margin-top: 60px; } .s1-c ul { display: flex; justify-content: space-between; } .s1-c ul li { transition: all 0.5s; width: 18%; } .s1-c ul li:nth-child(1) { background: url(../images/s1-itembg1.jpg) no-repeat; background-position: center center; background-size: cover; } .s1-c ul li:nth-child(2) { background: url(../images/s1-itembg2.png) no-repeat; background-position: center center; background-size: cover; } .s1-c ul li:nth-child(3) { background: url(../images/s1-itembg3.png) no-repeat; background-position: center center; background-size: cover; } .s1-c ul li:nth-child(4) { background: url(../images/s1-itembg4.png) no-repeat; background-position: center center; background-size: cover; } .s1-c ul li:nth-child(5) { background: url(../images/s1-itembg5.png) no-repeat; background-position: center center; background-size: cover; } .s1-c ul li a { padding: 40px 10px 18px 10px; display: block; } .s1-c ul li a .icon { height: 95px; display: flex; justify-content: center; align-items: center; } .s1-c ul li a .icon img { max-width: 100%; max-height: 100%; } .s1-c ul li a .text { text-align: center; margin: 15px 0 5px 0; } .s1-c ul li a .text p { font-size: 24px; font-weight: 500; line-height: 36px; text-align: center; color: #FFFFFF; } .s1-c ul li a .more { height: 24px; background: url(../images/s1-more.png) no-repeat; background-position: center center; } .s1-c ul li:hover { box-shadow: 0px 20px 20px 0px #C2C8B0; } .tit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; } .tit div { position: relative; display: flex; align-items: center; } .tit div::before { content: ""; position: absolute; left: 0; bottom: 0; background: url(../images/tit-bg.png) no-repeat; background-position: center center; background-size: 100%; width: 149px; height: 82px; z-index: 1; } .tit div h2 { position: relative; z-index: 9; font-size: 42px; font-weight: 600; line-height: normal; letter-spacing: 0em; color: #068358; font-family: "sys"; } .tit div b { position: relative; z-index: 9; height: 40px; width: 7px; background: url(../images/tit-line.png) no-repeat; background-position: center center; margin: 0 5px; } .tit div span { position: relative; z-index: 9; font-family: Times New Roman; font-size: 24px; font-weight: normal; line-height: normal; text-align: center; text-transform: uppercase; letter-spacing: 0em; color: #ACACAC; } .tit a { font-size: 16px; font-weight: normal; line-height: 30px; letter-spacing: 0em; color: #888888; padding-right: 60px; background: url(../images/tit-morebg.png) no-repeat; background-position: right center; } .section2 { margin-top: 110px; position: relative; padding-bottom: 120px; } .section2 .px1600{ position: relative; z-index: 9; } .section2::before{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: -250px; background: url(../images/s2-bg.png) no-repeat; background-position: center bottom; background-size: cover; } .s2-c { display: flex; justify-content: space-between; } .s2-l { width: 65.8%; margin-right: 40px; } .s2-lt ul li a { display: block; position: relative; } .s2-lt ul li a .pic { padding-top: 59%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .s2-lt ul li a .date { position: absolute; left: 0; width: 83px; height: 76px; border-radius: 10px; background: #FC771A; left: 10px; top: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .s2-lt ul li a .date b { font-size: 38px; font-weight: bold; line-height: 38px; text-align: center; color: #FFFFFF; } .s2-lt ul li a .date span { font-size: 14px; line-height: 24px; text-align: center; letter-spacing: 0em; color: #FFFFFF; } .s2-lt ul li a .info { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(6, 131, 88, 0.75); padding: 15px 30px; } .s2-lt ul li a .info h3 { font-size: 24px; font-weight: bold; line-height: normal; letter-spacing: 0em; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2-lt ul li a .info h3 i { background-image: linear-gradient(#fff, #fff); } .s2-lt ul li a .info p { font-size: 16px; font-weight: normal; line-height: 26px; letter-spacing: 0em; color: #FFFFFF; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 52px; margin-top: 10px; } .s2-lb ul { display: flex; border-top: 1px solid #D8E2E1; border-bottom: 1px solid #D8E2E1; margin-top: 35px; } .s2-lb ul li { width: 33.33%; } .s2-lb ul li a { display: block; padding: 35px 30px 25px 30px; border-bottom: 4px solid transparent; transition: all 0.5s; } .s2-lb ul li a span { display: block; font-size: 16px; font-weight: bold; line-height: normal; letter-spacing: 0em; color: #282828; transition: all 0.5s; } .s2-lb ul li a h3 { font-size: 20px; font-weight: bold; line-height: 30px; letter-spacing: 0em; color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 90px; margin: 25px 0 20px; transition: all 0.5s; } .s2-lb ul li a div { height: 25px; background: url(../images/s1-item-more1.png) no-repeat; background-position: left center; transition: all 0.5s; } .s2-lb ul li a:hover { background: #fff; border-color: #068358; box-shadow: 0px 6px 10px 0px rgba(6, 131, 88, 0.27); } .s2-lb ul li a:hover span { color: #068358; } .s2-lb ul li a:hover h3 { color: #068358; } .s2-lb ul li a:hover div { background: url(../images/s1-item-more2.png) no-repeat; background-position: left center; } .s2-r { flex: 1; min-width: 0; } .s2-r ul li { margin-top: 35px; } .s2-r ul li:nth-child(1) { margin-top: 0; } .s2-r ul li a { display: flex; align-items: flex-start; padding: 32px 32px 20px 32px; background: #FFFFFF; box-sizing: border-box; border: 1px solid #D6D6D6; transition: all 0.5s; } .s2-r ul li a .date { width: 64px; height: 64px; display: flex; /* flex-direction: column; */ justify-content: center; align-items: center; background: #068358; border-radius: 50%; margin-right: 30px; } .s2-r ul li a .date b { font-size: 18px; font-weight: bold; line-height: 12px; text-transform: uppercase; letter-spacing: 0em; color: #FFFFFF; margin-bottom: 20px; } .s2-r ul li a .date i { width: 1px; height: 42px; background: #fff; transform: rotate(50deg); } .s2-r ul li a .date span { font-size: 18px; font-weight: bold; line-height: 12px; text-transform: uppercase; letter-spacing: 0em; color: #FFFFFF; margin-top: 20px; } .s2-r ul li a .info { flex: 1; min-width: 0; } .s2-r ul li a .info h3 { font-size: 20px; font-weight: bold; line-height: 32px; text-align: justify; /* 浏览器可能不支持 */ text-transform: uppercase; letter-spacing: 0em; color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 64px; transition: all 0.5s; } .s2-r ul li a .info p { font-size: 14px; font-weight: normal; line-height: 24px; text-transform: uppercase; letter-spacing: 0em; color: #888888; display: flex; align-items: center; margin-top: 10px; } .s2-r ul li a .info p::after { content: ""; width: 25px; height: 25px; background: url(../images/s1-item-more2.png) no-repeat; background-position: center center; background-size: cover; margin-left: 10px; } .s2-r ul li a:hover { box-shadow: 0px 10px 49px 0px rgba(0, 100, 87, 0.5); } .s2-r ul li a:hover .info h3 { color: #068358; }