.title{ text-align: center; margin-bottom:30px; } .title h3{ font-size: 24px; color: #014991; } .title .line{ width: 30px; height: 3px; background-color: #a3b3cc; margin:10px auto 0; position: relative; } .title .line::before{ content: ""; display: inline-block; width: 56px; height: 1px; background-color: #a3b3cc; position: absolute; left:-58px; top:1px; } .title .line::after{ content: ""; display: inline-block; width: 56px; height: 1px; background-color: #a3b3cc; position: absolute; left:32px; top:1px; } .more{ width: 146px; height: 40px; text-align: center; line-height: 40px; margin: 30px auto 0; background: #d3b272; font-size: 14px; } .more a{ color: #ffffff; } /*banner*/ .banner{ width:100%; } .banner .swiper-slide{ width: 100%; } .banner .swiper-slide a{ width: 100%; } .banner .swiper-slide img{ width: 100%; height: 600px; object-fit: cover; } .banner .w12{ height: 38px; position: absolute; left: 0; top:50%; bottom:0; right:0; z-index: 3; margin-top:-19px; } .banner .swiper-button-next,.swiper-button-prev{ width: 20px; height: 38px; margin-top:-19px; } .banner .swiper-button-next{ background: url(../img/right.png) no-repeat; right:0; } .banner .swiper-button-prev{ background: url(../img/left.png) no-repeat; left:0; } /*part01*/ .part01{ width: 100%; padding: 40px 0px; background: #e9f3ff url(../img/part01-bg.png) no-repeat bottom center; } .news{ width:100%; } .news-left{ width: 615px; height: 439px; } .news-left .swiper-slide{ width: 100%; height: 100%; } .news-img{ width: 100%; height: 409px; position: absolute; top:0; left:0; } .news-img a{ height:100%; } .news-img img{ width: 100%; height: 100%; object-fit: cover; } .news-txt{ width: 516px; background: #014991; position: absolute; right:0; bottom:0; text-align: left; } .news-txt a{ padding: 20px 30px; } .news-txt h3{ color: #ffffff; font-size: 16px; overflow:hidden; display:block; white-space:nowrap; text-overflow:ellipsis; font-weight: normal; margin-bottom:16px; } .news-txt span{ font-size: 14px; color: #ffffff; line-height: 20px; } .news-txt span i{ font-size: 18px; margin-right: 4px; } .news-left .swiper-pagination{ text-align: right; width: 60px; bottom:20px; right:30px; left:inherit; color:#ffffff; font-size: 20px; } .news-left .swiper-pagination .swiper-pagination-current{ font-size: 14px; } .news-right{ width: 555px; } .news-list{ width: 100%; } .news-list ul li{ padding-bottom:20px; border-bottom: 1px solid #dddddd; margin-bottom:20px; transition: .4s all; position: relative; } .news-list ul li:last-child{ margin-bottom:0; } .news-list ul li a{ max-width: calc( 100% - 15px ); color: #434343; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-left: 15px; transition: .4s all; } .news-list ul li::before{ content: ""; display: block; width: 4px; height: 37px; background: #bfbfbf; position: absolute; top:0; left: 0; } .news-list ul li:hover::before{ background: #014991; } .news-list ul li:hover{ border-bottom:1px solid #014991; } .news-list ul li:hover a{ color: #014991; } .news-list ul li time{ font-size: 14px; color: #888888; padding-left:15px; display: block; margin-top:10px; } /*part02*/ .part02{ width: 100%; padding: 40px 0; background: url(../img/part02-bg.jpg) no-repeat top center; } .part02-list ul{ display: flex; justify-content: space-between; } .part02-list ul li{ width: 380px; background: #ffffff; padding-bottom:14px; border-bottom:4px solid #014991; } .part02-img{ width: 100%; height: 242px; overflow: hidden; } .part02-img img{ width: 100%; height: 100%; object-fit: cover; transition: 0.6s all; } .part02-list ul li span{ padding-left:20px; line-height:40px; color: #999999; } .part02-list ul li span i{ font-size: 18px; margin-right:4px; } .part02-list ul li h3{ font-size: 16px; color: #434343; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; padding: 0 20px; margin-bottom:8px; transition: 0.4s all; } .part02-list ul li p{ font-size: 14px; color: #666666; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; padding: 0 20px; } .part02-list ul li:hover .part02-img img{ transform: scale(1.1,1.1); } .part02-list ul li:hover h3{ color: #014991; } .part02 .more{ background: #014991; } /*part03*/ .part03{ width: 100%; padding: 40px 0; background: url(../img/part03-bg.jpg) no-repeat top center; background-size: auto 100%; } .part03 .w12{ display: flex; } .part03-right{ margin-left: auto; width: 585px; } .part03-right h3{ color: #ffffff; } .part03-left{ width: 976px; } .xq-list ul li{ margin-bottom:16px; position: relative; width:calc( 50% - 15px ); float:left; margin-right:30px; } .xq-list ul li:nth-child(2n){ margin-right: 0; } .xq-list ul li:nth-child(7){ margin-bottom: 0; } .xq-list ul li:last-child{ margin-bottom: 0; } .xq-list ul li span{ font-size: 14px; color: #014991; } .xq-list ul li span::after{ content: ""; display: block; width: 370px; height: 1px; background: #cccccc; position: absolute; right:0; top:10px; } .xq-list ul li a{ line-height: 40px; font-size: 16px; color: #434343; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: 0.5s all; } .xq-list ul li:hover a{ color: #014991; padding-left:15px; } .zy-list .headline{ width: 100%; height: 185px; display: flex; margin-bottom:14px; } .zy-list .headline .head-img{ width: 271px; height: 185px; overflow: hidden; } .zy-list .headline .head-img a{ width: 100%; height: 100%; } .zy-list .headline .head-img img{ width: 100%; height: 100%; object-fit: cover; transition: 0.6s all; } .zy-list .headline:hover .head-img img{ transform: scale(1.1,1.1); } .head-txt{ width: 314px; background: #ffffff; } .head-txt a{ padding:20px; display: flex; flex-direction: column; height: 145px; } .head-txt h3{ font-size: 18px; color: #434343; font-weight: normal; transition: 0.4s all; } .head-txt a>span{ margin-top:auto; display: block; text-align: right; font-size: 14px; color: #a1a1a1; line-height: 21px; } .head-txt span.more1{ display: block; float: right; width: 21px; height: 21px; background: #d2e6ee; border-radius: 10.5px; position: relative; margin-left:42px; } .head-txt span.more1::before{ content: ""; width: 40px; height: 1px; background: #0134b7; display: inline-block; position: absolute; left:-33px; top:10px; z-index: 1; } .head-txt span.more1::after{ content: ""; width: 7px; height: 7px; background: #0134b7; border-radius: 3.5px; display: inline-block; position: absolute; left:7px; top:7px; transition: 0.5s all; } .zy-list .headline:hover .head-txt h3{ color: #014991; } .zy-list .headline:hover .head-txt span{ color: #014991; } .zy-list .headline:hover .head-txt span.more1::after{ transform: scale(1.5,1.5); } .zy-list .nothead{ line-height: 42px; } .zy-list .nothead a{ font-size: 16px; color: #ffffff; position: relative; padding-left:18px; } .zy-list .nothead a::before{ content: ""; display: block; width: 7px; height: 7px; background: #ffffff; position: absolute; left:0px; top:50%; margin-top:-3.5px; } /*党团建设*/ .part04{ width: 100%; padding:40px 0; background: #d1e9fc url(../img/part04-bg.jpg) no-repeat bottom center; } .part04 .w12{ display: flex; } .part04-right{ margin-left:auto; width: 194px; } .xsdt{ width: 585px; } .xsdt-list ul li.headline{ width: 100%; margin-bottom:14px; display: flex; } .xsdt-img{ width: 278px; height: 185px; overflow: hidden; } .xsdt-img img{ width: 100%; height: 100%; object-fit: cover; transition: 0.6s all; } .headline-txt{ width: 307px; } .headline-txt h3{ padding:0 20px; font-size: 18px; line-height: 28px; height: 56px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .headline-txt h3 a{ color: #434343; font-weight: normal; transition: 0.4s all; } .headline-txt p{ padding:0 20px; font-size: 14px; color: #666666; line-height: 30px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height: 60px; margin-top:22px; } .headline-txt span{ font-size: 14px; color: #d3b272; margin-top:20px; display: block; padding-left:20px; } .headline-txt span i{ margin-right: 4px; } .xsdt-list ul li.headline:hover .xsdt-img img{ transform: scale(1.1,1.1); } .xsdt-list ul li.headline:hover .headline-txt h3 a{ color: #014991; } .xsdt-list ul li.not-headline{ line-height: 42px; } .xsdt-list ul li.not-headline a{ color: #434343; max-width: calc( 100% - 120px ); float: left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-left:18px; position: relative; transition: 0.4s all; } .xsdt-list ul li.not-headline a::before{ content: ""; display: block; width: 8px; height: 8px; background: #adadad; position: absolute; left:0px; top:18px; border-radius: 4px; transition: 0.4s all; } .xsdt-list ul li.not-headline time{ color: #666666; float:right; transition: 0.4s all; } .xsdt-list ul li.not-headline:hover a{ color: #014991; } .xsdt-list ul li.not-headline:hover a::before{ background: #014991; } .xsdt-list ul li.not-headline:hover time{ color: #014991; } .part04-right ul li{ width: 194px; height: 146px; border-right:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9; background: rgba(255,255,255,.6); text-align: center; transition: 0.5s all; } .part04-right ul li a{ padding-top:20px; height: 126px; } .part04-right ul li i{ color: #555555; font-size: 60px; transition: 0.5s all; } .part04-right ul li h3{ font-size: 18px; color: #555555; margin-top:10px; transition: 0.5s all; } .part04-right ul li:nth-child(3n){ border-right:none; } .part04-right ul li:nth-child(7),.part04-right ul li:nth-child(8),.part04-right ul li:nth-child(9){ border-bottom:none; } .part04-right ul li:hover{ background: #014991; } .part04-right ul li:hover i,.part04-right ul li:hover h3{ color: #ffffff; }