.banner .slick-dots { position: absolute; overflow: hidden; bottom: 44px; right: 104px; margin: 0 -14px; z-index: 9999; } .banner .slick-dots li { cursor: pointer; float: left; margin: 0 14px; display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: rgba(255, 255, 255, .5); } .banner .slick-dots li button{ outline: none; background: none; color: #000; font-size: 18px; font-weight: bold; border: 0; } .banner .slick-dots .slick-active { background: rgba(27, 112, 64, .5); } .banner .slick-dots .slick-active button{ color: #fff; } .banner{ position: relative; } .banner .pic img{ display: block; width: 100%; } .row-i1 { height: 904px; padding-bottom: 120px; background: url(../images/i1-pic1.png) no-repeat center center; background-size: cover } .row-i1 .wp { height: 100%; position: relative } .g-tit-gl { display: flex; align-items: center; justify-content: space-between } .g-tit-gl .h2 { font-size: 48px; color: #000 } .row-i1 .g-tit-gl { padding-top: 30px; padding-bottom: 46px; background: url(../images/i1-pic2.png) no-repeat 0 75px } .g-more-gl { font-size: 14px; color: #004ea2 } .g-more-gl:hover { color: #31a2c5 } .i1-left-pic { position: absolute; top: 175px; width: 66%; overflow: hidden } .i1-left-pic img { display: block; width: 100% } .i1-left-pic .item { position: relative; overflow: hidden; max-height: 611px } .i1-left-pic:hover img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2) } .i1-left-pic .txt-box { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 45px 30px; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 20%, rgba(0, 0, 0, 0.8) 100%) } .i1-left-pic .txt-box .tit { font-size: 24px; color: #fff; margin-bottom: 10px } .i1-left-pic .txt-box .desc { font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 22px; overflow: hidden } .i1-right-box { width: 79.26%; position: absolute; right: 0; top: 133px; background: url(../images/i1-pic9.png) no-repeat center center; background-size: cover; height: 655px; overflow: hidden } .ul-list4-gl { position: absolute; top: 30px; right: 0; z-index: 2; width: 515px } .ul-list4-gl li a { display: flex; align-items: center; justify-content: space-between; border-top: 1px dotted; overflow: hidden; position: relative; margin-left: 10px; border-top-color: rgba(255, 255, 255, .5); padding: 10px 10px 10px 23px; height: 123px } .ul-list4-gl li:hover a { border-top: 1px solid #004ea2; position: relative; margin-left: 0; z-index: 2; background-color: #004ea2; box-shadow: 0 0 5px 3px rgba(0, 0, 0, .5) } .ul-list4-gl .slick-current a { border-top: 1px solid #004ea2; position: relative; margin-left: 0; z-index: 2; background-color: #004ea2; box-shadow: 0 0 5px 3px rgba(0, 0, 0, .5) } .ul-list4-gl li .news { width: 280px; margin-right: 30px; font-size: 18px; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical } .ul-list4-gl li a .pic:hover img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2) } .ul-list4-gl li .pic { width: 160px; overflow: hidden } .ul-list4-gl li .pic img { display: block; width: 100% } .i2-main { overflow: hidden } .i2-left { width: 50%; float: left } .i2-right { width: 50%; float: left } .i2-left .g-tit-gl { padding-left: 21.875%; padding-right: 38px; padding-top: 44px; padding-bottom: 60px; background: url(../images/i2-pic1.png) no-repeat 200px 90px } .i2-left .g-tit-gl .g-more-gl { margin-top: 35px } .i2-ul-box { padding: 64px 55px 64px 21.875%; background: url(../images/i2-pic2.png) no-repeat center center; background-size: cover } .ul-list5-gl { overflow: hidden; margin: 0 -16px -32px } .ul-list5-gl li { float: left; width: 50%; margin-bottom: 32px } .ul-list5-gl li a { padding: 20px 30px 25px 20px; display: block; margin: 0 16px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .5); transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s } .ul-list5-gl li a:hover { background-color: #fff; border: 1px solid #fff; box-shadow: 0 20px 20px rgba(0, 0, 0, .6) } .ul-list5-gl li a:hover .desc { color: #004ea2 } .ul-list5-gl li a .time { font-size: 18px; color: #ffcb67; margin-bottom: 10px } .ul-list5-gl li a .desc { font-size: 18px; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; min-height: 54px; } .banner2 { position: relative } .banner2 .pic-gl { overflow: hidden } .banner2 .pic-gl:hover img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2) } .banner2 .pic-gl img { display: block; width: 100% } .bottom-box { padding-top: 25px; overflow: hidden } .bottom-box .tit-box { float: left; width: 273px } .bottom-box .g-tit-gl { background: url(../images/i2-pic4.png) no-repeat center top; display: block } .bottom-box .g-tit-gl .h2 { text-align: center; margin-bottom: 50px } .bottom-box .g-tit-gl .g-more-gl { display: block; text-align: center } .banner2 .slick-arrow { position: absolute; outline: none; border: none; width: 88px; height: 60px; overflow: hidden; padding-top: 60px; z-index: 88; top: auto; bottom:25px; } .banner2 .slick-prev { left: 0; background: url(../images/i2-left.png) rgba(190, 156, 90, 1) no-repeat center center } .banner2 .slick-prev:hover { background: url(../images/i2-left.png) rgba(190, 156, 90, .8) no-repeat center center } .banner2 .slick-next { left: 90px; background: url(../images/i2-right.png) rgba(190, 156, 90, 1) no-repeat center center } .banner2 .slick-next:hover { background: url(../images/i2-right.png) rgba(190, 156, 90, .8) no-repeat center center } .ul-list6-gl li { margin-bottom: 0px } .ul-list6-gl li a { position: relative; display: block; padding-left: 12px; overflow: hidden; height:42px; line-height:42px; } .ul-list6-gl li a::before { content: ''; position: absolute; top: 17px; width: 5px; height: 5px; left: 0; background-color: #000; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50% } .ul-list6-gl li a .desc { float: left; max-width: 395px; font-size: 18px; color: #333; margin-right: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical } .ul-list6-gl li a:hover .desc { color: #004ea2 } .ul-list6-gl li a .time { float: right; font-size: 18px; color: #999999 } .ul-list6-gl li a:hover .time { color: #004ea2 } .ul-list6-gl .slick-current a .desc { color: #004ea2 } .ul-list6-gl .slick-current a .time { color: #004ea2 } @media only screen and (min-width: 850px) and (max-width: 1919px) { .banner2 .slick-arrow { outline: none; border: none; width: 4.585vw; height: 3.126vw; padding-top: 3.126vw; } .banner2 .slick-next { left: 4.689vw } } @media only screen and (max-width: 1540px) { .bottom-box .tit-box { float: none; width: 100%; margin-bottom: 20px } .bottom-box { padding: 20px } .bottom-box .g-tit-gl { display: flex; background: url(../images/i2-pic4.png) no-repeat left center; background-size:auto 100%; } .bottom-box .g-tit-gl .h2 { margin-bottom: 0 } .ul-list6-gl { float: none; width: 100%; } .ul-list6-gl li { height: 42px !important; } .banner2 .pic-gl{ max-height:400px; } .ul-list6-gl li a .desc { max-width: 80%; margin-right: 0 } .ul-list6-gl li a .time { float: right } } @media only screen and (min-width: 850px) and (max-width: 1540px) { .row-i1 { height: 58.70vw; padding-bottom: 7.792vw } .g-tit-gl .h2 { font-size: 3.116vw } .row-i1 .g-tit-gl { padding-top: 1.948vw; padding-bottom: 2.987vw; background: url(../images/i1-pic2.png) no-repeat 0 4.870vw } .i1-right-box { width: 79.26%; right: 0; top: 8.4vw; background: url(../images/i1-pic9.png) no-repeat center center; background-size: cover; height: 42.53vw } .i1-left-pic { top: 11.36vw } .ul-list4-gl { top: 2.597vw; right: 0; width: 33.44vw } .ul-list4-gl li a { align-items: center; justify-content: space-between; margin-left: 0.649vw; padding: 0.649vw 0.649vw 0.649vw 1.493vw; height: 7.5vw; } .ul-list4-gl li:hover a { border-top: 1px solid #004ea2; box-shadow: 0 0 0.324vw 0.194vw rgba(0, 0, 0, .5) } .ul-list4-gl li .news { width: 18.18vw; margin-right: 1.948vw; font-size: 1.168vw } .ul-list4-gl li .pic { width: 10.38vw } .i2-ul-box { padding: 32px } } @media only screen and (max-width: 1200px) { .banner .slick-dots { margin: 0 -5px } .banner .slick-dots li { width: 25px; height: 25px; margin: 0 5px } .banner .slick-dots li button { font-size: 14px } .i1-left-pic .txt-box .tit{font-size:22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} } @media only screen and (max-width: 849px) { .row-i1 { height: auto; padding-bottom: 20px } .row-i1 .g-tit-gl { background: none; padding: 20px 0 } .i1-right-box { position: relative; top: 0; width: 100%; height: auto; padding: 0; margin-bottom: 22px; padding-bottom: 50px; } .i1-left-pic { position: relative; top: 0; width: 100% } .ul-list4-gl { width: 100%; position: relative; z-index: 0 } .ul-list4-gl li .pic { min-width: 160px } .ul-list4-gl li .news { width: auto; margin-right: 15px; font-size:14px; } .ul-list4-gl li a { margin-left: 0; height: auto } .i1-left-pic .txt-box .tit { font-size: 18px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .i1-left-pic .txt-box { padding: 10px } .i2-ul-box { padding: 20px } .i2-left { width: 100%; float: none; margin-bottom: 20px } .i2-left .g-tit-gl { padding: 20px; background: none } .g-tit-gl .h2 { font-size: 24px } .i2-left .g-tit-gl .g-more-gl { margin-top: 0 } .ul-list5-gl { margin: 0 -10px; margin-bottom: -20px } .ul-list5-gl li { margin-bottom: 20px } .ul-list5-gl li a { margin: 0 10px; padding: 10px } .i2-right { float: none; width: 100% } .banner2 .slick-arrow { display: none !important } .bottom-box .g-tit-gl { background: none } } @media only screen and (max-width: 750px) { .banner .slick-dots { right: 20px; bottom: 20px } .ul-list6-gl li a .desc { font-size: 14px } } @media only screen and (max-width: 400px) { .ul-list6-gl li a .desc { width: 70% } .ul-list6-gl li a .time { font-size: 16px } .ul-list4-gl li .pic { min-width: 100px; max-width: 100px; } .ul-list4-gl li .news { font-size: 16px } .ul-list5-gl { margin: 0 -5px; margin-bottom: -10px } .ul-list5-gl li a { margin: 0 5px } .ul-list5-gl li a .time { font-size: 16px } .ul-list5-gl li a .desc { font-size: 16px } .ul-list5-gl li { margin-bottom: 10px } }