@charset "utf-8"; .index { overflow: hidden; z-index: 99; } .banner { position: relative; z-index: 9; } .banner::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; transform: translateY(-2px); height: .54rem; background: url(../images/banner-down.png) no-repeat; background-position: center center; background-size: auto 100%; } .banner a { display: block; } .banner>img { display: block; width: 100%; } .banner .slick { position: relative; z-index: 9; } .banner .slick .slick-slide a { display: block; position: relative; } .banner .slick .slick-slide a img { display: block; width: 100%; } .banner .slick-dots { font-size: 0; text-align: right; bottom: 0.6rem; left: 0; right: 0; display: flex !important; justify-content: center; align-items: center; padding: 0 0.15rem; } .banner .slick-dots li { display: flex; border-radius: 50%; margin: 0 0.12rem; transition: all 0.3s; vertical-align: middle; width: 0.3rem; height: 0.3rem; justify-content: center; align-items: center; } @keyframes cilcle { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } } .banner .slick-dots li button { border-radius: 50%; margin: 0; padding: 0; width: 0.1rem; height: 0.1rem; background-color: #ffffff; } .banner .slick-dots li.slick-active { border-color: #fff; background: url(../images/baanner-dot-bor.png) no-repeat; background-size: 100% 100%; animation: cilcle 2s infinite linear; } .banner img { width: 100% } .banner { position: relative; background: #3f52f4 } .banner .slick-slide a { display: block; position: relative } .banner .slick-prev { width: 0.45rem; height: 0.44rem; left: 0.64rem; background-image: url(../images/prev.png); background-repeat: no-repeat; background-position: 50%; background-size: 0.45rem; opacity: .4; } .banner .slick-next { width: 0.45rem; height: 0.44rem; right: 0.9rem; background-image: url(../images/next.png); background-repeat: no-repeat; background-position: 50%; background-size: 0.45rem; opacity: .4; } #downPage { position: absolute; left: 50%; transform: translateX(-50%); bottom: .4rem; z-index: 9; cursor: pointer; } #downPage img { display: block; animation: bb 2s linear 0s infinite; } @keyframes bb { 0% { transform: translate(-50%, 0); opacity: 0; } 20% { transform: translate(-50%, 3px); opacity: 1; } 80% { transform: translate(-50%, 10px); opacity: 1; } 90% { transform: translate(-50%, 10px); opacity: 0; } 100% { transform: translate(-50%, 10px); opacity: 0; } } .title { display: flex; align-items: flex-end; } .title h2 { font-size: 0.36rem; font-weight: 600; line-height: 0.4rem; color: #333333; margin-right: .1rem; } .title span { font-size: 0.3rem; font-weight: normal; font-stretch: normal; line-height: 0.3rem; color: #7e7e7e; opacity: 0.29; margin-right: .2rem; } .title div { flex: 1; min-width: 0; height: 0.3rem; background: url(../images/tit-line.png) repeat-x; background-position: center center; } .title a { width: 1.22rem; height: 0.41rem; font-family: MicrosoftYaHei; font-size: 0.16rem; font-weight: normal; font-stretch: normal; line-height: 0.41rem; letter-spacing: 0rem; color: #ffffff; background: url(../images/tit-more.png) no-repeat; background-position: center center; background-size: 100% 100%; text-align: center; padding-left: .15rem; transition: all 0.5s; } .title-w h2 { color: #ffffff; } .title-w div { height: 0.3rem; background: url(../images/tit-line2.png) repeat-x; background-position: center center; } .title-w a { color: #1e48b6; background: url(../images/tit-more2.png) no-repeat; background-position: center center; background-size: 100% 100%; } .titlecter { position: relative; } .titlecter h2 { margin-left: .1rem; } .titlecter a { position: absolute; right: 0; bottom: 0; } .section1 { position: relative; padding-top: 1.22rem; padding-bottom: .45rem; } .section1::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 3.5rem; z-index: 1; background-color: #f0f7ff; } .section1 .w14 { position: relative; z-index: 9; } .s1-c { display: flex; align-items: center; margin-top: .3rem; } .s1-l { width: 54%; } .s1-l>ul { margin-left: -0.45rem; } .s1-l ul li a { display: block; position: relative; padding-left: .45rem; } .s1-l ul li a .pic { padding-top: 65%; } .s1-l ul li a .date { position: absolute; left: 0; top: 0; background: url(../images/s1-date-bg.png) no-repeat; background-position: center center; background-size: 100% 100%; width: 0.91rem; height: 1.05rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .s1-l ul li a .date b { font-size: 0.28rem; font-weight: normal; font-stretch: normal; line-height: 0.3rem; letter-spacing: 0rem; color: #ffffff; display: block; } .s1-l ul li a .date span { display: block; font-size: 0.14rem; font-weight: normal; font-stretch: normal; line-height: 0.3rem; color: #ffffff; } .s1-r { flex: 1; min-width: 0; background-color: #ffffff; padding: 0.2rem .3rem; position: relative; z-index: 9; } .s1-rt ul { margin: 0 -.1rem; } .s1-rt ul li a { display: block; margin: 0 .1rem; } .s1-rt ul li a .pic { padding-top: 62%; } .s1-rb { margin-left: -.89rem; padding: .3rem .3rem .5rem .3rem; background-color: #0159c7; box-shadow: 0rem 0.01rem 0.08rem 0rem rgba(56, 56, 56, 0.12); position: relative; margin-top: .3rem; } .s1-rb-more { content: ""; position: absolute; right: 0; bottom: 0; transform: translateX(25%) translateY(50%); } .s1-rb-more a { display: block; width: 0.79rem; height: 0.87rem; background: url(../images/s1-rbmore.png) no-repeat; background-position: center center; background-size: 100%; } .s1-rb ul li a { display: block; position: relative; } .s1-rb ul li a h3 { font-size: 0.18rem; font-weight: normal; font-stretch: normal; line-height: 0.22rem; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s1-rb ul li a p { font-size: 0.16rem; font-weight: normal; font-stretch: normal; line-height: 0.28rem; letter-spacing: 0rem; color: #ffffff; opacity: 0.68; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: .84rem; margin-top: .2rem; } .s1-b { margin-top: .65rem; position: relative; } .s1-b::after { content: ""; position: absolute; bottom: 0.1rem; width: 100rem; height: 1px; left: 50%; transform: translateX(-50%); background: #e5e5e5; z-index: 1; } .s1-b>ul { margin: 0 -.2rem; padding-bottom: .7rem; position: relative; z-index: 9; } .s1-b ul li a { display: block; margin: 0 .2rem; } .s1-b ul li a div { display: flex; align-items: flex-end } .s1-b ul li a div span { font-size: 0.24rem; font-weight: 600; font-stretch: normal; line-height: 0.24rem; letter-spacing: 0rem; color: #004aa7; margin-right: .1rem; } .s1-b ul li a div b { font-size: 0.16rem; font-weight: normal; font-stretch: normal; line-height: 0.2rem; letter-spacing: 0rem; color: #004aa7; } .s1-b ul li a h3 { font-size: 0.18rem; font-weight: bold; font-stretch: normal; line-height: 0.24rem; letter-spacing: 0rem; color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 0.48rem; margin: 0.15rem 0 .25rem 0; } .s1-b ul li a i { display: block; width: 2.18rem; max-width: 100%; height: 0.05rem; background-color: #113ba7; background-image: linear-gradient(#0159c7, #0159c7), linear-gradient(#113ba7, #113ba7); } .s1-b ul li a:hover h3 { color: #113ba7; } .s1-b .slick-dots { bottom: 0; display: flex !important; align-items: center; justify-content: space-around; } .s1-b .slick-dots li { width: 0.2rem; height: 0.2rem; background-color: #ffffff; border: solid 0.01rem #dcdcdc; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .s1-b .slick-dots li button { width: 0.08rem; height: 0.08rem; background-color: #dcdcdc; border-radius: 50%; margin: 0; padding: 0; } .s1-b .slick-dots li.slick-active { border: solid 0.01rem #113ba7; } .s1-b .slick-dots li.slick-active button { background-color: #0159c7; } .section2 { position: relative; background: url(../images/s2-bg.jpg) no-repeat; background-position: center center; background-size: cover; padding: .6rem 0 .8rem 0; } .s2-c { display: flex; justify-content: space-between; } .s2-l { flex: 1; min-width: 0; } .s2-r { width: 6.74rem; margin-left: .6rem; } .s2-llist { margin-top: .3rem; } .s2-llist ul li a { display: flex; align-items: center; padding: .2rem 0; border-top: 1px solid rgba(255, 255, 255, .2); } .s2-llist ul li:nth-child(1) a { border-top: none; padding-top: 0; } .s2-llist ul li a .date { width: 0.76rem; height: 0.88rem; background: url(../images/s1-date-bg.png) no-repeat; background-position: center center; background-size: 100% 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-content: center; margin-right: .2rem; } .s2-llist ul li a .date b { display: block; font-size: 0.25rem; font-weight: normal; font-stretch: normal; line-height: 0.35rem; color: #ffffff; } .s2-llist ul li a .date span { display: block; font-size: 0.13rem; font-weight: normal; font-stretch: normal; line-height: 0.2rem; color: #ffffff; } .s2-llist ul li a .info { flex: 1; min-width: 0; } .s2-llist ul li a .info h3 { font-size: 0.18rem; font-weight: normal; line-height: .24rem; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2-llist ul li a .info h3 i { background-image: linear-gradient(#fff, #fff); } .s2-llist ul li a .info p { font-size: 0.16rem; font-weight: normal; line-height: .2rem; color: #ffffff; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .1rem; } .s2-rlist ul { display: flex; justify-content: space-between; margin-top: .3rem; } .s2-rlist ul li { width: 48%; } .s2-rlist ul li a { display: block; } .s2-rlist ul li a .pic { padding-top: 62%; background-position: center center; background-size: cover; background-repeat: no-repeat; } .s2-rlist ul li a .info { padding-top: .25rem; } .s2-rlist ul li a .info h3 { font-size: 0.18rem; font-weight: normal; font-stretch: normal; line-height: 0.24rem; color: #fefefe; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 0.48rem; } .s2-rlist ul li a .info h3 i { background-image: linear-gradient(#fff, #fff); } .s2-rlist ul li a .info p { font-size: 0.16rem; font-weight: normal; line-height: .28rem; color: #ffffff; opacity: 0.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 1.04rem; margin-top: .2rem; padding-top: .2rem; border-top: 1px solid rgba(255, 255, 255, .2); margin-bottom: .2rem; } .s2-rlist ul li a .info div { display: flex; align-items: flex-end; } .s2-rlist ul li a .info div span { font-size: 0.24rem; font-weight: 600; font-stretch: normal; line-height: 0.24rem; letter-spacing: 0rem; color: #ffffff; margin-right: .1rem; } .s2-rlist ul li a .info div b { font-size: 0.16rem; font-weight: normal; font-stretch: normal; line-height: 0.2rem; letter-spacing: 0rem; color: #ffffff; } .section3 { padding: .65rem 0 .95rem 0; background: url(../images/s3-bg.png) no-repeat; background-position: center center; } .s3-c { display: flex; margin-top: .35rem; } .s3-l { flex: 1; min-width: 0; } .s3-l ul li {} .s3-l ul li a { display: block; height: 2.75rem; background: #174490; background-image: linear-gradient(#0062bf, #0062bf), linear-gradient(#174490, #174490); padding: .25rem .3rem 0 .3rem; } .s3-l ul li a h3 { font-size: 0.18rem; font-weight: bold; font-stretch: normal; line-height: 0.32rem; color: #fff; padding-left: .3rem; position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: .64rem; } .s3-l ul li a h3 i { background-image: linear-gradient(#fff, #fff); } .s3-l ul li a h3::before { content: ""; position: absolute; left: 0; top: 0.06rem; width: 0.14rem; height: 0.14rem; border: solid 0.03rem #edf0f6; border-radius: 50%; } .s3-l ul li a .info { margin: .1rem 0 .2rem 0; } .s3-l ul li a .info p { overflow: hidden; text-overflow: ellipsis; /* white-space: nowrap; */ display: flex; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; align-items: center; -webkit-line-clamp: 4; font-size: 0.16rem; font-weight: normal; font-stretch: normal; line-height: 0.33rem; letter-spacing: 0rem; color: rgba(255, 255, 255, .8); } .s3-l ul li a .info p img { width: 0.2rem; margin-right: .1rem; } .s3-l ul li a .date { display: flex; align-items: flex-end; position: relative; } .s3-l ul li a .date::before { content: ""; position: absolute; left: -.3rem; background-color: rgba(255, 255, 255, .2); height: 1px; width: 0.25rem; top: 50%; } .s3-l ul li a .date::after { content: ""; flex: 1; min-width: 0; height: 1px; top: 50%; background-color: rgba(255, 255, 255, .2); margin-right: -.3rem; margin-bottom: .1rem; } .s3-l ul li a .date b { font-size: 0.24rem; font-weight: 600; font-stretch: normal; line-height: 0.24rem; letter-spacing: 0rem; color: #ffffff; margin-right: .1rem; } .s3-l ul li a .date span { font-size: 0.16rem; font-weight: normal; font-stretch: normal; line-height: 0.2rem; letter-spacing: 0rem; color: #ffffff; margin-right: .1rem; } .s3-l ul li a:hover h3 { color: #fff; } .s3-l ul li:nth-child(2) a { background: #fff; box-shadow: 0rem 0.02rem 0.08rem 0rem rgba(10, 11, 24, 0.1); } .s3-l ul li:nth-child(2) a h3 { color: #333333; } .s3-l ul li:nth-child(2) a h3::before { border: solid 0.03rem #0164c1; } .s3-l ul li:nth-child(2) a h3 i { background-image: linear-gradient(#0164c1, #0164c1); } .s3-l ul li:nth-child(2) a .info p { color: rgba(51, 51, 51, .8); } .s3-l ul li:nth-child(2) a .date b { color: #0164c1; } .s3-l ul li:nth-child(2) a .date span { color: #0164c1; } .s3-l ul li:nth-child(2) a:hover h3 { color: #0164c1; } .s3-l ul li:nth-child(2) a .date::before { background-color: #eeeeee; } .s3-l ul li:nth-child(2) a .date::after { background-color: #eeeeee; } .s3-m { width: 4.11rem; } .s3-m a { display: block; } .s3-m a .pic { padding-top: 64.47%; background-position: center center; background-size: cover; background-repeat: no-repeat; } .s3-m a .info { background: #174490; background-image: linear-gradient(#0086ad, #0086ad), linear-gradient(#174490, #174490); padding: .25rem .2rem 0 .2rem; height: 2.65rem; } .s3-m a .info h3 { font-size: 0.18rem; font-weight: bold; font-stretch: normal; line-height: 0.32rem; letter-spacing: 0rem; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s3-m a .info h3 i { background-image: linear-gradient(#fff, #fff); } .s3-m a .info div { margin-top: .2rem; padding-top: .2rem; border-top: 1px solid rgba(255, 255, 255, .2); } .s3-m a .info div p { font-size: 0.14rem; font-weight: normal; font-stretch: normal; line-height: 0.26rem; letter-spacing: 0rem; color: #ffffff; opacity: 0.48; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; max-height: 1.04rem; } .s3-r { width: 3.92rem; } .s3-r a { display: block; } .s3-r a .pic { padding-top: 135.4%; background-position: center center; background-size: cover; background-repeat: no-repeat; } .section4 { background: url(../images/s4-bg.jpg) no-repeat; background-position: center center; background-size: cover; padding: .65rem 0 1.12rem 0; } .section4 .wid { max-width: 1700px; margin: 0 auto; } .s4-c { margin-top: .37rem; } .s4-c ul { overflow: hidden; } .s4-c ul li { float: left; width: 20%; transition: all 0.5s; } .s4-c ul li a { display: block; position: relative; margin: 0 .05rem; } .s4-c ul li a .pic { padding-top: 5rem; background-repeat: no-repeat; background-size: cover; background-position: center center; } .s4-c ul li a .pic::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../images/s4-zzc.png) repeat-x; background-position: center bottom; transform: translateY(100%); opacity: 0; transition: all 0.5s; } .s4-c ul li a .info { position: absolute; left: 0; right: 0; bottom: 0; padding: .35rem .4rem; transform: translateY(100%); opacity: 0; transition: all 0.5s; } .s4-c ul li a .info h3 { font-size: 0.24rem; font-weight: normal; font-stretch: normal; line-height: 0.24rem; color: #ffffff; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s4-c ul li a .info p { font-size: 0.16rem; font-weight: normal; font-stretch: normal; line-height: 0.24rem; color: #ffffff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: .48rem; margin-top: .1rem; } .s4-c ul li a .info:hover h3 { opacity: 1; } .s4-c ul li.on { width: 40%; } .s4-c ul li.on a .pic::after { transform: translateY(0); opacity: 1; } .s4-c ul li.on a .info { transform: translateY(0); opacity: 1; } @media screen and (max-width: 1400px) {} @media screen and (max-width: 1200px) {} @media screen and (max-width: 1024px) { .banner .slick-dots { bottom: 0.1rem; } .banner .slick-prev { left: .1rem; } .banner .slick-next { right: 0.1rem; } .s1-c { display: block; } .s1-l { width: auto; } .s1-l>ul { margin-left: 0; } .s1-l ul li a { padding-left: 0; } .s1-r { padding: .1rem 0; } .s1-rb { margin-left: 0; margin-top: .1rem; padding: .2rem .15rem; } .s1-rb-more a { width: 0.5rem; height: 0.6rem; } .s1-rb-more { transform: rotateX(30%) translateY(50%); } .s1-rb-more { bottom: 0; } .s1-b { margin-top: .25rem; } .s1-b ul li a { margin: 0 .1rem; } .s1-b>ul { margin: 0 -.1rem; padding-bottom: .5rem; } .s2-c { display: block; } .s2-r { width: auto; margin-left: 0; margin-top: .3rem; } .s2-rlist ul li { width: 49%; } .s3-c { display: block; } .s3-l { width: 100%; flex: none; } .s3-m { width: auto; margin: .2rem 0; } .s3-m a .info { height: auto; padding: .2rem .15rem; } .s3-m a .info div ,.s2-rlist ul li a .info p{ margin-top: .1rem; padding-top: .1rem; } .s2-rlist ul li a .info p{ height: 0.94rem; } .s3-r { width: auto; } .s4-c ul { display: block; } .s4-c ul li { float: none; width: auto; } .s4-c ul li.on { width: auto; } .s4-c ul li a .pic { padding-top: 50%; } .s4-c ul li a .info { padding: .15rem; transform: translateY(0); opacity: 1; } .s4-c ul li a .info h3 { font-size: .18rem; } .s4-c ul li a .pic::after { transform: translateY(0); opacity: 1; } .title h2{ font-size: .26rem; line-height: .3rem; margin-left: 0; } .title div:nth-child(1){ display: none; } .title span{ font-size: .2rem; line-height: .2rem; } .banner::after{ height: 0.3rem; } .section1{ padding-top: .5rem; padding-bottom: .35rem; } .section2,.section3,.section4{ padding: .35rem 0; } } @media screen and (max-width: 768px) {} @media screen and (max-width: 640px) {} @media screen and (max-width: 480px) {}