@charset "utf-8"; .banner{ position: relative; /* margin-top: 1.17rem; */ } .banner a{ position: relative; display: block; height: 100vh; overflow: hidden; } .banner a img{ display: block; width: 100%; height: 100vh; transform: scale(1.175); transition: 6s; object-fit: cover; } .banner .swiper-slide-active img{ transform: scale(1); } .banner a .txt{ position: absolute; left: 0; right: 0; bottom: .51rem; z-index: 3; } .banner a .txt h3{ font-size: .24rem; color: #ffffff; line-height: .3rem; font-weight: 700; max-width: 50%; } .banner a:after{ position: absolute; content: ''; left: 0; right: 0; bottom: 0; height: 14.95%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); } .banner .page{ font-size: 0; bottom: .3rem; } .banner .page span{ width: .1rem; height: .1rem; margin: 0 .08rem; background: transparent no-repeat 50%/100%; border: 1px solid #fff; opacity: 1; vertical-align: middle; } .banner .page span.active{ width: .3rem; height: .3rem; background-image: ; border-color: transparent; } .index-s1 .top{ position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: .45rem; } .index-s1 .top .left{ width: 1.42rem; position: relative; z-index: 3; } .index-s1 .top .left:after{ position: absolute; content: ''; top: -.15rem; right: -.095rem; width: .15rem; height: .15rem; background: no-repeat 50%/100% 100%; } .index-s1 .top .left .img-box img{ display: block; width: 100%; height: 1.14rem; margin-top: -.15rem; } .index-s1 .top .right{ width: calc(100% - 1.42rem); position: relative; z-index: 2; padding: .245rem .58rem; display: flex; align-items: center; justify-content: space-between; } .index-s1 .top .right .ll{ width: calc(100% - .5rem); } .list1w a{ display: block; font-size: .3rem; line-height: .5rem; color: #1b3d98; text-align: center; transition: .5s; } .index-s1 .top .right .rr{ width: .25rem; } .index-s1 .top .right .rr img{ display: block; width: 100%; } .index-s1 .top .right:after{ position: absolute; content: ''; right: 0; top: 0; bottom: 0; left: -1.12rem; background:#fff no-repeat bottom center/100% 100%; border-radius: 1rem; z-index: -1; box-shadow: 0 .04rem .1rem 0 rgba(0, 0, 0, 0.1); } .title001{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; } .title001 .tit-box{ display: flex; align-items: flex-start; } .title001 .tit-box img{ display: block; width: 1.09rem; margin-right: .6rem; } .title001 .tab-tit{ display: flex; flex-wrap: wrap; align-items: center; } .title001 .li{ position: relative; margin-left: .3rem; padding-top: .4rem; cursor: pointer; } .title001 .li:first-child{ margin-left: 0; } .title001 .li h2{ display: flex; font-size: .3rem; line-height: .4rem; color: #999999; font-weight: 700; transition: .3s; position: relative; z-index: 2; } .title001 .li h4{ position: absolute; top: 0; left: .4rem; padding-left: .27rem; padding-right: .14rem; font-size: .14rem; line-height: .3rem; color: #1b3d98; text-transform: uppercase; height: .3rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: .5s; } .title001 .li h4:before{ position: absolute; content: ''; left: 0; bottom: 0; width: .19rem; height: .19rem; background: no-repeat 50%/100%; } .title001 .li h4:after{ position: absolute; content: ''; right: 0; bottom: -.03rem; width: .07rem; height: .07rem; background: no-repeat 50%/100%; } .title001 .li h4 em{ position: absolute; left: .19rem; right: .07rem; bottom: 0; height: 1px; background: rgba(27, 61, 152, 0.3); } .title001 .li:after{ position: absolute; content: ''; right: -0.1rem; bottom: -0.09rem; width: .38rem; height: .22rem; background: no-repeat 50%/100%; opacity: 0; visibility: hidden; transition: .5s; } .title001 .tzgg:after{ position: absolute; content: ''; right: 0.46rem; bottom: -0.09rem; width: .38rem; height: .22rem; background: no-repeat 50%/100%; opacity: 0; visibility: hidden; transition: .5s; } .title001 .li.active h4{ opacity: 1; visibility: visible; } .title001 .li.active h2{ color: #333333; font-size: .36rem; } .title001 .li.active h2 span{ color: #1b3d98; } .title001 .li.active:after{ opacity: 1; visibility: visible; } .title001 .more{ position: absolute; right: 0; top: .52rem; } .title001 .more a{ display: none; font-size: .2rem; line-height: .28rem; color: #1b3d98; background: -webkit-linear-gradient(250deg, #153d8d 25%, #378cda 85%), linear-gradient(250deg, #802fb6 15%, #1539b2 85%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-weight: 700; } .title001 .more a.active{ display: block; } .index-s1 .con .left{ width: 54.5%; opacity: 0; } .list2w a{ display: block; background: linear-gradient(262deg, #153d8d 25%, #378cda 85%); } .list2w a .pic{ padding-top: 5.29rem; } .list2w a h3{ font-size: .2rem; line-height: .3rem; color: #ffffff; } .list2w a p{ font-size: .16rem; line-height: .24rem; color: rgba(255, 255, 255, 0.6); margin-top: .1rem; } .list2w a .txt{ padding: .3rem 2.56rem .36rem .36rem; background: repeat-x 50% ; } .list2w .btn-box{ position: absolute; right: .39rem; bottom: .42rem; display: flex; align-items: center; } .list2w .btn{ position: static; width: .06rem; height: .1rem; transform: none; background: no-repeat 50%/100%; opacity: .4; transition: .5s; } .list2w .prev{ background-image: ; } .list2w .next{ background-image: ; } .list2w .page{ font-size: 0; position: static; } .list2w .page span{ width: .12rem; height: .12rem; margin: 0 .1rem; background: #fff; opacity: .4; } .list2w .page span.active{ opacity: 1; } .index-s1 .con .right{ width: 40.5%; } .list_box1 li a{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: .11rem .22rem .11rem .25rem; } .list_box1 li time{ display: flex; width: .81rem; height: .81rem; align-items: center; justify-content: center; flex-direction: column; color: #1b3d98; text-align: center; background: no-repeat 50%/100% 100%; transition: .5s; } .list_box1 li time span{ display: block; font-size: .14rem; line-height: 1.5; font-family: 'sourcehanserifcn-bold',sans-serif; /* margin-top: -.08rem; */ } .list_box1 li time em{ display: block; font-size: .12rem; line-height: 1; font-family: 'sourcehanserifcn-bold',sans-serif; margin-top: .05rem; } .list_box1 li .txt-box{ width: calc(100% - 1.02rem); display: flex; align-items: center; justify-content: space-between; } .list_box1 li .txt-box .txt{ width: calc(100% - .66rem); } .list_box1 li .txt-box h3{ font-size: .2rem; line-height: .3rem; color: #3d3d3d; max-height: .6rem; transition: .5s; } .list_box1 li .txt-box .rr{ width: .46rem; height: .91rem; border-left: 1px dashed transparent; background: no-repeat right center/.12rem; transition: .5s; } .list_box1 li{ position: relative; margin-top: .14rem; opacity: 0; } .list_box1 li:first-child{ margin-top: 0; } .list_box1 li:after{ position: absolute; content: ''; left: 0; right: 100%; top: 0; bottom: 0; background: linear-gradient(260deg, #153d8d 25%, #378cda 85%), #1b3d98; opacity: 0; visibility: hidden; transition: .5s; } .list_box1 li.active time{ color: #fff; background-image: ; } .list_box1 li.active .txt-box h3{ color: #fff; } .list_box1 li.active .txt-box .rr{ border-color: rgba(255, 255, 255, 0.5); background-image: ; } .list_box1 li.active:after{ opacity: 1; visibility: visible; right: 0; } .index-s1 .tab-cont .gd{ margin-top: .2rem; display: none; justify-content: center; } .index-s1 .tab-cont .gd a{ display: block; font-size: .16rem; line-height: .42rem; color: #fff; font-weight: 700; text-align: center; width: 1.4rem; background: linear-gradient(255deg, #153d8d 25%, #378cda 85%); border-radius: 1rem; position: relative; z-index: 2; } .index-s1 .tab-cont .gd a:after { position: absolute; content: ''; left: -.05rem; right: -.05rem; top: -.05rem; bottom: -.05rem; background: linear-gradient(255deg, rgba(21, 61, 141, 0.2) 25%, rgba(55, 140, 218, 0.2) 85%); border-radius: 1rem; z-index: -1; } .index-s1 .tab-cont{ margin-top: .46rem; } .index-s1 .tab-cont .child{ opacity: 0; height: 0; transform: scaley(0); } .index-s1 .tab-cont .child.active{ opacity: 1; height: auto; transform: none; } .index-s1 .tab-cont .child.active .con .left, .index-s1 .tab-cont .child.active .list_box1 li{ animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .index-s1 .tab-cont .child.active .list_box1 li:nth-child(1){ animation-delay: .1s; } .index-s1 .tab-cont .child.active .list_box1 li:nth-child(2){ animation-delay: .2s; } .index-s1 .tab-cont .child.active .list_box1 li:nth-child(3){ animation-delay: .3s; } .index-s1 .tab-cont .child.active .list_box1 li:nth-child(4){ animation-delay: .4s; } .index-s1 .tab-cont .child.active .list_box1 li:nth-child(5){ animation-delay: .5s; } .index-s1 .tab-cont .child.active .list_box1 li:nth-child(6){ animation-delay: .6s; } .index-s1 .bot{ margin-top: .82rem; } .index-s1 { background: no-repeat right bottom ; } .list3w a{ display: block; position: relative; z-index: 2; padding: .28rem .4rem .34rem; } .list3w a time{ margin-left: -.4rem; display: block; font-size: .18rem; color: #1b3d98; line-height: .34rem; width: 1.27rem; text-align: center; background: #edf3ff; border-radius: 0 1rem 1rem 0; font-family: 'sourcehanserifcn-bold',sans-serif; transition: .5s; } .list3w a h3{ margin-top: .2rem; font-size: .18rem; line-height: .3rem; color: #323232; height: .6rem; transition: .5s; } .list3w a i{ margin-top: .22rem; display: block; border-top: 1px dashed #e8e8e8; transition: .5s; } .list3w a p{ margin-top: .12rem; font-size: .16rem; line-height: .3rem; color: #9f9f9f; height: .6rem; transition: .5s; } .list3w .con:after{ position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(238deg, #153d8d 25%, #378cda 85%); opacity: 0; visibility: hidden; transition: .5s; } .list3w .con:before{ position: absolute; content: ''; left: 0; bottom: 0; width: .82rem; height: .13rem; background: no-repeat 50%/100% 100%; opacity: 0; visibility: hidden; transition: .5s; z-index: 1; } .list3w .con{ position: relative; background: linear-gradient(90deg, rgba(237, 243, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); } .list3w .con:hover:before, .list3w .con:hover:after{ opacity: 1; visibility: visible; } .list3w .con:hover a time{ background: #ffffff; } .list3w .con:hover a h3{ color: #fff; font-weight: 700; } .list3w .con:hover a i{ border-top: 1px solid rgba(255, 255, 255, 0.2); } .list3w .con:hover a p{ color: rgba(255, 255, 255, 0.8); } .list3w .btn-box{ position: relative; padding-left: 3.39rem; padding-right: 4.29rem; display: flex; align-items: center; justify-content: space-between; } .list3w .btn{ position: static; width: .9rem; height: .9rem; background: #edf3ff no-repeat 50%/ .41rem; transform: none; transition: .5s; } .list3w .prev{ background-image: ; } .list3w .next{ background-image: ; } .list3w .prev:hover{ background-image: ; } .list3w .next:hover{ background-image: ; } .list3w .btn-box:before{ position: absolute; content: ''; top: 50%; right: calc(100% - 3.39rem); width: 100vw; border-top: 1px dashed #e8e8e8; transform: translatey(-50%); } .list3w .btn-box:after{ position: absolute; content: ''; top: 50%; left: calc(100% - 4.29rem); width: 100vw; border-top: 1px dashed #e8e8e8; transform: translatey(-50%); } .list3w{ width: calc(100% 1.1rem); margin-right: -1.1rem; } .index-s2 .tab-cont{ margin-top: .42rem; } .index-s2 .tab-cont .child{ opacity: 0; height: 0; transform: scaley(0); } .index-s2 .tab-cont .child.active{ opacity: 1; height: auto; transform: none; } .index-s2 { margin-top: .87rem; } .index-s3 .left{ width: 50%; } .index-s3 .left .img-box{ position: relative; } .index-s3 .left .img-box a{ display: block; position: relative; z-index: 2; } .index-s3 .left .img-box .pic{ padding-top: 6rem; } .index-s3 .left .img-box .txt{ position: absolute; left: 0; right: 0; bottom: .23rem; padding: 0 .39rem; z-index: 5; } .index-s3 .left .img-box .txt h3{ font-size: .2rem; line-height: .3rem; color: #fff; } .index-s3 .left .img-box .txt h6{ display: flex; align-items: center; font-size: .16rem; line-height: .24rem; color: #fff; margin-top: .06rem; } .index-s3 .left .img-box .txt h6 img{ display: block; width: .23rem; margin-right: .1rem; } .index-s3 .left .img-box .play{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: .68rem; height: .68rem; margin: auto; background: no-repeat 50%/100%; z-index: 5; } .index-s3 .left .img-box a:after{ position: absolute; content: ''; left: 0; right: 0; bottom: 0; height: 63.66%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%); } .index-s3 .left .img-box:after{ position: absolute; content: ''; width: 100%; height: 100%; left: -.2rem; top: -.2rem; background: no-repeat 50%/cover; } .index-s3 .right{ width: 44.875%; padding-top: .5rem; } .index-s3 .right .para{ font-size: .18rem; line-height: .36rem; color: #666666; height: 1.8rem; text-indent: 2em; overflow: hidden; } .list_box2 ul{ position: relative; height: 5.58rem; } .list_box2 li{ position: absolute; } .list_box2 li a{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .list_box2 li a .txt h3{ font-size: .28rem; line-height: .36rem; color: #fff; font-family: 'sourcehanserifcn-bold',sans-serif; } .list_box2 li a .txt h4{ font-size: .16rem; line-height: .24rem; color: #ffffff; font-family: 'sourcehanserifcn-bold',sans-serif; opacity: .4; margin-top: .07rem; } .list_box2 li a .img-box{ display: flex; align-items: center; } .list_box2 li a .img-box img{ display: block; width: .87rem; flex-shrink: 0; } .list_box2 li a .img-box i{ display: block; width: 1.3rem; height: .09rem; background: no-repeat right center/100% 100%; } .list_box2 li:nth-child(1){ left: 0; top: 21.5%; width: 44%; height: 56.63%; background: #0a5597; } .list_box2 li:nth-child(1) a{ padding: .41rem .38rem .53rem; } .list_box2 li:nth-child(2){ left: 44%; top: 0%; width: 56%; height: 43.36%; background: #e1bc68; } .list_box2 li:nth-child(2) a{ padding: .32rem .51rem .31rem; } .list_box2 li:nth-child(3){ left: 44%; top: 43.36%; width: 44%; height: 56.63%; background: #21a382; } .list_box2 li:nth-child(3) a{ padding: .46rem .38rem .63rem; } @keyframes doudong { 0% { transform: rotate(0deg) } 10%, 20%, 30% { transform: rotate(-5deg) } 15%, 25%, 35% { transform: rotate(5deg) } 40% { transform: rotate(-3deg) } 45% { transform: rotate(3deg) } 50% { transform: rotate(0deg) } 100% { transform: rotate(0deg) } } @keyframes slideinfromright { 0% { transform: scalex(0); opacity: 0; transform-origin: right center; } 100% { transform: scalex(1); opacity: 1; transform-origin: right center; } } .list_box2 li:hover a .img-box img{ animation: doudong 1.5s linear forwards; } .list_box2 li:hover a .img-box i{ animation: slideinfromright 0.5s ease-in-out forwards; } .list_box2{ margin-top: .3rem; } .index-s3 .title001 .li{ margin-left: 0; } .index-s3 .content{ margin-top: .54rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; } .index-s3{ margin-top: .9rem; padding: .91rem 0 0; height: 9.6rem; background: no-repeat 50%/cover; } .list_box3 ul{ display: flex; flex-wrap: wrap; } .list_box3 li{ width: 32.25%; margin-left: 1.625%; opacity: 0; } .list_box3 li:first-child{ margin-left: 0; } .list_box3 li a{ display: flex; flex-direction: column; position: relative; } .list_box3 li .pic{ padding-top: 3.3rem; } .list_box3 li h3{ font-size: .2rem; line-height: .26rem; color: #ffffff; height: .52rem; font-weight: 700; } .list_box3 li .txt i{ display: block; height: 1px; background: #ffffff; opacity: .2; margin-top: .23rem; } .list_box3 li p{ font-size: .16rem; line-height: .3rem; color: #fff; opacity: .6; -webkit-line-clamp: 3; height: .9rem; margin-top: .2rem; } .list_box3 li h6{ margin-top: .22rem; display: flex; justify-content: flex-end; } .list_box3 li h6 img{ display: block; width: .36rem; } .list_box3 li .txt *{ position: relative; z-index: 2; } .list_box3 li .txt:before{ position: absolute; content: ''; left: 50%; bottom: 100%; border: .14rem solid transparent; border-bottom-color: #0158a8; transform: translatex(-50%); transition: .5s; } .list_box3 li .txt:after{ position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 100%; background: #087ca2; transition: .5s; opacity: 0; visibility: hidden; } .list_box3 li .txt{ position: relative; z-index: 2; padding: .43rem .35rem ; background: #0158a8; } .list_box3 li:hover .txt:after{ bottom: 0; opacity: 1; visibility: visible; } .list_box3 li:nth-child(2n) a{ flex-direction: column-reverse; } .list_box3 li:nth-child(2n) .txt:before{ bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: #0158a8; } .list_box3 li:hover .txt:before{ border-bottom-color: #087ca2; } .list_box3 li:nth-child(2n):hover .txt:before{ border-bottom-color: transparent; border-top-color: #087ca2; } .index-s4 .tab-cont{ margin-top: .41rem; } .index-s4 .tab-cont .child{ display: none; } .index-s4 .tab-cont .child.active{ display: block; } .index-s4 .tab-cont .child.active .list_box3 li{ animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .index-s4 .tab-cont .child.active .list_box3 li:nth-child(2){ animation-delay: .1s; } .index-s4 .tab-cont .child.active .list_box3 li:nth-child(3){ animation-delay: .2s; } .index-s4{ padding: 1.7rem 0 1.01rem; } .index-s5 .left{ width: 50%; margin-top: 2.2rem; } .index-s5 .left .gd{ position: relative; margin-top: -.19rem; display: flex; justify-content: center; z-index: 3; } .index-s5 .left .gd a{ display: block; font-size: .18rem; line-height: .47rem; color: #fff; font-weight: 700; text-align: center; width: 1.91rem; background: linear-gradient(255deg, #153d8d 25%, #378cda 85%); border-radius: 1rem; position: relative; z-index: 2; } .index-s5 .left .gd a:after{ position: absolute; content: ''; left: -.05rem; right: -.05rem; top: -.05rem; bottom: -.05rem; background: linear-gradient(255deg, rgba(21, 61, 141, 0.2) 25%, rgba(55, 140, 218, 0.2) 85%); border-radius: 1rem; z-index: -1; } .index-s5 .map-box{ position: relative; width: 100%; } .index-s5 .map-box img{ display: block; width: 100%; } .index-s5 .map-box .map{ position: absolute; z-index: 5; } .index-s5 .map-box .map span{ display: block; width: .1rem; height: .1rem; position: relative; cursor: pointer; } .index-s5 .map-box .map span:before{ position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; background: #1b3d98; border-radius: 50%; } .index-s5 .map-box .map span:after{ position: absolute; content: ''; left: 50%; bottom: .05rem; width: .24rem; height: .3rem; background: no-repeat 50%/100% 100%; margin-left: -.12rem; opacity: 0; visibility: hidden; transition: .5s; animation: o-up-down 1.8s infinite linear; } @keyframes o-up-down { 0% { transform: translatey(0); } 50%{ transform: translatey(-5px); } 100% { transform: translatey(0); } } .index-s5 .map-box .map p{ padding: 0 .1rem; min-width: 1.27rem; height: .48rem; line-height: .48rem; text-align: center; border-radius: .2rem 0 0 0; background: linear-gradient(249deg, #153d8d 25%, #378cda 85%), #d8d8d8; font-size: .16rem; color: #fff; position: absolute; left: .25rem; bottom: .05rem; z-index: 6; opacity: 0; visibility: hidden; transition: .5s; } /**/ .index-s5 .map-box .map1{ top: 72.33%; left: 37.6%; } .index-s5 .map-box .map2{ top: 41.67%; left: 33.3375%; } .index-s5 .map-box .map3{ top: 70.77%; left: 56.6%; } .index-s5 .map-box .map4{ top: 39.66%; left: 65.52%; } .index-s5 .map-box .map5{ top: 22.83%; left: 34.89%; } .index-s5 .map-box .map6{ top: 23.23%; left: 59.29%; } .index-s5 .map-box .map7{ top: 27.33%; left: 57.6%; } .index-s5 .map-box .map8{ top: 36.66%; left: 30.66%; } .index-s5 .map-box .map9{ top: 33%; left: 45.7875%; } .index-s5 .map-box .map10{ top: 56%; left: 77.7875%; } .index-s5 .map-box .map11{ top: 30.7%; left: 40.7875%; } .index-s5 .map-box .map12{ top: 26%; left: 44.7875%; } .index-s5 .map-box .map13{ top: 46.7%; left: 79.0875%; } .index-s5 .map-box .map14{ top: 51.2%; left: 11.4875%; } .index-s5 .map-box .map15{ top: 44%; left: 14.7875%; } .index-s5 .map-box .map16{ top: 62%; left: 14.7875%; } .index-s5 .map-box .map17{ top: 33%; left: 67.7875%; } .index-s5 .map-box .map18{ top: 22%; left: 39.7875%; } .index-s5 .map-box .map19{ top: 24%; left: 48.7875%; } .index-s5 .map-box .map.active p{ opacity: 1; visibility: visible; } .index-s5 .map-box .map.active span:before{ opacity: 0; visibility: hidden; } .index-s5 .map-box .map.active span:after{ opacity: 1; visibility: visible; } .index-s5 .map-box .map.active{ z-index: 9; } .index-s5 .right{ width: 50%; } .index-s5 .map-img{ position: relative; height: 9.6rem; } .index-s5 .map-img .map-img-item{ width: 100%; height: 100%; display: none; } .index-s5 .map-img .map-img-item.active{ display: block; } .index-s5 .content{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; } .index-s5 .map-mask{ display: none; } .index-s5 .top{ position: absolute; left: 0; right: 0; top: .83rem; z-index: 5; } .index-s5 .title001 .li{ margin-left: 0; } .index-s5{ position: relative; background: no-repeat left center/cover; } .list4w a{ display: block; } .list4w a .pic{ padding-top: 5.71rem; } .list4w a .pic:before { position: absolute; top: 0; left: -90%; display: block; content: ""; width: 50%; height: 100%; opacity: .25; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 53) 50%, rgba(255, 255, 255, 0) 70%); transform: skewx(-25deg); z-index: 3; } .list4w .btn{ width: .41rem; height: .41rem; background: no-repeat 50%/100%; } .list4w .prev{ left: -.74rem; background-image: ; } .list4w .next{ right: -.74rem; background-image: ; } .list4w a:hover .pic:before{ animation: shine 1s } @keyframes shine { 100% { left: 125% } } .list4w{ position: relative; margin-top: .47rem; } .list5w a{ display: block; transition: .5s; } .list5w a .pic{ padding-top: .95rem; } .list5w a .pic:before { position: absolute; top: 0; left: -90%; display: block; content: ""; width: 50%; height: 100%; opacity: .25; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 53) 50%, rgba(255, 255, 255, 0) 70%); transform: skewx(-25deg); z-index: 3; } .list5w .btn{ width: .12rem; height: .23rem; background: no-repeat 50%/100%; } .list5w .prev{ left: -.43rem; background-image: ; } .list5w .next{ right: -.43rem; background-image: ; } .list5w a:hover{ box-shadow: 0 .04rem .1rem 0 rgba(0, 0, 0, 0.1); } .list5w a:hover .pic:before{ animation: shine 1s } .list5w .swiper-container{ padding: .1rem 0; } .list5w{ position: relative; margin-top: .41rem; } .index-s6 .title001 .li{ margin-left: 0; } .index-s6{ padding: .93rem 0 1.15rem; } .aside{ position: fixed; right: 0; top: 50%; width: 1.7rem; transform: translatey(-50%); z-index: 99; transition: .5s; } .aside ul li a{ display: flex; align-items: center; justify-content: space-between; } .aside ul li a .icon{ width: .3rem; height: .3rem; position: relative; } .aside ul li a span{ display: block; width: calc(100% - .37rem); font-size: .18rem; line-height: .8rem; color: #fff; } .aside ul li:after{ position: absolute; content: ''; left: 0; right: 100%; bottom: -1px; height: 1px; background: #fff; opacity: 0; visibility: hidden; transition: .5s; } .aside ul li{ position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .aside ul li:last-child{ border-color: transparent; } .aside ul li:hover:after{ right: 0; opacity: 1; visibility: visible; } .aside ul{ padding: .45rem .25rem .54rem; border-radius: .2rem 0 .2rem .2rem; background: linear-gradient(0deg, #153d8d 25%, #378cda 101%), #43adc2; } .aside:after{ position: absolute; content: ''; right: 0; top: -.29rem; width: .3rem; height: .3rem; background: no-repeat 50%/100%; } .aside.hide{ opacity: 0; visibility: hidden; } .aside-fc{ position: fixed; left:0; top: 50%; width: 1.8rem; transform: translatey(-50%); z-index: 99; transition: .5s; } .aside-fc img, .aside-fc a{ display:block; width:100%; } @media (max-width: 1199px){ .banner{ margin-top: .75rem; } .banner a{ height:auto; } .banner a img{ height:auto; } .aside,.aside-fc{ display: none; } .list4w .prev, .list5w .prev{ left: .1rem; } .list4w .next, .list5w .next{ right: .1rem; } } @media (max-width: 1025px){ .banner a .txt h3{ font-size: .2rem; max-width: 80%; } .banner a .txt{ bottom: .15rem; } .banner .page span.active{ width: .24rem; height: .24rem; } .banner .page span{ margin: 0 .05rem; } .banner .page{ left: auto; width: auto; right: .1rem; bottom: .15rem; } .list1w a{ font-size: .22rem; line-height: .3rem; } .index-s1 .top .right{ padding: .2rem 0.3rem; width: calc(100% - 1.1rem); } .index-s1 .top .right:after{ left: -0.6rem; } .index-s1 .top .left { width: 1.1rem; } .index-s1 .top .left .img-box img{ height: 0.9rem; margin-top: -.15rem; } .title001 .tit-box img{ width: .85rem; margin-right: .15rem; } .title001 .li.active h2{ font-size: .26rem; } .title001 .li h2{ font-size: .24rem; line-height: .3rem; } .title001 .li h4{ left: 0; padding-left: .2rem; padding-right: .1rem; } .title001 .li{ padding-top: .35rem; margin-left: .2rem; } .title001 .more a{ font-size: .18rem; } .title001 .more{ top: .4rem; } .index-s1 .con .left{ width: 100%; margin-bottom: .3rem; } .list2w a .pic{ padding-top: 60.66%; } .list2w a p{ margin-top: .05rem; } .list2w a .txt{ padding: 0.2rem 1.4rem 0.2rem 0.2rem; } .list2w .page span{ width: .1rem; height: .1rem; margin: 0 .05rem; } .list2w .page{ margin: 0 .05rem; } .list2w .btn-box{ right: .2rem; bottom: .25rem; } .index-s1 .con .right{ width: 100%; } .list_box1 li a{ padding: .1rem .15rem; } .list_box1 li{ margin-top: .1rem; } .index-s1 .tab-cont{ margin-top: .26rem; } .index-s1 .top{ margin-top: .26rem; } .index-s1 .bot { margin-top: 0.45rem; } .list3w{ width: 100%; margin-right: 0; } .list3w a{ padding: .2rem ; } .list3w a time{ font-size: .16rem; margin-left: -.2rem; } .list3w a h3 { margin-top: 0.1rem; } .list3w a i { margin-top: 0.1rem; } .list3w .con:before{ width: 0.52rem; height: .1rem; } .list3w .btn{ margin: 0 .1rem; width: .6rem; height: .6rem; background-size: .24rem .24rem; } .list3w .btn-box:before, .list3w .btn-box:after{ display: none; } .list3w .btn-box{ padding: 0; justify-content: center; } .index-s2 .tab-cont { margin-top: 0.26rem; } .index-s2 { margin-top: 0.4rem; } .index-s3 .left{ width: 100%; margin-bottom: .3rem; } .index-s3 .left .img-box .pic{ padding-top: 75%; } .index-s3 .left .img-box .txt{ padding: 0 .2rem; bottom: .15rem; } .index-s3 .right{ width: 100%; padding-top: 0; } .index-s3 .right .para{ height: auto; } .list_box2 ul{ height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .list_box2 li{ position: static; width: 33.33% !important; height: 2rem !important; } .list_box2 li a{ padding: .2rem !important; } .list_box2 li a .txt h3{ font-size: .2rem; line-height: .3rem; } .list_box2 li a .txt h4{ margin-top: 0; font-size: .14rem; } .list_box2 li a .img-box img{ width: .6rem; } .index-s3 .content { margin-top: 0.4rem; } .index-s3{ height: auto; padding: .4rem 0; margin-top: .4rem; } .list_box3 li .pic{ padding-top: 63.95%; } .list_box3 li .txt{ padding: .2rem; } .list_box3 li h3{ font-size: .18rem; line-height: .3rem; height: .6rem; } .list_box3 li .txt i{ margin-top: .15rem; } .list_box3 li p{ margin-top: .1rem; } .list_box3 li h6 { margin-top: 0.1rem; } .index-s4 .tab-cont { margin-top: 0.26rem; } .index-s4 { padding: 0.4rem 0; } .index-s5 .map-img{ height: 7.8rem; width: calc(100% 1rem); margin-left: -1rem; } .index-s5 .top{ top: .4rem; } .index-s5 .left{ width: 60%; position: relative; z-index: 2; } .index-s5 .right{ width: 40%; } .list4w a .pic{ padding-top: 158.61%; } .list4w{ margin-top: .26rem; } .list5w a .pic{ padding-top: 26.39%; } .list5w{ margin-top: .2rem; } .index-s6{ padding: .4rem 0 .3rem; } } @media (max-width: 769px){ .list1w a{ font-size: .2rem; } .title001 .tit-box img{ width: .6rem; margin-right: .1rem; } .title001 .tit-box .img{ margin-top: .1rem; } .list_box1 li .txt-box h3{ font-size: .19rem; } .list_box1 li time em, .list_box1 li time span{ transform: scale(.9); } .list3w a h3{ font-size: .19rem; } .index-s5 .left{ width: 100%; margin-top: 0; } .index-s5 .map-img{ display: none; } .index-s5 .map-mask{ display: none; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 999999; background: rgba(0, 0, 0, 0.6); } .index-s5 .map-m-img{ width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .index-s5 .map-m-img .map-img-item-m { display: none; width: 96%; background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0)); background-size: 100%; } .index-s5 .map-m-img .map-img-item-m img{ display: block; width: 100%; } .index-s5 .map-m-img .map-img-item-m.active{ display: block; } .index-s5 .top{ position: static; } .index-s5 .left .gd{ margin-top: -.6rem; } .index-s5{ padding: .4rem 0; } } @media (max-width: 641px){ .title001{ margin-left: -15px; justify-content: flex-start; } .title001 .li h4{ left: -.1rem; transform: scale(.7); transform-origin: left center; } .index-s1 .tab-cont .gd{ display: flex; } .index-s1 .title001 .more{ display: none; } .index-s1{ padding-bottom: .4rem; } .list_box2 li{ width: 50% !important; height: 1.8rem !important; } .list_box2 li:last-child{ width: 100% !important; } .list_box3 li{ width: 48.5%; margin: 0; } .list_box3 ul{ gap: .25rem 3%; } } @media (max-width: 481px){ .list2w .btn-box{ left: 0; right: 0; bottom: .15rem; justify-content: center; } .list2w a .txt{ padding: .2rem .2rem .4rem; } .index-s1 .top .left { width: 0.8rem; margin-left: -15px; } .index-s1 .top .left .img-box img { height: 0.64rem; margin-top: -.08rem; } .index-s1 .top .right:after{ left: -.9rem; } .index-s1 .top .right { padding: 0.08rem 0.2rem; width: calc(100% - 0.5rem); margin-left: -0.2rem; } .index-s1 .top .right .ll { width: calc(100% - 0.4rem); } .index-s1 .top .left:after{ width: .08rem; height: .08rem; top: -.08rem; right: -.04rem; } .index-s2, .index-s1 .bot{ margin-top: .2rem; } .index-s3, .index-s5, .index-s6{ padding-top: .2rem; } .list_box3 li{ width: 100%; } .list_box3 li:nth-child(2n) a{ flex-direction: column; } .list_box3 li:nth-child(2n) .txt:before{ bottom: 100%; top: auto; border-top-color: transparent; border-bottom-color: #0158a8; } .list_box3 li:nth-child(2n):hover .txt:before{ border-top-color: transparent; border-bottom-color: #087ca2; } .index-s5 .left .gd{ margin-top: 0; } .index-s5 .map-box .map p{ min-width: 1.2rem; height: .42rem; line-height: .42rem; } .list_box2 li{ width: 100% !important; height: 1.5rem !important; } .list_box2 li a .img-box img{ width: .45rem; } } .index-s2 .title001 .li h4{ left: 0; } .index-s2 .title001 .li h2{ min-width: 2.56rem; justify-content: center; } .index-s2 .tab-tit{ position: relative; z-index: 3; margin-left: 1.7rem; margin-top: -0.25rem; display: flex; justify-content: center; } .index-s2 .tab-tit span{ display: block; font-size: .18rem; line-height: .24rem; color: #666; margin: 0 .1rem; cursor: pointer; transition: .5s; } .index-s2 .tab-tit span.active{ color: #1b3d98; } @media (max-width: 1025px){ .index-s2 .title001 .li h2{ min-width: auto; } .index-s2 .title001 .li{ margin-left: 0; } .index-s2 .tab-tit{ margin: .2rem 0 0 ; } }