.banner { position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 100vh; background: #fff; } .bannerswiper { height: 100%; position: relative; overflow: hidden; } .banner .bannerswiper .swiper-pagination { display: flex; justify-content: center; align-items: center; flex-direction: column; left: inherit; right: 4%; bottom: 0; width: 48px; height: 100%; } .banner .bannerswiper .swiper-pagination-bullet { transition: all 0.5s; position: relative; opacity: 1; margin: 0; width: 48px; height: 48px; border: rgba(255, 255, 255, 0) 1px solid; background: transparent; } .banner .bannerswiper .swiper-pagination-bullet:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: #fff; content: ''; } .banner .bannerswiper .swiper-pagination-bullet.swiper-pagination-bullet-active { transition: all 0.5s; border: #ffffff 1px solid; } .banner .scroll { position: absolute; left: 50%; bottom: 0; z-index: 10; transform: translatex(-50%); } .banner .scroll p { margin-bottom: 14px; font-size: 14px; color: #fff; text-align: center; } .banner .scroll i { position: relative; margin: 0 auto; width: 1px; height: 70px; background: rgba(255, 255, 255, 0.5); } .banner .scroll i::before { position: absolute; left: -3px; bottom: 60px; width: 7px; height: 7px; border-radius: 7px; background: #fff; content: " "; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -webkit-animation-name: scrolls; animation-name: scrolls; } @-webkit-keyframes scrolls { from { bottom: 60px; } 100% { bottom: -10px; } } @keyframes scrolls { from { bottom: 60px; } 100% { bottom: -10px; } } .bannerlist { width: 100%; height: 100%; position: relative; overflow: hidden; } .bannerlist i { width: 100%; height: 100%; transform: scale(1.1); } .bannerlist i.m_img { display: none; } .bannerinfo { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; } .bannerswiper .swiper-slide-active .bannerlist i { animation-duration: 3s; animation-delay: 0.5s; animation-fill-mode: both; animation-timing-function: ease-out; animation-name: bigtosmall; } .bannermore { width: 60px; height: 60px; border: 2px solid rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; transition: cubic-bezier(0.215, 0.61, 0.355, 1) 0.45s; margin-top: 40px; opacity: 0; } .imgbanner.swiper-slide-active .bannermore { animation-delay: 1.5s; animation-duration: 0.6s; animation-name: fadeinleft; animation-fill-mode: both; animation-timing-function: ease-out; } .imgbanner.swiper-slide-active .banner2 { margin: 0 auto; margin-top: 40px; } .bannermore:after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 0; margin-left: -4px; margin-top: -4px; transform: rotate(45deg); transform-origin: 4px 34px; animation: seemore linear 2s infinite; animation-play-state: paused; } .bannermore:hover:after { animation: seemore linear 2s infinite; } .bannermore span { position: relative; width: 100%; height: 100%; overflow: hidden; } .bannermore span:before { content: ''; background: center no-repeat; position: absolute; transition: all 0.5s; width: 100%; height: 100%; background-size: 28px 22px; left: -100%; } .bannermore span:after { content: ''; background: center no-repeat; position: absolute; transition: all 0.5s; width: 100%; height: 100%; background-size: 11px 22px; left: 0; } .bannermore:hover span:before { left: 0; } .bannermore:hover span:after { left: 100%; } @keyframes seemore { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } } .z_banner_text { position: absolute; left: 0; top: 50%; transform: translatey(-40%); width: 100%; padding: 0 8.3vw; box-sizing: border-box; } .z_banner_text .en { position: relative; z-index: 1; } .z_banner_text .z_tyuan { width: 18vw; height: 18vw; border-radius: 50%; border: 3px #ef7828 solid; transform-style: preserve-3d; transform: rotatez(60deg) rotatey(70deg); top: 50%; margin-top: -10.8vw; left: -4.8vw; z-index: -1; position: absolute; } .z_banner_text .z_tyuan em { width: 1vw; height: 1vw; border-radius: 50%; background: no-repeat center; background-size: 100% 100%; animation: move 2s linear infinite; top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .z_banner_text .desc { margin-top: 54px; width: 43.22916vw; color: #3d3c3c; } .z_banner_text .desc p { font-size: 20px; line-height: 40px; } .z_banner_text .desc b { margin-top: 40px; font-size: 30px; } .s3 .z_banner_text { padding-left: 20.5vw; transform: translatey(-50%); } .s3 .z_banner_text .anm img { height: 4.5vh; } .s3 .z_banner_text .anm:nth-child(2) { margin-top: 34px; } .s3 .z_banner_text .anm:nth-child(2) img { height: 6.94vh; } .s5 .z_banner_text { padding: 0; transform: translatey(-36%); } .s5 .z_banner_text .anm img { margin: 0 auto; height: 21vh; } @keyframes move { from { transform: rotatez(0) translatex(9vw) rotatez(0) rotatey(-70deg); } to { transform: rotatez(360deg) translatex(9vw) rotatez(-360deg) rotatey(-70deg); } } .banner .z_banner_img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .banner .z_banner_img .anm { opacity: 0; width: 100%; height: 100%; } .banner .z_banner_img .anm img { width: 100%; height: 100%; object-fit: cover; } .banner .swiper-slide-active .z_banner_text .anm, .banner .swiper-slide-active .z_banner_img .anm { animation-delay: 1s; animation-duration: 0.9s; animation-name: fadeinleft; animation-fill-mode: both; animation-timing-function: ease-out; } .banner .z_banner_text .anm { text-align: center; color: #fff; } .z_banner_text_top { font-size: 30px; display: flex; align-items: center; justify-content: center; } .z_banner_text_top span { font-weight: bold; margin-left: 10px; } .z_banner_text_btn { font-size: 85px; font-family: pangmen; transform: scale(1, 1.1); transform-origin: 0 0; margin-top: 20px; } .banner .swiper-slide-active .z_banner_text .anm:nth-child(2) { animation-delay: 1.2s; } .m_banner { display: none; } @media (max-width: 1200px) { .banner { display: none; } .banner.m_banner { display: block; } .banner .bannerswiper .swiper-pagination { flex-direction: inherit; right: 0; bottom: 0.74rem; width: 100%; height: 0.16rem; } .banner .bannerswiper .swiper-pagination-bullet { width: 0.14rem; height: 0.14rem; border: none; background: #c4c4c4; } .banner .bannerswiper .swiper-pagination-bullet:after { display: none; } .banner .bannerswiper .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #1f4e9c; border: none; } .banner .scroll { display: none; } .bannerlist i { display: none; } .bannerlist i.m_img { display: block; } .bannerinfo { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; display: none; align-items: center; } .bannermore { width: 60px; height: 60px; border: 2px solid rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; transition: cubic-bezier(0.215, 0.61, 0.355, 1) 0.45s; margin-top: 40px; opacity: 0; } .imgbanner.swiper-slide-active .bannermore { animation-delay: 1.5s; animation-duration: 0.6s; animation-name: fadeinleft; animation-fill-mode: both; animation-timing-function: ease-out; } .bannermore:after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 0; margin-left: -4px; margin-top: -4px; transform: rotate(45deg); transform-origin: 4px 34px; animation: seemore linear 2s infinite; animation-play-state: paused; } .bannermore:hover:after { animation: seemore linear 2s infinite; } .bannermore span { position: relative; width: 100%; height: 100%; overflow: hidden; } .bannermore span:before { content: ''; background: center no-repeat; position: absolute; transition: all 0.5s; width: 100%; height: 100%; background-size: 28px 22px; left: -100%; } .bannermore span:after { content: ''; background: center no-repeat; position: absolute; transition: all 0.5s; width: 100%; height: 100%; background-size: 11px 22px; left: 0; } .bannermore:hover span:before { left: 0; } .bannermore:hover span:after { left: 100%; } .z_banner_text { display: none; position: absolute; left: 0; top: 50%; transform: translatey(-40%); width: 100%; padding: 0 8.3vw; box-sizing: border-box; } .z_banner_text .en { position: relative; z-index: 1; } .z_banner_text .z_tyuan { width: 18vw; height: 18vw; border-radius: 50%; border: 3px #ef7828 solid; transform-style: preserve-3d; transform: rotatez(60deg) rotatey(70deg); top: 50%; margin-top: -10.8vw; left: -4.8vw; z-index: -1; position: absolute; } .z_banner_text .z_tyuan em { width: 1vw; height: 1vw; border-radius: 50%; background: no-repeat center; background-size: 100% 100%; animation: move 2s linear infinite; top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .z_banner_text .desc { margin-top: 54px; width: 43.22916vw; color: #3d3c3c; } .z_banner_text .desc p { font-size: 20px; line-height: 40px; } .z_banner_text .desc b { margin-top: 40px; font-size: 30px; } .s3 .z_banner_text { padding-left: 20.5vw; transform: translatey(-50%); } .s3 .z_banner_text .anm img { height: 4.5vh; } .s3 .z_banner_text .anm:nth-child(2) { margin-top: 34px; } .s3 .z_banner_text .anm:nth-child(2) img { height: 6.94vh; } .s5 .z_banner_text { padding: 0; transform: translatey(-36%); } .s5 .z_banner_text .anm img { margin: 0 auto; height: 21vh; } .banner .swiper-slide-active .z_banner_text .anm { animation-delay: 1s; animation-duration: 0.9s; animation-name: fadeinleft; animation-fill-mode: both; animation-timing-function: ease-out; } .banner .z_banner_text .anm { text-align: center; color: #fff; } .z_banner_text_top { font-size: 30px; display: flex; align-items: center; justify-content: center; } .z_banner_text_top span { font-weight: bold; margin-left: 10px; } .z_banner_text_btn { font-size: 85px; font-family: pangmen; transform: scale(1, 1.1); transform-origin: 0 0; margin-top: 20px; } .banner .swiper-slide-active .z_banner_text .anm:nth-child(2) { animation-delay: 1.2s; } .banner .video_obj { width: 100%; height: 100%; object-fit: cover; } .banner .z_banner_img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .banner .z_banner_img em { visibility: hidden; width: 100%; height: 100%; } .banner .swiper-slide-active .z_banner_img em { visibility: visible; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; animation-delay: 0.3s; -webkit-animation-delay: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; -webkit-animation-name: fadeinup150; animation-name: fadeinup150; } } .index { position: relative; z-index: 3; margin: 100vh 0 480px; background: #fff; } @media (max-width: 1200px) { .index { margin: 100vh 0 0; } } /* .showlist{ padding-top: 140px; } .showinfo{ display: flex; } .showright{ margin-left: 30px; } .showleft{ width: 65%; } .showlefttop{ height: 390px; position: relative; overflow: hidden; visibility: hidden; } .showinfo.animated .showlefttop{ animation-delay: 0.2s; visibility: visible; animation-duration: 0.8s; animation-fill-mode: both; animation-timing-function: ease-out; animation-name: pulse; } .showlefttop i{ width: 100%; height: 100%; transition: all 0.5s; } .showlefttop:hover i{ transform: scale(1.05); } .showmore{ width: 60px; height: 60px; border: 2px solid rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; transition: cubic-bezier(0.215, .61, .355, 1) .45s; margin-top: 30px; } .showmore span{ position: relative; width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden; } .showmore span:before { content: ''; background: center no-repeat; position: absolute; transition: all 0.5s; width: 100%; height: 100%; background-size: 28px 22px; left: -100%; } .showmore span:after{ content: ''; background: center no-repeat; position: absolute; transition: all 0.5s; width: 100%; height: 100%; background-size: 11px 22px; left: 0; } .showmore:hover span:before{ left: 0; } .showmore:hover span:after{ left: 100%; } .showmore:after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 0; margin-left: -4px; margin-top: -4px; transform: rotate(45deg); transform-origin: 4px 34px; animation: seemore linear 2s infinite; animation-play-state: paused; } .showmore:hover:after { animation: seemore linear 2s infinite; } .showpos{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .showposinfo{ margin: 60px; } .showtext{ font-size: 26px; color: #fff; height: 96px; line-height: 48px; } .showleftbtn{ display: flex; height: 390px; margin-top: 30px; justify-content: space-between; } .showleftbtnlist{ width: calc((100% - 30px) / 2); position: relative; overflow: hidden; visibility: hidden; } .showinfo.animated .showleftbtnlist:first-child{ animation-delay: 0.6s; visibility: visible; animation-duration: 0.8s; animation-fill-mode: both; animation-timing-function: ease-out; animation-name: pulse; } .showinfo.animated .showleftbtnlist:nth-child(2){ animation-delay: 0.8s; visibility: visible; animation-duration: 0.8s; animation-fill-mode: both; animation-timing-function: ease-out; animation-name: pulse; } .showleftbtnlist i{ width: 100%; height: 100%; transition: all 0.5s; } .showleftbtnlist:hover i{ transform: scale(1.05); } .showright{ position: relative; width: calc(35% - 30px); overflow: hidden; visibility: hidden; } .showinfo.animated .showright{ animation-delay: 0.4s; visibility: visible; animation-duration: 0.8s; animation-fill-mode: both; animation-timing-function: ease-out; animation-name: pulse; } .showright i{ width: 100%; height: 100%; transition: all 0.5s; } .showright:hover i{ transform: scale(1.05); } */ .ind01 { /*.showinfo.animated .showleftbtnlist:first-child{ animation-delay: 0.6s; visibility: visible; animation-duration: 0.8s; animation-fill-mode: both; animation-timing-function: ease-out; animation-name: pulse; } .showinfo.animated .showleftbtnlist:nth-child(2){ animation-delay: 0.8s; visibility: visible; animation-duration: 0.8s; animation-fill-mode: both; animation-timing-function: ease-out; animation-name: pulse; }*/ } .ind01 .showlist { padding-top: 70px; } .ind01 .showinfo { display: flex; margin-top: 30px; } .ind01 .showinfo:first-child { margin-top: 0; } .ind01 .showright { margin-left: 30px; } .ind01 .showleft { width: 65%; } .ind01 .showtopinfo { width: 100%; } .ind01 .showlefttop { height: 390px; position: relative; overflow: hidden; /*visibility: hidden;*/ border-radius: 10px; } .ind01 .showinfo.animated .showlefttop { /*animation-delay: 0.2s; visibility: visible; animation-duration: 0.8s; animation-fill-mode: both; animation-timing-function: ease-out; animation-name: pulse;*/ } .ind01 .showlefttop i { width: 100%; height: 100%; transition: all 0.5s; } .ind01 .showlefttop:hover i { transform: scale(1.05); } .ind01 .showmore { width: 60px; height: 60px; border: 2px solid rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; transition: cubic-bezier(0.215, 0.61, 0.355, 1) 0.45s; margin-top: 30px; } .ind01 .showmore span { position: relative; width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden; } .ind01 .showmore span:before { content: ''; background: center no-repeat; position: absolute; transition: all 0.5s; width: 100%; height: 100%; background-size: 28px 22px; left: -100%; } .ind01 .showmore span:after { content: ''; background: center no-repeat; position: absolute; transition: all 0.5s; width: 100%; height: 100%; background-size: 11px 22px; left: 0; } .ind01 .showmore:hover span:before { left: 0; } .ind01 .showmore:hover span:after { left: 100%; } .ind01 .showmore:after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 0; margin-left: -4px; margin-top: -4px; transform: rotate(45deg); transform-origin: 4px 34px; animation: seemore linear 2s infinite; animation-play-state: paused; } .ind01 .showmore:hover:after { animation: seemore linear 2s infinite; } .ind01 .showpos { position: absolute; bottom: 0; left: 0; width: 100%; } .ind01 .showposinfo { margin: 40px 40px 0; } .ind01 .showtitle { font-size: 18px; color: #fff; } .ind01 .showtext { margin-top: 8px; height: 60px; color: #fff; font-size: 20px; line-height: 30px; } .ind01 .activit { display: flex; align-items: center; } .ind01 .activitmore{ display: flex; min-height: 21px; } .ind01 .activitmore .activitmoreinfo{ transition: all 0.5s; opacity: 0; } .ind01 .showinfo a:hover .activitmore{ } .ind01 .showinfo a:hover .activitmore .activitmoreinfo{ transition: all 0.5s; opacity: 1; margin: 20px 0 30px; } .ind01 .activitmoreinfo { display: flex; align-items: center; } .ind01 .activitmoretext { font-size: 16px; color: #fff; } .ind01 .activitmoreicon { margin-left: 10px; } .ind01 .showleftbtn { display: flex; height: 390px; margin-top: 30px; justify-content: space-between; } .ind01 .showleftbtnlist { width: calc((100% - 30px) / 2); position: relative; overflow: hidden; /*visibility: hidden;*/ border-radius: 10px; } .ind01 .showleftbtnlist i { width: 100%; height: 100%; transition: all 0.5s; } .ind01 .showleftbtnlist:hover i { transform: scale(1.05); } .ind01 .showright { position: relative; width: calc(35% - 30px); overflow: hidden; /*visibility: hidden;*/ border-radius: 10px; } .ind01 .showinfo.animated .showright { animation-delay: 0.4s; visibility: visible; animation-duration: 0.8s; animation-fill-mode: both; animation-timing-function: ease-out; animation-name: pulse; } .ind01 .showright i { width: 100%; height: 100%; transition: all 0.5s; } .ind01 .showright:hover i { transform: scale(1.05); } .ind01 .icon_v{ position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: center no-repeat; background-size: 80px auto; cursor: pointer; } .ind01 .m_list { display: none; } @media (max-width: 1200px) { .ind01 .showlist { display: none; } .ind01 .m_list { display: block; padding: 0.8rem 0 0; } .ind01 .m_list a { float: left; margin: 0 4% 4% 0; width: 48%; height: 5.25rem; border-radius: 0.08rem; background: #f2f2f2; overflow: hidden; } .ind01 .m_list a:nth-child(2n) { margin-right: 0; } .ind01 .m_list a .pic { position: relative; width: 100%; height: 2.4rem; overflow: hidden; } .ind01 .m_list a .pic i { transition: all 0.5s; transform: scale(1); width: 100%; height: 100%; } .ind01 .m_list a .pic .icon_v{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: center no-repeat; background-size: 0.8rem auto; } .ind01 .m_list a .text { padding: 0.3rem 0.25rem; } .ind01 .m_list a .text b { margin-bottom: 0.26rem; min-height: 0.4rem; line-height: 0.38rem; font-size: 0.26rem; color: #333; } .ind01 .m_list a .text p { line-height: 0.4rem; font-size: 0.3rem; color: #666; } } .exhibimg { height: 100%; } .exhibimg img { height: 100%; } .exhibimg video { width: 100%; height: 100%; object-fit: cover; } .exhiblist { position: relative; height: 100%; } .exhibpos { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); } .lightstype { font-size: 26px; color: #fff; } .lightstitle { font-size: 55px; color: #fff; margin-top: 20px; font-weight: bold; } .lightintro { margin-top: 40px; display: flex; align-items: center; } .lightintrolist { display: flex; align-items: center; color: #fff; margin-left: 40px; } .lightintrolist:first-child { margin-left: 0; } .lightintrotext { margin-left: 10px; } .lightmore { margin-top: 45px; } .exhibitionswiper.swiper-container { position: relative; padding-bottom: 107px; } .exhibitionswiper .swiper-scrollbar { left: calc((100% - 83.33%) / 2) !important; width: 83.33% !important; background: #dcdcdc; bottom: 23px!important; height: 1px!important; min-width: 1200px; } .exhibitionswiper .swiper-scrollbar-drag { top: 50%; margin-top: -23px; height: 47px; background: center no-repeat; background-size: 44px; cursor: pointer; } .exhibposinfo { display: flex; flex-direction: column; align-items: center; } .exhibitionswiper .swiper-slide-active .exhibpos .exhibposinfo { animation-name: fadeinup; animation-duration: 0.6s; animation-delay: 0.3s; animation-fill-mode: both; animation-timing-function: ease-out; } .scrollbarinfo { position: relative; z-index: 60; } .line { width: calc(100% - 80px); height: 1px; background: #ededed; margin: 0 auto; margin-top: 60px; } .newsdate { display: flex; align-items: center; margin-top: 40px; } .date { font-size: 60px; font-weight: bold; color: #1f4e9c; } .yearinfo { font-size: 16px; color: #1f4e9c; margin-left: 15px; } .newsconttitle { margin-top: 30px; font-size: 20px; color: #333333; height: 60px; font-weight: bold; line-height: 30px; } .newstext { margin-top: 30px; font-size: 16px; color: #999999; line-height: 30px; } .newstype { display: flex; align-items: center; margin-top: 30px; } .newstypetitle { margin-left: 10px; color: #333; } /*以下有*/ .concat { /* margin-top: 130px; */ height: 200px; } .concat .w1600 { display: flex; align-items: center; justify-content: space-between; height: 100%; } .contactlist { display: flex; align-items: center; margin-left: 60px; } .concatinfo { display: flex; align-items: flex-end; } .contacttitle { font-size: 34px; color: #fff; width: 240px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 15px; position: relative; cursor: pointer; } .contacttitle:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #fff; transition: all 0.5s; } .contacttitle:hover:after { width: 100%; } .consult { color: #fff; font-size: 16px; } .consultnum { color: #fff; font-size: 22px; } .service { position: relative; width: 70px; height: 70px; cursor: pointer; } .servicewx img { width: 100%; } .servicepos { width: 114px; position: absolute; bottom: 80px; height: 0; left: 50%; transform: translatex(-50%); overflow: hidden; transition: all 0.5s; } .servicepos img { width: 100%; } .service:hover .servicepos { height: 126px; } .video_obj { width: 100%; height: 100%; object-fit: cover; } .timetitlebtn { margin-top: 20px; } .timestitle { font-size: 60px; color: #fff; font-family: liter; transform: scale(1, 1.2); transform-origin: 0 0; line-height: 90px; } .timesentitle { font-size: 24px; color: #fff; line-height: 36px; } .imgbanner .timestitletop .timestitle span { transform: translatex(-50px); opacity: 0; } /*.bannertitleswiper .swiper-slide-active .timestitletop .timestitle span{ transform: translatex(0); opacity: 1; transition: all 1s; transition-delay: 0.3s; } .bannertitleswiper .swiper-slide-active .timesentitle{ transform: translatex(0); opacity: 1; transition: all 1s; transition-delay: 0.5s; }*/ .imgbanner .timesentitle { transform: translatex(-50px); opacity: 0; } .imgbanner.swiper-slide-active .timestitletop .timestitle span { transform: translatex(0); opacity: 1; transition: all 1s; transition-delay: 0.5s; } .imgbanner.swiper-slide-active .timestitletop .timeslasttitle span { transform: translatex(0); opacity: 1; transition: all 1s; transition-delay: 0.7s; } .video_banner .imgbanner.swiper-slide-active .timestitletop .timestitle span { transition-delay: 8s; } .video_banner .imgbanner.swiper-slide-active .timestitletop .timeslasttitle span { transition-delay: 8.5s; } .imgbanner.swiper-slide-active .timesentitle { transform: translatex(0); opacity: 1; transition: all 1s; transition-delay: 1.2s; } .imgbanner.swiper-slide-active .timeslasttitle span { transform: translatex(0); opacity: 1; transition: all 1s; transition-delay: 1.2s; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide-active { pointer-events: auto; } @keyframes roll_8 { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes roll_9 { 0% { letter-spacing: 50px; } 100% { letter-spacing: 0; } } /*.bannertitleswiper .swiper-slide-active .timestitle{ white-space: nowrap; font-weight: 200; text-align: center; margin-bottom: 0.3rem; letter-spacing: 8px; animation: roll_9 1.8s ease-in-out; animation-fill-mode: both; animation-delay: 0.3s; }*/ .bannertitleswiper .timestitle { display: flex; font-size: 60px; font-family: initial; transform: scale(1); line-height: 1.4; } .timestitle font, .timesentitle font { opacity: 0; display: inline-block; } .bannertitleswiper .swiper-slide-active .timestitle font, .bannertitleswiper .swiper-slide-active .timesentitle font { opacity: 1; animation: roll_8 1.8s ease-in-out; animation-fill-mode: both; animation-delay: 0.3s; } .ind04 { position: relative; padding-bottom: 1px; background: #f9f9f9; } .ind04 .pic { position: absolute; right: 0; top: 0; width: 50%; height: 100%; overflow: hidden; } .ind04 .pic i { transition: all 0.5s; transform: scale(1); width: 100%; height: 100%; } .ind04 .pic em { transition: all 1s; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #f9f9f9; } .ind04 .pic.animated em { transition: all 1s; left: 100%; } .ind04 .pic:hover i { transition: all 0.5s; transform: scale(1.08); } .ind04 .next { padding-top: 70px; width: 45%; } .ind04 .next .clearfix { margin-bottom: 46px; } .ind04 .next .clearfix b { float: left; font-size: 36px; font-weight: bold; color: #333; } .ind04 .next .clearfix a { float: right; margin-top: 20px; border: 2px solid #0746af; } .ind04 .next .clearfix a span:before { background: center no-repeat; } .ind04 .next .clearfix a span:after { background: center no-repeat; } .ind04 .next .clearfix a:after { background: #0746af; } .ind04 .next p { margin-bottom: 45px; font-size: 18px; line-height: 32px; color: #333; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .ind04 .next .video_s { display: flex; margin-bottom: 63px; } .ind04 .next .video_s i { padding-left: 55px; font-size: 18px; color: #333; background: left center no-repeat; } .ind04 .next .video_s:hover i { color: #0746af; background: left center no-repeat; } .ind04 .num { margin-bottom: 70px; width: 63.3%; background: #fff; } .ind04 .num .num_box { float: left; width: calc((100% - 2px) / 3); height: 200px; border-right: #ebebeb 1px solid; } .ind04 .num .num_box:nth-child(3n) { border-right: none; } .ind04 .num .num_box .clearfix { padding: 40px 12% 23px; } .ind04 .num .num_box .clearfix span { float: left; font-size: 40px; color: #333; font-weight: bold; } .ind04 .num .num_box .clearfix i { float: left; font-size: 20px; color: #333; font-weight: bold; } .ind04 .num .num_box .clearfix .icon { float: right; display: flex; align-items: center; height: 52px; } .ind04 .num .num_box .clearfix .icon img { flex-shrink: 0; } .ind04 .num .num_box p { padding: 0 12%; font-size: 16px; line-height: 24px; } .ind05 { position: relative; padding: 90px 0 0; width: 100%; height: 610px; background: center no-repeat; overflow: hidden; } .ind05 #box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .ind05 #box ul { display: block; width: 3840px; height: 100%; animation: yd 12s linear infinite; } .ind05 #box ul li { float: left; list-style: none; } .ind05 #box ul li .image { width: 1920px; height: auto; } @keyframes yd { to { transform: translate(-1920px); } } .ind05 .wall { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 4; } .ind05 div#midground { background: no-repeat; background-size: 100% 100%; -webkit-animation: ys 200s linear infinite; -moz-animation: ys 200s linear infinite; -ms-animation: ys 200s linear infinite; animation: ys 200s linear infinite; } .ind05 div#midground_box { transform: translate(-1930px); background: no-repeat; background-size: 100% 100%; -webkit-animation: ys_box 200s linear infinite; -moz-animation: ys_box 200s linear infinite; -ms-animation: ys_box 200s linear infinite; animation: ys_box 200s linear infinite; } @keyframes ys { 0% { transform: translate(0px); } 49.99% { transform: translate(1930px); opacity: 1; } 50% { transform: translate(1930px); opacity: 0; } 50.01% { transform: translate(-1930px); opacity: 0; } 50.02% { transform: translate(-1930px); opacity: 1; } 100% { transform: translate(0px); } } @keyframes ys_box { 0% { transform: translate(-1930px); opacity: 1; } 49.99% { transform: translate(0); opacity: 1; } 99.9% { transform: translate(1930px); opacity: 1; } 99.91% { transform: translate(1930px); opacity: 0; } 99.92% { transform: translate(1930px); opacity: 1; } 100% { transform: translate(-1930px); opacity: 1; } } .ind05 .w1600 { position: relative; z-index: 5; } .ind05 .next { margin: 0 auto; width: 950px; } .ind05 .next b { margin-bottom: 38px; font-size: 36px; color: #214f9d; font-weight: bold; text-align: center; } .ind05 .next .text { margin-bottom: 38px; font-size: 18px; line-height: 34px; color: #333; text-align: center; } .ind05 .next .midwalinfo { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ind05 .next .icon { margin: 0 auto 0; width: 98px; height: 98px; background: center no-repeat; -webkit-animation-duration: 4s; animation-duration: 4s; animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -webkit-animation-name: rotate; animation-name: rotate; } .ind05 .next .smallicon { position: absolute; width: 15px; } .ind05 .next .smallicon img { width: 100%; } .ind05 .num { padding: 0 2%; background: #214f9d; margin-top: 88px; } .ind05 .num .num_box { float: left; width: 20%; height: 200px; color: #fff; } .ind05 .num .num_box .clearfix { display: flex; justify-content: center; padding: 40px 12% 20px; } .ind05 .num .num_box .clearfix span { font-size: 40px; font-weight: bold; } .ind05 .num .num_box .clearfix i { font-size: 20px; font-weight: bold; } .ind05 .num .num_box .clearfix em { margin: 26px 0 0 -5px; font-size: 12px; } .ind05 .num .num_box p { padding: 0 12%; font-size: 16px; line-height: 24px; text-align: center; } .ind05 .numbox { padding: 0 1.5%; background: #214f9d; margin-top: 88px; } .ind05 .numbox .num_box { float: left; width: calc(100% / 6); height: 200px; color: #fff; } .ind05 .numbox .num_box .clearfix { display: flex; justify-content: center; padding: 20px 12% 0px; } .ind05 .numbox .num_box .clearfix span { font-size: 37px; font-weight: bold; } .ind05 .numbox .num_box .clearfix i { font-size: 20px; font-weight: bold; } .ind05 .numbox .num_box .clearfix em { margin: 26px 0 0 -5px; font-size: 12px; } .ind05 .numbox .num_box p { padding: 53px 12% 0; font-size: 15px; line-height: 24px; text-align: center; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 1200px) { .ind05 { padding: 0.8rem 0 0; height: auto; background: center no-repeat; } .ind05 #box { display: none; } .ind05 .wall { display: none; } .ind05 .next { width: 100%; padding-bottom: 1.2rem; } .ind05 .next b { margin-bottom: 0.5rem; font-size: 0.36rem; } .ind05 .next .text { margin-bottom: 1.2rem; font-size: 0.28rem; line-height: 0.44rem; } .ind05 .next .icon { margin: 0 auto 0; width: 1.5rem; height: 1.5rem; background: center no-repeat; background-size: 100% auto; } .ind05 .next .smallicon { width: 0.2rem; } .ind05 .num { display: none; } .ind05 .numbox { display: none; } } .newsbox { background: #f9f9f9; padding: 70px 0; margin-top: 70px; } .newscont { position: relative; display: flex; padding-top: 60px; } .newstitle { font-size: 36px; color: #1f4e9c; text-align: center; font-weight: bold; } .newsbrief { text-align: center; font-size: 18px; margin-top: 20px; } .newslist { width: 38%; height: 410px; position: relative; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); transition: all 1s; border-radius: 10px; overflow: hidden; } .newslist.curr { width: 58%; } .newslist.curr::before { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: bottom no-repeat; background-size: 100% auto; content: " "; } .newslist i { width: 100%; height: 100%; } .newsposcontlisticon-1 { width: 16px; height: 19px; background: center no-repeat; background-size: cover; } .newsposcontlisticon-2 { width: 20px; height: 20px; background: center no-repeat; background-size: cover; } .newslist.curr .newsposconttext { color: #fff; } .newslist.curr .newsposcontlisticon-1 { background: center no-repeat; background-size: cover; } .newslist.curr .newsposcontlisticon-2 { background: center no-repeat; background-size: cover; } .newslist.curr .newsmoreimg { background: center no-repeat; background-size: cover; } .newslist.curr .newsmoretext { color: #fff; } .newsmaxbg { display: none; } .newslist.curr .newsmaxbg { display: block; } .newspos { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; } .newscontleft { width: calc(100% - 30.5%); display: flex; justify-content: space-between; } .newslistbox { height: 250px; display: block; } .newslist.curr .newslistbox { display: none; } .newslistbox i { width: 100%; height: 100%; } .newslistboxbtn { padding: 25px 5% 36px; box-sizing: border-box; width: 100%; } .newslistboxtext { line-height: 28px; height: 56px; color: #666; } .newslist.curr .newslistboxtext { display: none; } .newscontright { margin-left: 2.5%; width: 28%; border-radius: 10px; overflow: hidden; } .newsposinfo { width: calc(100% - 80px); margin-bottom: 40px; } .newsposcont { display: flex; align-items: center; margin-top: 20px; } .newspostitle { font-size: 28px; color: #fff; line-height: 45px; display: none; } .newslist.curr .newspostitle { display: block; } .newsposcontlist { display: flex; align-items: center; margin-left: 25px; } .newsposcontlist:first-child { margin-left: 0; } .newsposconttext { margin-left: 15px; color: #666; font-size: 14px; } .newsmore { display: flex; align-items: center; margin-top: 25px; color: #666; } .newsmoreimg { margin-left: 15px; background: center no-repeat; background-size: cover; width: 7px; height: 13px; } .newscontright { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .newscontrightlist { width: calc(100% - 80px); margin: 0 auto; height: calc(100% / 3); display: flex; flex-direction: column; justify-content: center; border-top: 1px dashed #ccc; } .newscontrightlist:first-child { border-top: 0; } .newscontrightlist:hover .newscontrighttext { color: #1f4e9c; } .newscontrighttop { display: flex; align-items: center; justify-content: space-between; } .newscontrightcard { background: #f15921; border-radius: 5px; padding: 5px 10px; color: #fff; font-size: 14px; } .newscontrighttime { margin-left: 10px; color: #999; } .newscontrightleft { display: flex; align-items: center; } .newscontrighttext { margin-top: 10px; font-size: 18px; line-height: 31px; color: #333; } .exhibition { display: flex; justify-content: center; align-items: center; margin-top: 65px; } .exhibitionlist { width: 160px; height: 58px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 10px; margin-left: 70px; } .exhibitionlist:first-child { margin-left: 0; } .exhibitiontext { color: #666; } .exhibitionicon { width: 7px; height: 13px; background: center no-repeat; background-size: cover; margin-left: 10px; } .exhibitionlist:hover { border: 1px solid #005fa3; } .exhibitionlist:hover .exhibitiontext { color: #005fa3; } .exhibitionlist:hover .exhibitionicon { background: center no-repeat; background-size: cover; } .m_newsbox { display: none; } @media (max-width: 1200px) { .newsbox > .w1600 { display: none; } .newsbox { padding: 0.76rem 0 1px; margin-top: 0.7rem; } .m_newsbox { display: block; } .m_newsbox .top { margin-bottom: 0.6rem; text-align: center; } .m_newsbox .top b { margin-bottom: 0.3rem; font-size: 0.36rem; color: #0d4997; font-weight: bold; } .m_newsbox .top p { font-size: 0.26rem; color: #333; } .m_newsbox .cen { margin-bottom: 0.8rem; } .m_newsbox .cen .swiper-slide { border-radius: 0.08rem; overflow: hidden; background: #fff; } .m_newsbox .cen .swiper-slide .pic { position: relative; width: 100%; height: 4.2rem; overflow: hidden; } .m_newsbox .cen .swiper-slide .pic i { transition: all 0.5s; transform: scale(1); width: 100%; height: 100%; } .m_newsbox .cen .swiper-slide .pic em { position: absolute; left: 0; top: 0; padding: 0 0.33rem; line-height: 0.54rem; font-size: 0.26rem; color: #fff; border-radius: 0.08rem; background: #999ea3; } .m_newsbox .cen .swiper-slide .text { padding: 0.4rem 0.3rem; } .m_newsbox .cen .swiper-slide .text b { margin-bottom: 0.27rem; font-size: 0.3rem; color: #333; } .m_newsbox .cen .swiper-slide .text .clearfix { margin-bottom: 0.34rem; display: flex; } .m_newsbox .cen .swiper-slide .text .clearfix i { padding: 0 0.36rem; font-size: 0.26rem; color: #999; background: left center no-repeat; background-size: 0.19rem auto; } .m_newsbox .cen .swiper-slide .text .clearfix .i2 { background: left center no-repeat; background-size: 0.23rem auto; } .m_newsbox .cen .swiper-slide .text p { font-size: 0.26rem; line-height: 0.4rem; color: #333; } .m_newsbox .swiper-pagination { position: relative; bottom: inherit; display: flex; justify-content: center; align-items: center; margin-top: 0.7rem; } .m_newsbox .swiper-pagination .swiper-pagination-bullet { opacity: 1; width: 0.18rem; height: 0.18rem; border-radius: 100%; background: #dadada; } .m_newsbox .swiper-pagination .swiper-pagination-bullet-active { background: #184997; } .m_newsbox .swiper-pagination.swiper-pagination-lock { margin-top: 0; } .m_newsbox .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.2rem; } .m_newsbox .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0; } .m_newsbox .more_s { margin: 0.8rem auto 0.8rem; width: 6rem; } .m_newsbox .more { width: 2.6rem; height: 0.9rem; display: flex; justify-content: center; align-items: center; background: #0a4591; border-radius: 0.1rem; } .m_newsbox .more p { padding-right: 0.4rem; font-size: 0.26rem; color: #fff; background: right center no-repeat; } .m_newsbox .bot .list { padding: 0 0.3rem; border-radius: 0.08rem; background: #fff; } .m_newsbox .bot .list a { padding: 0.6rem 0; border-bottom: #efefef 1px dashed; } .m_newsbox .bot .list a:last-child { border-bottom: none; } .m_newsbox .bot .list a .clearfix { margin-bottom: 0.4rem; line-height: 0.5rem; } .m_newsbox .bot .list a .clearfix i { float: left; padding-left: 0.4rem; font-size: 0.26rem; color: #999; background: left center no-repeat; background-size: 0.24rem auto; } .m_newsbox .bot .list a .clearfix em { float: right; padding: 0 0.2rem; font-size: 0.26rem; color: #fff; background: #f15921; border-radius: 0.08rem; } .m_newsbox .bot .list a p { font-size: 0.3rem; line-height: 0.4rem; color: #333; } } .datas .tab { border-bottom: 1px solid #d2d2d2; line-height: 0.46rem; margin-bottom: 0.1rem; } .datas .tab a { display: inline-block; text-align: center; transition: all 0.3s; color: #505258; font-weight: bold; font-size: 18px; position: relative; border-bottom: 3px solid #fff; } .datas .tab a a { margin-left: 50px; } .datas .tab a.current { color: #ee4416; display: inline-block; border-bottom: 3px solid; } .datas .tab a a:before { content: ""; position: absolute; top: 45%; left: -41%; width: 1px; height: 14px; margin-top: -2px; background-color: #d2d2d2; } .datas .p6 .sjkf { background: #eaf5f8; /* padding: 20px 20px; */ margin-bottom: 30px; } .datas .p6 .sjkf li { float: left; width: 25%; } .datas .p6 .sjkf li a { display: block; text-decoration: none; height: 81px; line-height: 81px; cursor: pointer; font-size: 16px; color: #666666; position: relative; padding: 0 5px; } .datas .sjkf li i { background: no-repeat; /* border: 1px solid #000; */ display: inline-block; vertical-align: middle; transition: all 0.3s; width: 48px; height: 48px; border-radius: 100%; margin: 0px 10px; } .datas .sjkf li i.i2 { background-position: -282px 0; } .datas .sjkf li i.i3 { background-position: -562px 0; } .datas .sjkf li i.i4 { background-position: -842px 0; } .bannernumtext { transform: translatex(-50px); opacity: 0; width: 50%; } .bannernumtext img{ width: 100%; } .imgbanner.swiper-slide-active .bannernumtext { transform: translatex(0); opacity: 1; transition: all 1s; transition-delay: 0.8s; }