@charset "UTF-8"; body { overflow-x: hidden; } /*banner*/ .banner, .banner div.slick-list, .banner .slick-slide a, .banner .slick-slide a img { width: 100%; height: auto; } .banner { overflow: hidden; position: relative; z-index: 1; } .banner::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; opacity: 0.4; background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%); height: 2.39rem; } .banner .slick-list { position: relative; } .banner .slick-list::after { content: ''; position: absolute; top: 0; left: 0; right: 0; opacity: 0.4; background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%); height: 2.39rem; } .banner .slick-slide a { display: block; overflow: hidden; position: relative; } .banner .slick-slide img { display: block; width: 100%; transform: scale(1.1); transition: all 5s ease-out; } .banner .img_scale img { transform: scale(1); } .banner .slick-dots { bottom: 0.5rem; width: 100%; left: 0; right: 0; text-align: right; padding-right: 5%; font-size: 0; z-index: 9; } .banner .slick-dots li { vertical-align: middle; margin: 0 0.24rem 0 0; padding: 0; transition: all 0.5s; position: relative; } .banner .slick-dots li::after { content: ''; position: absolute; bottom: 0; left: 0.38rem; width: 0; border-bottom: 1px solid #fff; transition: all 0.5s; } .banner .slick-dots li button { font-family: 'sySong'; font-size: 0.2rem; color: #fff; width: auto; } .banner .slick-dots li.slick-active { margin: 0 0.8rem 0 0; } .banner .slick-dots li.slick-active::after { width: 0.6rem; } /* .banner .slick-prev, .banner .slick-next { width: 0.09rem; height: 0.16rem; top: inherit; bottom: 0.65rem; } .banner .slick-prev { left: inherit; right: 50%; margin-right: 0.7rem; background-size: 100% 100%; } .banner .slick-next { right: inherit; left: 50%; margin-left: 0.7rem; background-size: 100% 100%; } */ /*首页样式*/ .title { position: relative; } .title h3 { position: relative; background: url(../images/tit_bg.png) no-repeat 0.26rem bottom; background-size: 2.41rem 0.27rem; } .title h3 b, .title h3 span { display: block; } .title h3 b { position: relative; font-family: 'sySong'; font-size: 0.38rem; font-weight: bold; color: #3D3D3D; padding-top: 0.06rem; margin-left: 0.66rem; } .title h3 span { position: absolute; left: 0; top: 0; font-size: 0.38rem; font-weight: bold; color: rgba(53, 58, 191, 0.07); } .more { position: absolute; right: 0; bottom: 0.06rem; z-index: 2; transition: all 0.3s; } .more:hover { right: 0.05rem; } .more a { display: block; font-size: 0.16rem; color: #353ABF; transition: all 0.3s; } /*主体*/ .section_bg { background: url(../images/bg1.png) no-repeat center; background-size: cover; } .section1 { padding-top: 0.8rem; padding-bottom: 0.65rem; overflow: hidden; } .s1-c { align-items: flex-start; } .s1-l { width: 52.81%; } .s1-l>ul.slick-slider { margin-top: 0.5rem; } .s1-l ul li a { display: block; position: relative; } .s1-l ul li .bg_img { height: 4.34rem; } .s1-l ul li:hover .bg_img .a { transform: scale(1.1); } .s1-l ul li .s1-ltx { position: absolute; right: 0; bottom: 0.8rem; width: 42.95%; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); padding: 0.3rem; z-index: 1; } .s1-l ul li .s1-ltx hr { display: inline-block; border: none; width: 0.38rem; height: 0.04rem; background: linear-gradient(270deg, #2670DE -4%, #C816C5 48%, #F04E34 102%); } .s1-l ul li .s1-ltx h3 { font-size: 0.18rem; font-weight: bold; line-height: 0.27rem; height: 0.54rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; color: #3D3D3D; margin-top: 0.2rem; } .s1-l ul li .s1-ltx>p { font-size: 0.16rem; line-height: 0.24rem; height: 0.72rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; color: #999999; margin-top: 0.1rem; } .s1-l ul li .s1-ltx .s1-ltxd { display: flex; align-items: center; justify-content: space-between; margin-top: 0.25rem; } .s1-l ul li .s1-ltx .s1-ltxd span { display: inline-block; font-family: Georgia; font-size: 0.18rem; color: #353ABF; } .s1-l ul li .s1-ltx .s1-ltxd p { font-family: Georgia; font-size: 0.14rem; color: #3D3D3D; background: url(../images/jdt-more.png) no-repeat right center; background-size: 0.18rem 0.18rem; padding-right: 0.28rem; } /* .s1-l .slick-dots { width: auto; font-size: 0; right: 0.3rem; bottom: 0.35rem; } .s1-l .slick-dots li { width: 0.07rem; height: 0.07rem; border-radius: 50%; background: rgba(255, 255, 255, 0.5); margin: 0 0.1rem; position: relative; } .s1-l .slick-dots li::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.31rem; height: 0.31rem; border-radius: 50%; border: 1px dashed #fff; display: none; } .s1-l .slick-dots li.slick-active { background: #fff; margin: 0 0.2rem; } .s1-l .slick-dots li.slick-active::after { display: block; } .s1-l .slick-dots li button { display: none; } */ .s1-l .slick-prev, .s1-l .slick-next { width: 0.5rem; height: 0.5rem; top: auto; transform: none; bottom: 0.3rem; z-index: 1; transition: all 0.3s; } .s1-l .slick-prev { left: auto; right: 0.5rem; background-color: #F95A41; background-repeat: no-repeat; background-position: center center; background-size: 0.11rem 0.13rem; } .s1-l .slick-next { right: 0; background-color: rgba(53, 58, 191, 0.5); background-repeat: no-repeat; background-position: center center; background-size: 0.11rem 0.13rem; } .s1-l .slick-prev:hover, .s1-l .slick-next:hover { /* transform: scale(1.05); */ } .s1-ld { margin-top: 0.32rem; } .s1-ld ul { margin: 0 -0.15rem; } .s1-ld ul li { padding-bottom: 0.1rem; } .s1-ld ul li a { display: block; margin: 0 0.15rem; position: relative; z-index: 1; } .s1-ld ul li a::before { content: ''; position: absolute; top: 0.1rem; left: -0.1rem; bottom: -0.1rem; right: 0.1rem; border: 1px solid #353ABF; z-index: -1; display: none; } .s1-ld ul li a .bg_img { height: 1.82rem; background-color: #000000; } .s1-ld ul li a .bg_img span { opacity: 0.6; } .s1-ld ul li.slick-current a .bg_img span { opacity: 1; } .s1-ld ul li.slick-current a::before { display: block; } .s1-r { width: 42.5%; } .s1-r .qh-tbox1 { position: relative; padding-top: 0.06rem; } .s1-r .qh-tbox1>span { display: block; position: absolute; left: 0; top: 0; font-size: 0.38rem; font-weight: bold; color: rgba(53, 58, 191, 0.07); } .s1-r .qh-tbox { align-items: flex-end; position: relative; } .s1-r .qh-tit ul { display: flex; align-items: flex-end; } .s1-r .qh-tit ul li { font-family: 'sySong'; font-size: 0.3rem; color: #3D3D3D; padding-left: 0.44rem; margin-left: 0.1rem; cursor: pointer; } .s1-r .qh-tit ul li:first-child { margin-left: 0.26rem; } .s1-r .qh-tit ul li.on { font-size: 0.38rem; font-weight: bold; background: url(../images/tit_bg.png) no-repeat left bottom; background-size: 2.41rem 0.27rem; } .s1-r .qh-more { margin-bottom: 0.05rem; } .s1-r .qh-more a { display: none; } .s1-r .qh-more a.on { display: block; font-size: 0.16rem; color: #353ABF; } .s1-r .qh-bd { position: relative; margin-top: 0.5rem; } .s1-r .qh-bd>ul { position: absolute; left: 0; right: 0; top: 0; width: 100%; opacity: 0; z-index: 8; } .s1-r .qh-bd>ul.on { position: relative; z-index: 9; opacity: 1; } .s1-r .qh-bd ul li a { display: flex; align-items: center; padding: 0.183rem 0; border-bottom: 1px solid #D8D8D8; transition: all 0.3s; } .s1-r .qh-bd ul li:first-child a { border-top: 1px solid #D8D8D8; } .s1-r .qh-bd ul li:first-child a { border-top: none; } .s1-r .qh-bd ul li a .s1-rdate { width: 0.92rem; height: 0.92rem; display: flex; flex-direction: column; align-items: center; background: url(../images/s1-rdatebg.png) no-repeat; background-size: 100% 100%; font-family: Georgia; color: #fff; transition: all 0.3s; } .s1-r .qh-bd ul li a .s1-rdate p { font-size: 0.32rem; margin-top: 0.13rem; } .s1-r .qh-bd ul li a .s1-rdate span { font-size: 0.16rem; } .s1-r .qh-bd ul li a .s1-rtx { flex: 1; min-width: 0; padding-left: 0.24rem; } .s1-r .qh-bd ul li a .s1-rtx h3 { font-size: 0.18rem; font-weight: normal; line-height: 0.26rem; height: 0.52rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; color: #3D3D3D; transition: all 0.3s; } .s1-r .qh-bd ul li a .s1-rtx p { font-size: 0.16rem; line-height: 0.32rem; color: #999999; margin-top: 0.05rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; transition: all 0.3s; } .s1-r .qh-bd ul li:hover a { background: url(../images/s1-rbg.png) no-repeat; background-size: 100% 100%; padding: 0.183rem 0.55rem; } .s1-r .qh-bd ul li:hover a .s1-rdate { background: #F95341; border-radius: 50%; } .s1-r .qh-bd ul li:hover a .s1-rtx h3 { color: #fff; font-weight: bold; } .s1-r .qh-bd ul li:hover a .s1-rtx p { color: #E7E7E7; } .section2 { padding: 0.8rem 0 0.8rem; overflow: hidden; } .section2 .title { /* float: left; */ /* width: 2.4rem; */ /* margin-top: 0.4rem; */ } .section2 .title h3 { /* background: url(../images/tit_bg1.png) no-repeat; */ /* background-size: 0.27rem 2.41rem; */ /* padding-top: 0.44rem; */ } .section2 .title h3 span { /* left: 0.2rem; */ /* width: 1.46rem; */ /* bottom: 0; */ /* top: inherit; */ } .section2 .title h3 b { /* width: 0.4rem; */ /* margin-left: 0; */ /* padding-top: 0; */ /* line-height: 1.2; */ } .section2 .more { /* bottom: -0.3rem; */ } .s2-c { overflow: hidden; } .s2-l{ width: 51.68%; position: relative; } .s2-r{ width: 46%; } .gg-list { margin-top: 0.15rem; } .gg-list li { font-size: 0.18rem; line-height: 0.74rem; padding: 0 0.1rem; border-bottom: 1px dashed #ccc; } .gg-list li span { float: right; font-size: 0.15rem; color: #666; background: url(../images/time3.png) no-repeat left center; background-size: 0.13rem 0.13rem; padding-left: 0.23rem; transition: all 0.4s; } .gg-list li a { display: block; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; position: relative; padding-left: 0.17rem; transition: all 0.4s; } .gg-list li a::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 0.07rem; height: 0.07rem; background: #353abf; } .gg-list li:hover span, .gg-list li:hover a { color: #5c60cb; } /* .s2-c .slick-prev, .s2-c .slick-next { top: inherit; transform: none; bottom: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid #353ABF; } .s2-c .slick-prev { left: inherit; right: 50%; margin-right: 0.15rem; background-repeat: no-repeat; background-position: center center; background-size: 0.21rem auto; } .s2-c .slick-next { right: inherit; left: 50%; margin-left: 0.15rem; background-repeat: no-repeat; background-position: center center; background-size: 0.21rem auto; } .s2-c .slick-prev:hover, .s2-c .slick-next:hover { background-color: #353ABF; } .s2-c .slick-prev:hover { } .s2-c .slick-next:hover { } */ .section3 { background: url(../images/s3-ddbg.jpg) no-repeat center bottom; background-size: 100% 45.37%; padding-bottom: 0.63rem; align-items: flex-start; } .s3-l { width: 49.21%; } .s3-l a { display: block; } .s3-l a .bg_img { height: 5.32rem; } .s3-l a .bg_img::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0.55rem; height: 0.54rem; transform: translate(-50%, -50%); background: url(../images/s3-bf.png) no-repeat; background-size: 100% 100%; z-index: 1; } .s3-r { flex: 1; min-width: 0; padding-right: 8.33%; padding-left: 0.4rem; padding-top: 0.44rem; } .s3-r .title h3 b { width: 1.1rem; } .s3-r .title h3 span { left: 1.2rem; top: 0.4rem; } .s3-r .title h3 span i { display: block; font-style: normal; font-weight: bold; padding-left: 1rem; } .s3-r .more { bottom: 0.4rem; } .s3-r>p { margin-top: 0.54rem; font-size: 0.16rem; line-height: 0.28rem; height: 0.84rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; color: #999999; } .s3-rd ul { display: flex; margin-top: 0.8rem; } .s3-rd ul li { width: 33.33%; } .s3-rd ul li a { display: flex; flex-direction: column; align-items: center; } .s3-rd ul li a img { display: block; width: 1.1rem; height: 1rem; transition: all 0.5s; } .s3-rd ul li:hover a img { transform: scale(1.1); } .s3-rd ul li a h3 { display: inline-block; font-size: 0.2rem; font-weight: normal; color: #FFFFFF; margin-top: 0.2rem; background: url(../images/s3-rsj.png) no-repeat right center; background-size: 0.13rem 0.08rem; padding-right: 0.23rem; } .section4 { padding-top: 0.8rem; padding-bottom: 1.5rem; background: url(../images/section4-bg.png) no-repeat center; background-size: cover; } .s4-c { align-items: flex-start; position: relative; z-index: 1; } .s4-l { width: 51.68%; position: relative; } .s4-l-l { margin-top: 0.48rem; } .s4-l-l li a { display: flex; } .s4-l-l li a .s4-lpic { width: 3.76rem; height: 3.76rem; border-radius: 50%; overflow: hidden; background: url(../images/ld_bg.png) no-repeat; background-size: 100% 100%; } .s4-l-l li a .s4-lpic .pic { padding-top: 100%; } .s4-l-l li a .s4-ltx { flex: 1; min-width: 0; padding-left: 0.32rem; padding-top: 0.33rem; } .s4-l-l li a .s4-ltx hr { display: inline-block; border: none; width: 0.38rem; height: 0.04rem; background: linear-gradient(270deg, #2670DE -4%, #C816C5 48%, #F04E34 102%); } .s4-l-l li a .s4-ltx h3 { font-size: 0.36rem; font-weight: bold; line-height: 1; color: #3A3A3A; margin-top: 0.3rem; } .s4-l-l li a .s4-ltx h4 { font-size: 0.24rem; font-weight: normal; line-height: 0.28rem; color: #3A3A3A; margin-top: 0.3rem; } .s4-l-l li a .s4-ltx p { margin-top: 0.24rem; font-size: 0.16rem; line-height: 0.28rem; height: 0.84rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; color: #999999; } .s4-l .slick-prev, .s4-l .slick-next { top: inherit; transform: none; bottom: 0.32rem; width: 0.4rem; height: 0.4rem; } .s4-l .slick-prev { left: 4.08rem; background: url(../images/s4-prev.png) no-repeat; background-size: 100% 100%; } .s4-l .slick-next { background: url(../images/s4-next.png) no-repeat; background-size: 100% 100%; } .s4-state { position: absolute; right: 0.6rem; bottom: 0.5rem; width: calc(100% - 5.25rem); margin-top: 76px; } .s4-state div { height: 0.04rem; background: #D8D8D8; position: relative; } .s4-state span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #353ABF; transition: all 0.3s; } .s4-r { width: 46%; } .s4-rbox { align-items: flex-start; margin-top: 0.5rem; } .s4-r-l { width: 46.19%; } .s4-r-l ul li { margin-top: 0.23rem; } .s4-r-l ul li:first-child { margin-top: 0; } .s4-r-l ul li a { display: block; overflow: hidden; position: relative; } .s4-r-l ul li a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .s4-r-l ul li a .bg_img { height: 1.1rem; } .s4-r-l ul li a .bg_img img { transition: all 0.5s; } .s4-r-l ul li:hover a .bg_img img { transform: scale(1.1); } .s4-r-l ul li a h3 { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.22rem; font-weight: normal; color: #FFFFFF; z-index: 1; } .s4-r-r { width: 50.5%; } .s4-r-r li a { display: block; background: url(../images/s4-r-rbg.png) no-repeat; background-size: cover; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.13); } .s4-r-r li a .bg_img { height: 2.33rem; } .s4-r-r li a .s4-rtx { overflow: hidden; padding: 0.17rem; } .s4-r-r li a .s4-rtx h3 { font-size: 0.2rem; font-weight: bold; color: #3D3D3D; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .s4-r-r li a .s4-rtx p { font-size: 0.14rem; line-height: 0.22rem; height: 0.44rem; color: #999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin-top: 0.1rem; } .s4-r-r li a .s4-rtx span { display: block; float: right; font-size: 0; width: 0.19rem; height: 0.19rem; background: url(../images/s4-rgd.png) no-repeat; background-size: 100% 100%; margin-top: 0.1rem; } @media screen and (max-width:1600px) { .section2 { padding: 0.8rem 0 0.8rem 5.33%; } } @media screen and (max-width:1400px) { .section2 { padding: 0.8rem 0 0.8rem 3.2%; } } @media screen and (max-width: 1024px) { .banner .slick-dots { bottom: 0.3rem; padding-right: 0.1rem; } .title h3 b { font-size: 0.3rem; } .title h3 span { font-size: 0.3rem; } .section1 { padding-top: 0.3rem; padding-bottom: 0.3rem; } .s1-l { width: 100%; } .s1-l ul li .bg_img { height: auto; padding-top: 51.36%; } .s1-r { width: 100%; margin-top: 0.4rem; } .s1-r .qh-bd ul li a .s1-rtx h3 { height: auto; max-height: 0.52rem; } .s1-r .qh-tbox1>span { font-size: 0.3rem; } .s1-r .qh-tit ul li.on { font-size: 0.34rem; } .section2 { padding: 0.3rem 0; } .section2 .more { bottom: 0.06rem; } .s2-c { max-width: 96%; margin: 0 auto; margin-top: 0.3rem; } .s2-l { width: 100%; } .s2-r { width: 100%; } .s2-c ul { right: 0; } .section3 { background: none; padding-bottom: 0; } .s3-l { width: 94%; margin: 0 auto; order: 2; margin-top: 0.3rem; } .s3-l a .bg_img { height: auto; padding-top: 56.29%; } .s3-r { flex: none; width: 100%; max-width: 94%; margin: 0 auto; order: 1; padding-right: 0; padding-left: 0; padding-top: 0; } .s3-r .title h3 b { width: auto; } .s3-r .title h3 span { left: 0; top: 0; } .s3-r .title h3 span i { display: inline-block; padding-left: 0; } .s3-r .more { bottom: 0.06rem; } .s3-r>p { height: auto; max-height: 0.84rem; } .s3-rd ul { margin-top: 0.3rem; background: url(../images/s3-ddbg.jpg) no-repeat center bottom; background-size: cover; padding: 0.2rem 0; } .section4 { padding-top: 0.3rem; padding-bottom: 0.4rem; } .s4-l { width: 100%; } .s4-r { width: 100%; margin-top: 0.4rem; } .s4-r-l { width: 100%; } .s4-r-r { width: 100%; margin-top: 0.3rem; } .s4-r-r li a .bg_img { height: auto; padding-top: 61.8%; } } @media screen and (max-width: 768px) {} @media screen and (max-width: 640px) { .s1-l ul li .s1-ltx { position: static; width: 100%; box-shadow: none; } .s1-l .slick-prev, .s1-l .slick-next { bottom: 2.8rem; } .s1-ld { display: none; } .s4-l-l li a { flex-wrap: wrap; } .s4-l-l li a .s4-lpic { margin: 0 auto; } .s4-l-l li a .s4-ltx { flex: none; width: 100%; } .s4-state { position: static; width: 75%; margin: 0 auto; margin-top: 0.3rem; } .s4-l .slick-prev, .s4-l .slick-next { bottom: -0.5rem; } .s4-l .slick-prev { left: 0; } } @media screen and (max-width: 480px) {} @media screen and (max-width: 375px) {} @media screen and (max-width: 320px) {}