@charset "utf-8"; .banner video { display: block; width: 100%; height: 100vh; object-fit: cover; } .nav-phone { position: fixed; right: 0; top: 1.4rem; background: url(/uploads/image/ximages/dh.png) no-repeat center center; width: 1.45rem; height: 0.5rem; background-size: 1.45rem auto; z-index: 99; display: none; } .nav-phone .dh { position: relative; width: 100%; height: 100%; } .nav-phone .dh .icon { position: absolute; left: 0; width: 0.46rem; height: 0.46rem; } .nav-phone .dh .icon img { position: absolute; left: 50%; top: 50%; height: .27rem; transform: translate(-50%, -50%); animation: icon-yh 1.5s linear infinite; } @keyframes icon-yh { 0% { transform: translate(-50%, -50%) rotatez(0); } 16.6% { transform: translate(-50%, -50%) rotatez(10deg); } 33.3% { transform: translate(-50%, -50%) rotatez(0); } 49.8% { transform: translate(-50%, -50%) rotatez(-10deg); } 66.4% { transform: translate(-50%, -50%) rotatez(0); } 83% { transform: translate(-50%, -50%) rotatez(10deg); } 100% { transform: translate(-50%, -50%) rotatez(0); } } .banner .slick-dots { position: absolute; width: 1rem; height: 1rem; border-radius: 50%; border: 0.01rem dashed rgba(255, 255, 255, .2); left: 50%; transform: translatex(-50%); bottom: 0.3rem; z-index: 9; } .banner .slick-dots::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.41rem; height: 1.64rem; background: url(/uploads/image/ximages/ban-xz.png) no-repeat center center; background-size: 1.45rem auto; animation: xz 50s; } @keyframes xz { 0% { transform: translate(-50%, -50%) rotatez(0); } 100% { transform: translate(-50%, -50%) rotatez(360deg); } } .banner-slick { position: relative; } .slick-dots li { position: relative; z-index: 9; } .slick-dots li svg { position: absolute; width: 102%; height: 100%; position: absolute; left: 0; top: 0; fill: none; stroke: #fff; stroke-width: 0.02rem; stroke-dasharray: 314; stroke-dashoffset: 314; } .banner .slick-dots li.slick-active svg { animation: indexsvg 5s linear forwards; } @keyframes indexsvg { 0% { stroke-dashoffset: 314; } 100% { stroke-dashoffset: 0; } } .banner .slick-dots li { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; border-radius: 50%; } .banner .slick-dots li .dot-page { position: absolute; width: 100%; height: 100%; } .banner .slick-dots li .ban-num { position: absolute; left: 0.1rem; top: 0.4rem; font-size: 0.24rem; color: rgba(255, 255, 255, .5); font-family: "bahnschrift"; display: none; } .banner .slick-dots li .ban-num span { color: #fff; font-size: 0.24rem; padding-right: 0.05rem; } .banner .slick-dots li .ban-num em { position: relative; display: inline-block; width: 0.16rem; height: 0.01rem; background: rgba(255, 255, 255, .5); vertical-align: middle; } .banner .slick-dots li .dot-page b { font-weight: normal; padding-left: 0.05rem; } .banner .slick-dots li.slick-active .ban-num { display: block; } .home1 { background: url(/uploads/image/ximages/home-bg.jpg) no-repeat center center; background-size: cover; } .sect1 { padding-top: 0.3rem; padding-bottom: 0.45rem; } .title { position: relative; text-align: center; font-size: 0; } .title h2 { display: inline-block; position: relative; padding-left: 0.7rem; font-size: 0.34rem; color: #333; font-weight: normal; line-height: 0.64rem; } .title h2 span { position: absolute; left: 0; top: 50%; transform: translatey(-50%); width: 0.64rem; height: 0.64rem; text-align: center; line-height: 0.64rem; background: url(/uploads/image/ximages/tit-bg.png) no-repeat center center; background-size: .64rem auto; } .title h2 span img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: .22rem; } .title a { position: absolute; right: 0; bottom: 0.15rem; background: url(/uploads/image/ximages/tit-more.png) no-repeat center center; width: 1.13rem; height: 0.3rem; background-size: 1.13rem auto; padding-left: 0.45rem; font-size: 0.14rem; color: #025ec3; transition: all .3s; } .title a:hover { right: 0.05rem; } .s1 { overflow: hidden; margin-top: 0.35rem; } .s1-l { float: left; width: 8.53rem; } .s1-l a { display: block; } .s1-l a .pic { padding-top: 67.4%; } .s1-l a .text { position: relative; margin-top: -0.64rem; background: url(/uploads/image/ximages/s1-l.-bg.jpg) no-repeat center center; background-size: cover; margin-right: 0.65rem; padding: 0.28rem 1.65rem 0.28rem 0.28rem; z-index: 3; } .s1-l a .text span { display: block; font-size: 0.18rem; color: #fff; margin-bottom: 0.1rem; } .s1-l a .text p { font-size: 0.18rem; color: #fff; font-weight: bold; margin-right: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s1-l .slick-dots { width: auto; left: auto; right: 1.2rem; bottom: 0.24rem; } .s1-l .slick-dots li { width: auto; height: auto; margin: 0 0.05rem; } .s1-l .slick-dots li span { font-size: 0.18rem; color: #c0d4ed; font-family: arial; } .s1-l .slick-dots li.slick-active { padding-left: 0.2rem; padding-right: 0.2rem; } .s1-l .slick-dots li.slick-active::before { content: ""; position: absolute; top: 50%; transform: translatey(-50%); left: 0; width: 0.15rem; height: 0.01rem; background: #fff; } .s1-l .slick-dots li.slick-active::after { content: ""; position: absolute; right: 0; top: 50%; transform: translatey(-50%); width: 0.15rem; height: 0.01rem; background: #fff; } .s1-l .slick-dots li.slick-active span { color: #fff; } .s1-r { float: right; width: calc(100% - 8.93rem); } .s1-r ul li a { display: block; padding: 0.3rem 0.15rem; background-position: center center; overflow: hidden; transition: all .3s; } .s1-r ul li:hover a { background: url(/uploads/image/ximages/s1-r-bg.jpg) no-repeat center center; background-size: cover; } .s1-r ul li a .date { float: left; width: 1rem; text-align: center; color: #02469a; background: url(/uploads/image/ximages/date-bg.png) no-repeat center 60%; } .s1-r ul li:hover a .date { color: #fff; background: url(/uploads/image/ximages/date-bg-other.png) no-repeat center 60%; } .s1-r ul li a .date p { line-height: 1; font-size: 0.4rem; } .s1-r ul li a .date span { display: block; padding-top: 0.3rem; font-size: 0.16rem; line-height: 1; } .s1-r ul li a .text { overflow: hidden; padding-left: 0.15rem; } .s1-r ul li a .text h2 { font-size: 0.18rem; color: #333; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0.19rem; } .s1-r ul li:hover a .text h2 { color: #fff; font-weight: bold; } .s1-r ul li a .text p { font-size: 0.14rem; line-height: 0.24rem; height: 0.48rem; overflow: hidden; color: #333333; opacity: .7; } .s1-r ul li:hover a .text p { color: #fff; } .s2 { padding-bottom: 0.84rem; } .s2 ul li { float: left; width: 32%; margin-left: 2%; margin-top: 0.33rem; background: #fff; background-position: center center; transition: all .3s; } .s2 ul li:hover { background: url(/uploads/image/ximages/s2-bg.jpg) no-repeat center center; background-size: cover; } .s2 ul li:nth-child(3n-2) { margin-left: 0; } .s2 ul li a { display: block; padding: 0.23rem 0.34rem; background: url(/uploads/image/ximages/s2-xx.png) no-repeat center 40%; } .s2 ul li:hover a { background: url(/uploads/image/ximages/s2-xx-other.png) no-repeat center 40%; } .s2 ul li a span { display: block; font-size: 0.18rem; color: #004ea2; padding-bottom: 0.35rem; } .s2 ul li:hover a span { color: #fff; } .s2 ul li a p { font-size: 0.18rem; line-height: 0.26rem; height: 0.52rem; overflow: hidden; color: #333333; } .s2 ul li:hover a p { color: #fff; } .section3 { padding-top: 0.6rem; padding-bottom: 3.5rem; background: url(/uploads/image/ximages/sect3-bg.jpg) no-repeat center center; background-size: cover; } .s3 { position: relative; margin-top: 0.35rem; border-left: 0.01rem solid rgba(255, 255, 255, .2); border-top: 0.01rem solid rgba(255, 255, 255, .2); } .sect3 .title h2, .sect4 .title h2 { color: #fff; } .sect3 .title h2 span, .sect4 .title h2 span { background: url(/uploads/image/ximages/tit4-icon-bg.png) no-repeat center center; background-size: .64rem auto; } .sect3 .title a, .sect4 .title a { color: #fff; background: url(/uploads/image/ximages/tit-more-other.png) no-repeat center center; background-size: 1.13rem auto; } .s3 ul li { height: 2.43rem; border-right: 0.01rem solid rgba(255, 255, 255, .2); border-bottom: 0.01rem solid rgba(255, 255, 255, .2); } .s3-l { float: left; width: 42.855%; } .s3-l ul li { float: left; width: 33.333%; } .s3-m { position: absolute; width: 14.285%; left: 50%; transform: translatex(-50%); top: 0; } .s3-r { float: right; width: 42.855%; } .s3-r ul li { float: left; width: 33.333%; } .s3 ul li a { padding-top: 0.3rem; display: block; width: 100%; height: 100%; text-align: center; } .s3 ul li a .icon { position: relative; width: 1.27rem; height: 1rem; margin-left: auto; margin-right: auto; background: url(/uploads/image/ximages/s3-icon.png) no-repeat center center; background-size: 1.27rem auto; } .s3 ul li a .icon img { position: absolute; left: 50%; transform: translatex(-50%); top: 0.14rem; max-height: .44rem; transition: all .6s; } .s3 ul li a .text { margin-top: 0.1rem; margin-top: 0.1rem; width: 85%; margin-left: auto; margin-right: auto; } .s3 ul li a .text p { line-height: 0.3rem; font-size: 0.17rem; text-align: center; color: #ffffff; height: 0.6rem; overflow: hidden; } .s3 .s3-m ul li { height: 1.62rem; } .s3 .s3-m ul li a { padding-top: 0.15rem; } .s3 .s3-m ul li a .text p { height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s3 .s3-m ul li a .text { margin-top: 0.05rem; } .s3 ul li:hover a .icon img { transform: translatex(-50%) rotatey(360deg); } .home2 { position: relative; } .home2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 2.6rem; background: #eaf2fa; } .home2 #lizi { overflow: hidden; pointer-events: none; position: absolute; /* top: 0; */ left: 0; right: 0; height: 3rem; bottom: 0; z-index: 9; } .home2 #lizi canvas { position: absolute; height: 4.28rem!important; width: 100%; left: 0; bottom: 0; right: 0; z-index: 0; opacity: 0.7; } .section4 { position: relative; margin-top: -2.65rem; z-index: 6; } .s4 { position: relative; margin-top: 0.35rem; padding-bottom: 0.25rem; background: url(/uploads/image/ximages/s4-r-bg.png) no-repeat right center; background-size: auto 105%; } .s4-l { position: relative; float: left; width: 8.55rem; z-index: 6; } .s4-l .pic { padding-top: 58.7%; } .s4-r { position: relative; float: right; padding: 0.8rem 0.5rem; width: calc(100% - 8.55rem); z-index: 6; } .s4-r h2 { margin-bottom: 0.35rem; padding-bottom: 0.15rem; font-size: 0.18rem; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: url(/uploads/image/ximages/s2-xx.png) no-repeat center bottom; background-size: 100% auto; } .s4-r p { line-height: 0.32rem; font-size: 0.16rem; color: #333; opacity: .8; height: 0.96rem; overflow: hidden; margin-bottom: 0.4rem; } .s4-r .more a { display: inline-block; width: 1.18rem; height: 0.34rem; line-height: 0.32rem; text-align: center; border-radius: 1.74rem; opacity: 1; background: #ffffff; box-sizing: border-box; border: 0.01rem solid #b9b9b9; font-size: 0.15rem; color: #868686; } .s4-r .more a:hover { color: #025ec3; } .s4 .slick-dots { bottom: 0.8rem; width: auto; left: auto; right: 17%; } .s4 .slick-dots li { width: 0.1rem; height: 0.1rem; border-radius: 50%; opacity: 0.4; background: #004ea2; margin: 0 0.15rem; } .s4 .slick-dots li.slick-active { width: 0.18rem; height: 0.18rem; background: url(/uploads/image/ximages/s4-slick-active.png) no-repeat center center; } .section5 { position: relative; z-index: 6; padding-top: 0.6rem; padding-bottom: 0.7rem; } .sect5 ul li { float: left; width: 23%; margin-top: 0.25rem; margin-bottom: 0.3rem; margin-left: 2.66667%; background: url(/uploads/image/ximages/s5-bg.png) no-repeat center 65%; text-align: center; } .sect5 ul li:nth-child(4n-3) { margin-left: 0; } .sect5 ul li a { display: block; } .sect5 ul li a .icon { position: relative; height: 0.6rem; line-height: 0.6rem; } .sect5 ul li a .icon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: .6rem auto; } .sect5 ul li a .text h2 { margin-top: 0.2rem; margin-bottom: 0.75rem; font-size: 0.22rem; color: #025ec3; } .sect5 ul li a .text h2 span { font-size: 0.4rem; } .sect5 ul li a .text p { margin-top: 0.2rem; font-size: 0.22rem; color: #333; } .sect5 ul li:hover a .text p { color: #02469a; } .sect5 ul li:hover a .icon img { animation: icon-yh 0.6s linear; } @keyframes icon-yh { 0% { transform: translate(-50%, -50%) rotatez(0); } 10% { transform: translate(-50%, -50%) rotatez(10deg); } 20% { transform: translate(-50%, -50%) rotatez(0); } 30% { transform: translate(-50%, -50%) rotatez(-10deg); } 40% { transform: translate(-50%, -50%) rotatez(0); } 50% { transform: translate(-50%, -50%) rotatez(10deg); } 60% { transform: translate(-50%, -50%) rotatez(0); } 70% { transform: translate(-50%, -50%) rotatez(-10deg); } 80% { transform: translate(-50%, -50%) rotatez(0); } 90% { transform: translate(-50%, -50%) rotatez(10deg); } 100% { transform: translate(-50%, -50%) rotatez(0); } } @media screen and (max-width:1500px) { .s1-l { width: 6.5rem; } .s1-r { width: calc(100% - 6.6rem); } .s1-r ul li a { padding: 0.18rem 0.15rem; } .s2 ul li a { background-size: 80% auto; } .s4-l { float: left; width: 53%; } .s4-r { width: calc(100% - 55%); } .sect5 ul li { background-size: 100% auto; } } @media screen and (max-width: 1200px) { .s1-l { width: 5rem; } .s1-r { width: calc(100% - 5.2rem); } .s1-l .slick-dots { right: 0.7rem; } .s1-l a .text { margin-top: -0.3rem; padding-right: 1.3rem; } .s1-r ul li a .text h2 { margin-bottom: 0.05rem; } .s1-r ul li a .date p { font-size: 0.32rem; } .s1-r ul li a .date span { padding-top: 0.2rem; } .s4-l { width: 52%; } .s4-r { width: calc(100% - 55%); } .s4-r { padding: 0.3rem; } .s4 .slick-dots { bottom: 0.35rem; } .sect5 ul li a .text h2 { margin-bottom: 0.6rem; } } @media screen and (max-width: 1024px) { .banner video { height: auto; } } @media screen and (max-width: 1000px) { .s1-l { float: none; width: 100%; } .s1-r { float: none; width: 100%; margin-top: 0.15rem; } .s2 ul li { width: 48%; margin-left: 0; margin-right: 4%; } .s2 ul li:nth-child(2n) { margin-right: 0; } .s3-l { float: none; width: 100%; } .s3-m { position: static; transform: none; width: 100%; } .s3 .s3-m ul { overflow: hidden; } .s3 .s3-m ul li { float: left; width: 33.333%; height: 2.43rem; } .s3-r { float: none; width: 100%; } .s4-l { width: 51%; } .s4-r { width: calc(100% - 52%); } .s4-r h2 { margin-bottom: 0.1rem; } .s4-r p { margin-bottom: 0.1rem; } .s4 .slick-dots { bottom: 0.15rem; } .sect5 ul li a .text h2 span { font-size: 0.26rem; } .sect5 ul li a .icon img { height: 0.4rem; } .sect5 ul li a .icon { height: 0.4rem; line-height: 0.4rem; } .sect5 ul li a .text h2 { margin-bottom: 0.4rem; } .sect5 ul li a .text p { font-size: 0.16rem; } .sect5 ul li { margin-top: 0.15rem; margin-bottom: 0.15rem; } } @media screen and (max-width: 600px) { .title { text-align: left; } .title h2 { font-size: 0.2rem; padding-left: 0.45rem; line-height: 0.4rem; } .title h2 span { width: 0.4rem; height: 0.4rem; background-size: 0.4rem auto; } .title h2 span img { height: 0.15rem; } .title a { background-size: 0.95rem auto; padding-left: 0.5rem; bottom: 0; } .sect1 { padding: 0.15rem 0; } .s1 { overflow: hidden; margin-top: 0.15rem; } .s1-l a .text { margin-right: 0.1rem; padding: 0.15rem; padding-bottom: 0.4rem; } .s1-l .slick-dots { bottom: 0.05rem; right: 0.2rem; } .s1-r ul li a { padding: 0.15rem 0.1rem; } .s1-r ul li a .text { padding-left: 0; } .s2 ul li { float: none; width: 100%; margin-left: 0; margin-right: 0; margin-top: 0.1rem; } .s2 ul li a { padding: 0.15rem; background-size: 90% auto; } .s2 { padding-bottom: 0.15rem; } .section3 { padding: 0.15rem 0; padding-bottom: 1.5rem; } .s3 ul li a .icon { width: 0.8rem; height: 0.8rem; background-size: 0.8rem auto; } .s3 ul li a .icon img { height: 0.25rem; } .s3 ul li { height: 1.45rem; } .s3 ul li a { padding-top: 0.15rem; } .s3 ul li a .text { width: 100%; padding-left: 0.1rem; padding-right: 0.1rem; } .s3 ul li a .text p { font-size: 0.12rem; line-height: 0.18rem; height: 0.36rem; } .s3 .s3-m ul li { height: 1.45rem; } .section4 { margin-top: -1.2rem; } .sect3 .title h2 span, .sect4 .title h2 span { background-size: 0.4rem auto; } .sect3 .title a, .sect4 .title a { background-size: 0.95rem auto; } .s4 { margin-top: 0.15rem; background: none; } .s4-l { float: none; width: 100%; } .s4-r { float: none; width: 100%; padding: 0.15rem; } .s4 .slick-dots { right: 27%; } .section5 { padding-top: 0.15rem; padding-bottom: 0.15rem; } .sect5 ul li { width: 48%; margin-left: 0; margin-right: 4%; } .sect5 ul li:nth-child(2n) { margin-right: 0 } .sect5 ul li a .text h2 { margin-top: 0; } .sect5 ul li a .text h2 span { font-size: 0.2rem; } .slick-dots li svg { width: 0.5rem!important; height: 0.5rem!important; } .banner .slick-dots { width: 0.5rem; height: 0.5rem; } .banner .slick-dots::after { width: 0.8rem; background-size: 100% auto; } .banner .slick-dots li .ban-num { left: 50%; top: auto; transform: translatex(-50%); width: 1rem; font-size: 0.16rem; bottom: -0.3rem; } .banner .slick-dots li .ban-num span { font-size: 0.16rem; } } div#lbpc { display: block; } div#lbsj { display: none; } @media screen and (max-width: 1024px) { div#lbpc { display: none; } div#lbsj { display: block; } }