.bannerimg { position: relative; } .bannerimg .pagenav { width: 1400px; margin: auto; position: relative; } .subject { font-size: 16px; } a, img { display: block; } .bannerimg .pagenav .item a { color: #ffffff; } .bannerimg .pagenav .item { padding-top: 40px; background-color: rgba(40, 132, 99, 0.9); color: #ffffff; width: 358px; height: 188px; position: absolute; bottom: 0px; left: 0px; } .bannerimg .pagenav .item1 { box-sizing: border-box; padding: 0px 5px; padding-bottom: 28px; border-bottom: 2px solid #ffffff; margin: auto; width: 177px; } .bannerimg .pagenav .item1 a { float: left; line-height: 16px; } .bannerimg .pagenav .item1 .line { margin: 0px 23px; background-color: #ffffff; height: 16px; width: 1px; float: left; } .bannerimg .pagenav .item2 { padding-top: 28px; text-align: center; font-size: 36px; } .box { position: relative; } .box1 .back, .box4 .back { width: 100%; height: 405px; position: absolute; bottom: 40px; left: 0px; height: 400px; background-image: url(../image/text5.png); background-repeat: no-repeat; z-index: 0; } .box1 .content { position: relative; z-index: 2; } .content { max-width: 1400px; width: 100%; margin: auto; padding: 70px 0px; z-index: 99; } .title1 { height: 103px; background-image: url(../image/text4.png); background-repeat: no-repeat; background-position: center 0px; position: relative; } .title1 .text { font-size: 36px; font-weight: 600; text-align: center; padding-top: 30px; } .title1 .line { width: 243px; height: 6px; background-color: #0d9966; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); } .title1 .line2 { width: 85%; height: 1px; background-color: #d9d8d8; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); } .box1 .summary { width: 71%; text-align: center; margin: auto; line-height: 35px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-top: 38px; margin-bottom: 30px; z-index: 9; } .box1 .list { width: 85%; margin: auto; } .box1 .list1 { width: calc(100% + 50px); } .box1 .list .item { width: calc(33.33% - 50px); float: left; padding: 30px 50px; box-sizing: border-box; margin-right: 50px; border: 1px solid #d9d8d8; } .box1 .list .item .title { height: 50px; background-image: url(../image/text7.png); background-repeat: no-repeat; width: 185px; margin: auto; padding-left: 80px; box-sizing: border-box; line-height: 50px; font-weight: 600; font-size: 26px; background-position: 0px center; } .box1 .list .item .icon2 { background-image: url(../image/text9.png); } .box1 .list .item .icon3 { background-image: url(../image/text11.png); } .box1 .list .item .text { overflow: hidden; margin-top: 30px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 24px; } .box1 .list .item:hover { background-color: #088658; color: #ffffff; } .box1 .list .item:hover .title{ color: #ffffff; } .box1 .list .item:hover .icon1 { background-image: url(../image/text6.png); } .box1 .list .item:hover .icon2 { background-image: url(../image/text8.png); } .box1 .list .item:hover .icon3 { background-image: url(../image/text10.png); } .boxDetail { padding-top: 96px; padding-bottom: 77px; } .boxDetail .detail { width: 153px; height: 44px; text-align: center; line-height: 44px; border: 1px solid #0d9966; margin: auto; } .boxDetail .detail:hover { opacity: 0.6; } .box2 { background-image: url(../image/text14.png); background-size: 100% 100%; background-repeat: no-repeat; } .box2 .list {} .box2 .list .item { box-sizing: border-box; /* width: calc(1400px / 6) !important; */ } .box2 .list .item .block { width: 214px; height: 214px; background-color: #30ac93; color: #ffffff; border-radius: 50%; position: relative; margin: auto; } .box2 .list .item .block:hover { opacity: 0.6; } .box2 .list .item:nth-child(2n) .block { background-color: #aac7a5; } .box2 .list .item .block .text { position: absolute; top: 50%; width: 144px; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 18px; } .box2 .slick-dots { display: none !important; } .box2 .slick-prev { display: block !important; background-image: url(../image/text12.png); width: 41px; height: 41px; position: absolute; top: 50%; transform: translateY(-50%); left: -80px; } .box2 .slick-next { display: block !important; background-image: url(../image/text13.png); width: 41px; height: 41px; position: absolute; top: 50%; transform: translateY(-50%); right: -80px; } .box2 .boxDetail { padding-bottom: 0px; } .box2 .detail { border: 1px solid #ffffff; color: #ffffff; } .first .detail { background-color: #ffffff; } .subject .maxTitle { background-repeat: no-repeat; height: 30px; background-size: 3px 51px; background-position: 0px -22px; } .outer1 { padding-top: 70px; } .box4 { background-size: 100% auto; background-repeat: no-repeat; } .box4 .list { width: calc(100% + 70px); } .box4 .list .item { box-sizing: border-box; box-sizing: border-box; padding-right: 70px; } .box4 .list .item .block {} .box4 .list .item .block:hover { opacity: 0.6; } .box4 .list img { width: 213px; height: 213px; border-radius: 50%; margin: auto; overflow: hidden; object-fit: cover; } .box4 .list .title { text-align: center; font-size: 20px; font-weight: 600; padding-top: 35px; padding-bottom: 27px; } .box4 .list .summary { line-height: 30px; color: #656565; } .box4 .slick-dots { display: none !important; } .box4 .slick-prev { display: block !important; background-image: url(../image/text2.png); width: 45px; height: 45px; position: absolute; top: 50%; transform: translateY(-50%); left: -45px; } .box4 .slick-next { display: block !important; background-image: url(../image/text3.png); width: 45px; height: 45px; position: absolute; top: 50%; transform: translateY(-50%); right: 25px; } .box4 .boxDetail { padding-bottom: 35px; position: relative; z-index: 10; } /* .box4 .detail { border: 1px solid #ffffff; color: #ffffff; } */ .box4 .content { z-index: 2; position: relative; } /* 兼容ie8及以上 ie浏览器单独样式*/ @media screen\0 { .box2 .list .item .block .text{ height: 51px; } .box1 .list .item .text{ height: 72px; } .first .summary{ height: 120px; } .box4 .list .summary{ height: 90px; } } @media screen and (max-width: 1600px) { .box2 .slick-prev { left: -50px; } .box2 .slick-next { right: -50px; } .box2 .list { padding-left: 40px; padding-right: 40px; } .box2 { background-size: auto 100%; } } @media screen and (max-width: 1500px) { .box4 .list { box-sizing: border-box; padding: 0px 45px; } } @media screen and (max-width: 1430px) { .bannerimg .pagenav .item { left: 3%; } .content { padding-left: 3%; padding-right: 3%; } .box1 .summary, .box1 .list { width: 100%; } .box4 .list img { width: 90%; height: auto; } } @media screen and (max-width: 1200px) { .bannerimg .pagenav .item2 { padding-top: 15px; text-align: center; font-size: 20px; } .bannerimg .pagenav .item1 { padding-bottom: 15px; } .bannerimg .pagenav .item { padding-top: 27px; width: 265px; height: 129px; } } @media screen and (max-width: 1000px) { .box1 .list .item { width: calc(33% - 50px); float: left; padding: 25px 28px; box-sizing: border-box; margin-right: 50px; border: 1px solid #d9d8d8; } .box1 .list .item .title { width: 166px; padding-left: 60px; } } @media screen and (max-width: 800px) { .content { padding-top: 15px; padding-bottom: 15px; } .bannerimg .pagenav { display: none; } .subject { font-size: 12px; } .title1 .text { font-size: 16px; padding-top: 10px; } .title1 { height: 63px; background-size: 100px 47px; } .title1 .line { width: 150px; height: 4px; } .box1 .summary { text-align: center; line-height: 22px; margin-top: 18px; margin-bottom: 5px; } .box1 .list .item .title { font-size: 18px; background-size: 30px 30px; line-height: 30px; height: 30px; padding-left: 40px; width: 114px; } .box1 .list .item .text { overflow: hidden; margin-top: 15px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 21px; } .box1 .list1 { width: calc(100% + 15px); } .box1 .list .item { padding: 15px; width: calc(33.33% - 15px); margin-right: 15px; } .boxDetail { padding-top: 15px; padding-bottom: 15px; } .boxDetail .detail { width: 76px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #0d9966; margin: auto; } .box2 .list .item .block { width: 150px; height: 150px; } .box2 .list .item .block .text { font-size: 12px; width: 75%; line-height: 20px; } .box4 .list .item { padding-right: 15px; } .box4 .list { width: calc(100% + 15px); } .box4 .slick-next { right: -25px; } .box4 .boxDetail { padding-bottom: 15px; } .outer1 { padding-top: 15px; } .box4 .list .title { text-align: center; font-size: 16px; font-weight: 600; padding-top: 15px; padding-bottom: 10px; } } @media screen and (max-width: 600px) { .subject .maxTitle { background-repeat: no-repeat; height: 21px; background-size: 3px 29px; background-position: 0px -12px; } .maxTitle .name { left: 12px; } .maxTitle .more1 { bottom: -2px; } } @media screen and (max-width: 500px) { .box2 .slick-prev { left: -45px; } .box2 .slick-next { right: -45px; } .box1 .list1{ width: 100%; } .box1 .list .item { width: calc(100%); margin-top: 15px; } }