.wrapbanner{background: #f0f2f5;overflow: hidden;} .Banner{position: relative;z-index: 5;} .Banner a{display: block;position: relative;} .Banner .slick-img{display: block;height: 0;padding-bottom: calc(560% / 19.2);overflow: hidden;position: relative;} .Banner .slick-list{} .Banner .slick-dots{bottom: 14px;} .Banner .slick-dots li{width: 20px;height: 20px;margin: 0 4px;background: transparent;} .Banner .slick-dots li.slick-active{background: rgba(255,255,255,0.5);} .Banner .slick-dots li button{width: 8px;height: 8px;background: rgba(255,255,255,0.5);border-radius: 0;} .Banner .slick-dots li.slick-active button,.Banner .slick-dots li:hover button{background: #fff;border-radius: 2px;} .Banner .slick-arrow{border: 0;width: 28px;height: 84px;font-size: 0;opacity: 0.3;} .Banner .slick-arrow:after{display: none;} .Banner .slick-arrow:hover{opacity: 1;} .Banner .slick-next{right: -28px;background: url(../images/banner_right.png) center center no-repeat;background-size: cover;transition: all ease-in-out 0.2s;-ms-transition: all ease-in-out 0.2s;-moz-transition: all ease-in-out 0.2s;-webkit-transition: all ease-in-out 0.2s;-o-transition: all ease-in-out 0.2s;} .Banner .slick-prev{left: -28px;background: url(../images/banner_left.png) center center no-repeat;background-size: cover;transition: all ease-in-out 0.2s;-ms-transition: all ease-in-out 0.2s;-moz-transition: all ease-in-out 0.2s;-webkit-transition: all ease-in-out 0.2s;-o-transition: all ease-in-out 0.2s;} /* 通用标题样式 */ .article_list_title{overflow: hidden;margin-bottom: 21px;line-height: 24px;} .article_list_title .more{float: right;font-size: 14px;color: #999;padding: 6px 0 0 0;} .article_list_title .more:hover{color: #006fc9;} .article_list_title h2{height: 24px;color: #222;font-size: 24px;position: relative;margin: 0 64px 0 0;font-weight: normal;} .article_list_title h2 span{color: #999;font-size: 14px;padding: 0 0 0 17px;background: url(../images/title_line.png) left center no-repeat;margin: 0 0 0 10px;} .article_list_title h2::after{content: '';display: block;width: 44px;height: 1px;background: #dedede;box-shadow: 0 0 16px rgba(16,26,33,0.09);position: absolute;right: 0;top: 17px;} .mode01 .article_list_title h2,.mode03 .article_list_title h2{margin: 0 58px 0 0;} .wrap_mode01{padding: 38px 0 40px;background: url(../images/mode01bg.png);background-size: cover;} .mode01{position: relative;max-width: 1140px;} .article_list01 ul{padding: 0 43px;} .article_list01 .slick-slide a{display: block;background: #fff;border: 1px solid #eee;border-radius: 6px;margin: 0 10px;padding: 19px 9px 22px 9px;} .article_list01 .top_box{height: 40px;position: relative;padding: 0 0 15px 20px;line-height: 40px;} .article_list01 .top_box img{width: auto;vertical-align: middle;display: inline-block;} .article_list01 .top_box::after{content: '';display: block;width: 44px;height: 1px;background: #dedede;position: absolute;right: 0;top: 10px;} .article_list01 .title{padding: 0 20px;white-space: nowrap;line-height: 46px;background: #f5f5f5;border-radius: 6px;color: #222;font-weight: bold;} .article_list01 .slick-arrow{border: 0;width: 33px;height: 33px;font-size: 0;outline: none;} .article_list01 .slick-arrow:after{display: none;} .article_list01 .slick-next{right: 0px;background-size: cover;background: url(../images/mode01next.png) center center no-repeat;} .article_list01 .slick-prev{left: 0px;background: url(../images/mode01prev.png) center center no-repeat;background-size: cover;} .wrap_mode02{padding: 33px 0 0;position: relative;} .wrap_mode02::after{content: '';display: block;position: absolute;left: 0;right: 50%;top: 0;bottom: 0;z-index: 1;margin: 0 -250px 0 0;background: #f0f0f0;} .mode02{position: relative;z-index: 2;} .mode02 .lf{width: 55%;float: left;padding: 9px 0 0 0;} .mode02 .rt{margin: 0 0 0 0;width: 40%;background: #fff;padding: 19px 0 7px 2.5%;} .article_list021 ul{margin: -7px 0 0 0;} .article_list021 a{margin: 0 0 30px;display: block;} .article_list021 .left{width: 230px;float: left;} .article_list021 .right{margin: 0 0 0 250px;padding: 5px 0 0;height: 125px;position: relative;} .article_list021 .img{padding-bottom: calc(130% / 2.3);} .article_list021 .title{margin: 0 0 4px;max-height: 48px;line-height: 24px;} .article_list021 .info{margin: 0 0 20px;color: #999;height: 24px;line-height: 24px;white-space: nowrap;text-overflow: ellipsis;} .article_list021 .time{padding: 0 0 0 24px;background: url(../images/mode02time.png) left center no-repeat;color: #999;position: absolute;bottom: 14px;left: 0;} .article_list022 ul{margin: -21px 0 40px;} .article_list022 a{margin: 0 0 0;display: block;line-height: 55px;border-bottom: 1px solid #fbfbfb;} .article_list022 .title{white-space: nowrap;position: relative;padding: 0 0 0 35px;background: url(../images/mode02title.png) left center no-repeat;} .article_list022 .rightDate{color: #999;margin: 0 0 0 10px;padding: 0 0 0 23px;background: url(../images/mode02time.png) left center no-repeat;} .article_list023 ul{margin: -7px 0 0 0;} .article_list023 a{margin: 0 0 14px;display: block;line-height: 23px;background: #fafafa;padding: 14px 20px 17px;border-right: 1px solid #a3cbfa;} .article_list023 .title{white-space: nowrap;position: relative;padding: 8px 0 0 0;} .article_list023 .time{color: #999;padding: 0 0 0 23px;background: url(../images/mode02time.png) left center no-repeat;font-weight: bold;} .wrap_mode03{padding: 40px 0 40px;background: url(../images/mode03bg.png);background-size: cover;} .mode03{position: relative;max-width: 1140px;padding: 37px 30px 47px;background: #fff;box-shadow: 0 0 16px rgba(16,26,33,0.09);} .article_list03 ul{margin: -17px -23px 0;} .article_list03 li{width: 33.3%;} .article_list03 a{margin: 0 23px 0;border-bottom: 1px solid #eee;} .article_list03 .title{margin: 0 0 0;height: 55px;line-height: 55px;white-space: nowrap;padding: 0 0 0 34px;background: url(../images/mode03title.png) left center no-repeat;} @media screen and (min-width:1024px){ .Banner .slick-slide img{transition: all 2s ease-in-out;transform: none;} .Banner .slick-slide.slick-active img{-webkit-animation-name: banner;animation-name: banner;animation-duration: 6s;-webkit-animation-duration: 6s; -moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);} @keyframes banner{ from { -moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1); } to { -moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1); } } .Banner:hover .slick-next{right: 0;} .Banner:hover .slick-prev{left: 0;} .article_list03 .title,.article_list021 .title,.article_list022 .title,.article_list023 .title,.article_list01 .title{transition: all ease-in-out 0.2s;-ms-transition: all ease-in-out 0.2s;-moz-transition: all ease-in-out 0.2s;-webkit-transition: all ease-in-out 0.2s;-o-transition: all ease-in-out 0.2s;} /* .article_list01 a:hover .top_box img{-webkit-animation-name: list1;animation-name: list1;animation-duration: 0.5s;-webkit-animation-duration: 0.5s;} @keyframes list1{ from { transform: translateY(0); } 30% { transform: translateY(-10px); } to { transform: translateY(0); } } */ .article_list01 .title:hover{background: #006fc9;color: #fff;} .article_list03 a:hover .title,.article_list021 a:hover .title,.article_list022 a:hover .title,.article_list023 a:hover .title{text-indent: 1em;} } @media screen and (max-width:1400px){ .Banner .slick-prev{left: 0;} .Banner .slick-next{right: 0;} } @media screen and (max-width:1100px){ .articleListTitle h2{font-size: 20px;} } @media screen and (max-width:992px){ .article_list_title h2{font-size: 20px;} .article_list_title h2 span{font-size: 12px;} .wrap_mode02::after{right: 15px;margin: 0;} .article_list03 li{width: 50%;} .mode02 .lf{padding: 0 9px 0 0;} } @media screen and (max-width:767px){ .articleListTitle h2{font-size: 18px;} .article_list03 li{width: 100%;} } @media screen and (max-width:479px){ .Banner .slick-dots{bottom: 4px;} .Banner .slick-dots li{width: 4px;height: 4px;} .article_list021 .left{margin: 0 auto;float: none;width: auto;} .article_list021 .right{margin: 0;height: auto;} .article_list021 .info{margin: 0 0 10px;} .article_list021 .time{position: relative;bottom: 0;} } @media screen and (max-width:414px){ .article_list_title h2::after{display: none;} } @media screen and (max-width:320px){ }