@charset "utf-8"; /** * created by sunjia on 2025/03/21. * @description: index style */ .wrapbanner{position: relative;height: auto;width: 100%;z-index: 10; overflow: hidden;padding-bottom: 180px;} .banner{position: relative;background: #f5f5ff;border-radius: 0 0 0 150px;} .banner::before{ content: '';display: block;width: 150px;height: 150px; background: url(/uploads/image/eimages/banner_before.png) no-repeat left bottom/cover; position: absolute;left: 0;bottom: 0;z-index: 11;pointer-events: none;} .banner a{display:block;position:relative; /* border-radius: 0 0 0 150px; */overflow: hidden;} .banner .gp-img{ position: relative;background-size: 100% auto;padding-bottom: 39.47%;} .banner .title{margin: 0 0;color: #fff; padding: 25px;padding-left: 5px;text-shadow: 0px 3px 2.82px rgba(40, 40, 40, 0.86);font-family: 'noto serif sc';font-weight: bold; position: absolute;left: 4.47vw;bottom: 50%;z-index: 10;transform: translatey(50%); } .banner .gp-img video,.banner .gp-img img{width:100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;} .banner video{position: absolute;left: 50%;top: 50%;transform: translate3d(-50%,-50%,0);z-index: 1;width: auto;min-width: 100%;height: 135vh;} @-webkit-keyframes scalebig{ 0%{transform:scale(1)} 100%{transform:scale(1.1)} } @keyframes scalebig{ 0%{transform:scale(1)} 100%{transform:scale(1.1)} } .banner .swiper_menu{position: absolute;left: 190px;bottom: 45px;width: auto;right: auto;z-index: 10;align-items: flex-end;} .banner .arrow{width: 45px;height: 45px;background: center no-repeat;display: inline-block;vertical-align: top;margin: 0;cursor: pointer;} .banner .prev{left: 0px;background-image: url(/uploads/image/eimages/banner_prev.png);} .banner .next{right: 0px;background-image: url(/uploads/image/eimages/banner_next.png);} .banner .arrow:hover{} .banner .banner_number{display: block;padding: 0 11px;line-height: 45px;color: #fff;} .banner .banner_number .cur,.banner .banner_number .total{display: inline-block;vertical-align: top;padding: 0 12px;} .banner .swiper-pagination-bullets{ bottom: 30px;pointer-events: none;} .banner .swiper-pagination-bullets .swiper-pagination-bullet{ width: 34px; height: 15px; background: url(/uploads/image/eimages/banner_icon.png) no-repeat center;opacity: 0.5; margin: 0 12.5px;pointer-events: all; } .banner .swiper-pagination-bullets .swiper-pagination-bullet-active{ opacity: 1;} .banner .slick-img {display: block;height: 100vh;overflow: hidden;position: relative;background-size: cover !important;padding-bottom: 0; z-index: 0;} /* .banner .slick-img::before{ content: ''; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; z-index: 1;} */ .banner .slick-img img {min-width: 100%;object-fit: cover;} .banner .slick-img video, .banner .slick-img img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;} .banner a{position: relative;display: block;} .banner a::before{ content: '';display: block;width: 100%;height: 0px;padding-bottom: 7.74%; background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%); background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%); opacity: 0.55;position: absolute;bottom: 0;left: 0;z-index: 1;pointer-events: none; } .banner .horn{ display: none; height: 0; padding-bottom: 9.47%; /* height: 180px; */ width: 100%;position: absolute;right: 0;top: calc(100% - 0px); overflow: hidden;} .banner .horn::before{ content: '';display: block;width: 100%;height: 0;padding-bottom: 57.8%; background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%); background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%); opacity: 0.65;position: absolute;bottom: 0;right: 0;z-index: 1;pointer-events: none;} .banner .txt{position: absolute;width: 100%;left: 0;bottom: 37px;color: #fff;font-size: 30px;z-index: 2;font-weight: bold;line-height: 1;} .banner .txt .block{box-sizing: border-box;padding-left: 197px;} .content{ position: relative; margin-top: -180px; background: #fafaff; z-index: 11; overflow: hidden; } .modetil{ color: #111; font-family: 'optimalt'; line-height: 1; text-align: center; } .modemore{ display: block; text-align: right; pointer-events: none; } .modemore span{ pointer-events: all; display: inline-block; text-align: left; font-family: 'optimalt'; color: #111; width: 100px; line-height: 40px; background: url(/uploads/image/eimages/more_bg.png) no-repeat center right; } .gp-f60{ font-size: 60px; } .row03{ background: #fafaff; overflow: hidden; position: relative; } .row03 .modetil{ text-align: left; } .row03 .left{ position: relative; width: 27.44%; flex-shrink: 0; padding: 100px 0 80px; } .row03 .left .linesswiper{ position: absolute; width: 100%; max-width: 420px; left: 0; bottom: 0; z-index: 1; overflow: hidden; pointer-events: none; } .row03 .left .linesswiper img{ width: 100%; } .row03 .years{ font-family: 'avanti'; } .linesswiper .swiper-wrapper, .linesswiper .swiper-slide{ transition-timing-function: linear !important; } .row03 .right{ position: relative; padding: 100px 0 80px; padding-left: 60px; z-index: 1; width: calc(100% - 27.44%); } .row03 .right .modecon{ /* padding-bottom: 118px; */ } .row03 .right > img{ min-width: 1278px; } .row03 .right::before{ content: ''; display: block; width: 200%; height: 100%; background: #eeeef8; position: absolute; left: 0; top: 0; z-index: -1; } .row03 .arrows{ margin-top: 80px; font-family: 'avanti'; color: #dadae6; justify-content: flex-start; line-height: 52px; } .row03 .arrows .flex{ margin-left: 20px; background: #fff; padding: 0 30px; cursor: pointer; } .row03 .arrows .icon{ width: 34px; background: url(/uploads/image/eimages/news-arrow.png) no-repeat center; } .row03 .news-prev .icon{ margin-right: 23px; } .row03 .news-next .icon{ transform: rotatez(180deg); margin-left: 23px; } .row03 .arrows .flex:hover{background: #1735d1;} .row03 .arrows .flex:hover .icon{ background: url(/uploads/image/eimages/news-arrow_hover.png) no-repeat center; } .newsswiperbox{ width: calc(100% 200px); overflow: hidden; } .newsswiper{ max-width: 915px; color: #111; font-weight: bold; } .newsswiper .title{ line-height: 34px; height: 68px; font-family: 'noto sans sc'; } .newsswiper a:hover .title{ color: #333; } .newsswiper .summary{ line-height: 30px; -webkit-line-clamp: 5; color: #999; font-family: 'noto sans sc'; font-weight: normal; margin-top: 18px; } .newsswiper .date{ color: #1735d1; margin-top: 58px; font-family: 'arial'; font-weight: normal; line-height: 1; } .row03 .modemore{ margin-top: 78px; } .gp-relative{ position: relative;z-index: 2;} .row03 .gp-pc-more{ transition: all 0s ease !important; opacity: 0; pointer-events: none; } .row03 .gp-moble-more{ margin-top: 0; display: inline-block; text-align: right; position: absolute; bottom: 80px; right: 0; z-index: 2; } .row03 .mask{ background-image: -moz-linear-gradient( 0deg, rgba(228,228,242,0) 0%, rgb(228,228,242) 100%); background-image: -webkit-linear-gradient( 0deg, rgba(228,228,242,0) 0%, rgb(228,228,242) 100%); background-image: -ms-linear-gradient( 0deg, rgba(228,228,242,0) 0%, rgb(228,228,242) 100%); width: 150px; height: 100%; position: absolute; top: 0; right: 0; pointer-events: none; z-index: 1; } /* row01 */ .row01{ position: relative; z-index: 1; padding: 100px 0; } .row01 .modecon{ margin-top: 60px; /* overflow: hidden; */ overflow-x: clip; } .row01 .modemore{ margin-top: 47px; cursor: pointer; } .row01swiper{} .row01swiper ul{ align-items: flex-end;} .row01swiper li{ position: relative; padding-bottom: 40px; padding-left: 30px; margin-top: 40px; transition: all 0.35s ease; } .row01swiper li:hover{ transform: translatey(-20px); } .row01swiper li::before{ content: ''; display: block; width: 100px; height: 2px; background: #9c00b8; position: absolute; bottom: 0; left: 0; z-index: 1; pointer-events: none; transition: width 0.2s ease, background 0.2s ease 0.2s, height 0.4s ease 0.2s; } .row01swiper li:hover::before{ width: 34px; height: 15px; background: url(/uploads/image/eimages/new_icon.png) no-repeat center top; } .row01swiper li::after{ content: ''; display: block; width: 1px; height: calc(100% - 40px); max-height: 0px; background: #9c00b8; position: absolute; left: 0px; bottom: 40px; z-index: 1; transition: max-height 0.35s ease 0.3s; } .row01swiper li:hover::after{ max-height: 100%; } .row01swiper li a{ position: absolute;top: 0px;right: 0;bottom: 0;left: 0;z-index: 1; } .row01swiper .itemtil{ height: 68px; line-height: 34px; font-family: 'noto sans sc'; font-weight: bold; } .row01swiper .itemimg{ margin-bottom: 24px; box-shadow: 0 0 20px 10px rgba(51, 51, 113, 0.33); } .row01swiper .itemimg .gp-img-responsive{ padding-bottom: 135.31%; padding-bottom: 0; height: auto; font-size: 0; background: transparent; } .row01swiper .itemimg img{ width: 100%;} .row01swiper .itemsummary{ margin-top: 22px; line-height: 30px; height: 90px; color: #888; } .row01swiperarrows{display: none;} /* row02 */ .row02{ border-radius: 150px 150px 0 0; background: #f3eefe; padding: 80px 0 104px; } .row02 .modecon{ margin-top: 30px; position: relative; } .authorlist{ position: relative; flex-wrap: wrap; justify-content: flex-start; margin: 0 -15px; } .authorlist li{ margin-top: 30px; } .row02 .modemore{ width: calc(40% - 15px); background: #dadaf2; border-radius: 30px; position: absolute; right: 0px; bottom: 0px; z-index: 1; pointer-events: all; } .row02 .modemore .textitem{ display: none;} .row02 .modemore .textitem.show{ display: block; animation: authorshow 0.6s ease-in-out forwards;} @keyframes authorshow { 0%{ transform: translatey(15px);opacity: 0;} 100%{ transform: translatey(0px);opacity: 1;} } .row02 .modemore .bg{ height: 0px; padding-bottom: 47.76%; } .row02 .modemore .text{ position: relative; max-width: 330px; line-height: 50px; text-align: left; padding: 80px 0 0 75px; box-sizing: content-box; color: #333333; } .row02 .modemore .text::before{ content: ''; display: block; width: 5px; height: 5px; background: #1735d1; position: absolute; top: 99px; left: 50px; } .row02 .modemore .cricle{ width: 120px; height: 120px; border-radius: 50%; border: 1px solid #1735d1; position: absolute; bottom: 50%; transform: translatey(50%); right: 60px; z-index: 1; cursor: pointer; background: url(/uploads/image/eimages/author_icon.png) no-repeat center; animation: more 4s ease infinite; } @keyframes more { 0%{ background-position: -50% 50%;} 25%{ background-position: 50% 50%;} 80%{ background-position: 150% 50%;} 100%{ background-position: 150% 50%;} } .authorlist li{ width: 20%; } .authorlist li .box{ position: relative; margin: 0 15px; text-align: center; overflow: hidden; border-radius: 30px; background: #fff; transition: all 0.35s ease; } .authorlist li .box:hover{ transform: translatey(-10px); background: #1735d1; box-shadow: 0px 50px 50px 0px rgba(17, 17, 126, 0.3); } .authorlist li .box::before, .authorlist li .box::after{ content: ''; display: block; width: 220px; height: 217px; background: url(/uploads/image/eimages/author_hover.png) no-repeat center/cover; position: absolute; right: calc(100% - 130px); top: calc(100% - 130px); z-index: 1; pointer-events: none; opacity: 0; transition: all 0.35s ease; } .authorlist li .box::after{ right: auto; top: auto; left: calc(100% - 120px); bottom: calc(100% - 40px); } .authorlist li .box:hover::before, .authorlist li .box:hover::after{ animation: rotate360 12s linear infinite; opacity: 1; } @keyframes rotate360 { 0%{transform: rotatez(0deg);} 100%{transform: rotatez(720deg);} } .authorlist li a{ position: relative; display: block; height: 0px; padding-top: 48px; padding-bottom: calc(100% - 48px); z-index: 2; } .authorlist li a:hover{ color: #fff; } .authorlist .img{ width: 150px; margin: 0 auto 0; border-radius: 50%; overflow: hidden; } .authorlist .gp-img-responsive{ padding-bottom: 100%; background: transparent; } .authorlist li .box .name{ font-family: 'noto sans sc'; font-weight: 800; line-height: 1; margin-top: 34px; } /* row04 */ .row04{ padding: 80px 0 90px; background: #fff; } .row04 .modecon{ margin-top: 60px; } .row04 .videoswiper{ position: relative; max-width: 720px; margin: 0 auto; } .row04 .videoswiper .swiper-slide{ display: block; opacity: 0; transition: opacity 0.35s ease; border-radius: 20px; filter: brightness(0.5); border-radius: 20px; overflow: hidden; } .row04 .videoswiper .swiper-slide.swiper-slide-prev, .row04 .videoswiper .swiper-slide.swiper-slide-next, .row04 .videoswiper .swiper-slide.swiper-slide-active{ opacity: 1;} .row04 .videoswiper .swiper-slide.swiper-slide-active{ filter: brightness(1); } .row04 .videoswiper img{ width: 100%; } .row04 .videoswiper .gp-img-responsive{ padding-bottom: 56.25%; } .videoarrows{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); z-index: 1; pointer-events: none; } .video-arrow.prev{ margin-left: 25px;pointer-events: all;} .video-arrow.next{ margin-right: 25px;pointer-events: all;} .row04 .modemore{ margin-top: 60px;} @media screen and (max-width:1680px) { .gp-f60{ font-size: 50px;} } @media screen and (max-width:1620px) { .row03 .arrows .flex{ margin-left: 10px; padding: 0 20px; } .row03 .news-prev .icon{margin-right: 20px;} .row03 .news-next .icon{margin-left: 20px;} .authorlist li a{ padding-top: 30px; padding-bottom: calc(100% - 30px); } .authorlist .img{ /* margin: 30px auto 0; */ } .authorlist li .box .name{ margin-top: 20px; } .authorlist li a{ padding-bottom: 30px; padding-bottom: calc(100% - 30px); } .row02 .modemore .text{ max-width: 280px; padding: 60px 0 0 35px; font-size: 22px; } .row02 .modemore .text::before{ top: 80px; left: 20px; } .row02 .modemore .cricle{ width: 100px; height: 100px; } } @media screen and (max-width:1480px) { .gp-f60{ font-size: 46px;} .row03 .arrows{ margin-top: 40px; line-height: 42px; } .row03 .arrows .flex{ margin-left: 0px; margin-right: 15px; padding: 0 10px; } .row03 .news-prev .icon{margin-right: 15px;} .row03 .news-next .icon{margin-left: 15px;} .row03 .years{ font-size: 24px; } .row01swiper li{ padding-left: 20px; padding-bottom: 20px; margin-top: 20px; } .row01swiper .itemtil{ font-size: 20px; line-height: 26px; height: 52px; } .row01swiper .itemimg{ margin-top: 15px; } .row02 .modemore .text{ max-width: 260px; padding: 40px 0 0 30px; } .row02 .modemore .text::before{ top: 65px; left: 15px; } .row02 .modemore .cricle{ right: 30px; } .authorlist li a{ padding-bottom: 20px; padding-bottom: calc(100% - 20px); } .authorlist li a{ padding-top: 20px; } .authorlist .img{ /* margin: 20px auto 0; */ } .authorlist li .box .name{ margin-top: 10px; } } @media screen and (max-width:1400px) { .banner .swiper-pagination-bullets{ bottom: 20px; } .banner::before{ width: 100px; height: 100px;bottom: -2px; } .gp-f60{ font-size: 40px;} } @media screen and (max-width:1280px) { .authorlist ul{ margin: 0 -10px; } .authorlist li .box{ margin: 0 10px; } .authorlist .img{ width: 130px; } .authorlist li .box .name{ font-size: 18px; } .gp-f60{ font-size: 40px;} } @media screen and (max-width:1240px) { .row03 .right{ padding: 60px 0 60px 40px; } .row03 .modemore{ margin-top: 70px; } .row01{ padding: 60px 0; } .row01 .modecon{ margin-top: 40px; } .row01 .modemore{ margin-top: 40px; } .row02{ padding: 60px 0; border-radius: 100px; } .row02 .modecon{ margin-top: 40px; } .row02 .modemore .bg{ padding-bottom: 198px; } .row02 .modemore .text{ max-width: 230px; font-size: 20px; line-height: 40px; } .row02 .modemore .text::before{ top: 55px; } .row04{ padding: 60px 0; } .row04 .modecon{ margin-top: 40px; } .row04 .modemore{ margin-top: 40px; } .videoarrows{ width: 90vw; } .row03 .gp-moble-more{ right: 30px; } .gp-f60{ font-size: 36px;} .row03 .left{ padding: 70px 0 50px;} } @media screen and (max-width:1200px) { .authorlist li a{ padding-top: 10%; padding-bottom: 90%; } .row02 .modecon{ margin-top: 20px;} .row01, .row02, .row04{ padding: 50px 0;} .row03 .right{ padding: 50px 0 50px 35px;} .row01 .modemore, .row04 .modemore{ margin-top: 30px;} } @media screen and (max-width:1100px) { .gp-f60{ font-size: 36px; } .banner .swiper-pagination-bullets{ bottom: 10px; } .videoarrows{ width: 95vw; } .video-arrow{ max-width: 45px; } .row02 .modemore .cricle{ width: 80px; height: 80px; right: 20px; } .row03 .right{ padding: 60px 0 60px 30px; } .authorlist li a{ padding-top: 10%; padding-bottom: 90%; } .authorlist .img{ width: 100px; } .authorlist li .box .name{ margin-top: 5%; } } @media screen and (max-width:998px) { .banner::before{ width: 60px;height: 60px;} /* .banner .gp-img{ padding-bottom: 36% !important; background-size: cover !important; background-position: center;} */ .row03{ background: #eeeef8;} .row03 .mask{ display: none;} .row03 .gp-moble-more{display: none;} .row03 .gp-pc-more{ opacity: 1; pointer-events: all; } .row03 .modecon.flex{ flex-direction: column; padding: 40px 0; } .row03 .left{ width: 100%; padding: 0; display: flex; display: -ms-flexbox; justify-content: space-between; align-items: flex-end; } .row03 .arrows{ margin-top: 0; margin-right: 0px; } .row03 .left .linesswiper{ display: none;} .row03 .right{ margin-top: 30px; padding: 0; width: 100%; } .row03 .right::before{ display: none; } .newsswiperbox{ width: 100%; } .newsswiper .date{ margin-top: 20px; } .row01{ padding: 40px 0; } .row01 .modecon{ overflow: visible;} .row01 .modemore{ margin-top: 30px; } .row01swiper .itemsummary{ margin-top: 20px; line-height: 24px; height: auto; } .row02{ padding: 40px 0; border-radius: 20px; } .row02 .modecon{ margin-top: 30px; } .authorlist li{ width: 25%; } .row02 .modemore{ position: relative; width: 100%; margin-top: 20px; } .authorlist li{ margin-top: 20px; } .row02 .modemore .bg{ padding-bottom: 0; height: auto; min-height: 100px; } .row02 .modemore .text{ max-width: 50%; padding: 15px 0 15px 30px; } .row02 .modemore .text::before{ top: 34px; } .newsswiper .title{ font-size: 20px; } .row04{ padding: 40px 0; } .row04 .modecon{ margin-top: 30px; } .row04 .modemore{ margin-top: 30px; } .row01swiperarrows{ position: relative; display: flex; justify-content: flex-start; } .row01swiperarrows div{ width: 35px; height: 35px; line-height: 35px; text-align: center; background: #1735d1; color: #fff; font-size: 0; position: absolute; left: 20px; top: 25px; z-index: 1; } .row01swiperarrows div::before{ font-size: 20px; } .row01swiperarrows .next-btn{ margin-left: 10px; left: 50px; } .row03 .modemore{ margin-top: 30px;} } @media screen and (max-width:767px) { /* .banner .gp-img{ padding-bottom: 42% !important;} */ .banner .swiper-pagination-bullets .swiper-pagination-bullet{ width: 30px; height: 12px; margin: 0 5px; } .row03 .modecon.flex{ padding: 30px 0; } .row03 .right{ margin-top: 10px; } .newsswiper .title{ line-height: 30px; font-weight: normal; height: auto; font-size: 18px; } .newsswiper .summary{ line-height: 24px; font-size: 16px; margin-top: 10px; } .row03 .modemore{ margin-top: 20px; } .row03 .arrows{ line-height: 35px; } .authorlist li{ width: 33.33%; margin-top: 10px; } .row01swiper .itemtil{ font-size: 18px; font-weight: normal; } .row01swiper .itemimg{ margin-bottom: 15px; } .row01swiper .itemsummary{ margin-top: 10px; } .row01{ padding: 30px 0; } .row01 .modecon{ margin-top: 20px; } .row02{ padding: 30px 0; } .row04{ padding: 30px 0; } .row04 .videoswiper{ max-width: 100%; width: 80%; } .row04 .modecon{ margin-top: 20px; } .banner::before{ width: 50px; height: 50px; } .gp-f60{ font-size: 30px; } .row03 .left{ flex-direction: column; align-items: center; } .row03 .modetil{ margin-bottom: 10px; } .newsswiper{ width: 100%; } } @media screen and (max-width:680px) { /* .banner .gp-img{ padding-bottom: 54% !important;} */ } @media screen and (max-width:580px) { /* .banner .gp-img{ padding-bottom: 60% !important;} */ .authorlist li{ width: 50%; } .authorlist li a{ padding-top: 20%; padding-bottom: 80%; } } @media screen and (max-width:480px) { .banner::before{ width: 20px;height: 20px; bottom: 0;} /* .banner .gp-img{ padding-bottom: 75% !important;} */ .row01swiper li{ margin-top: 0;} .row02 .modemore .text{ max-width: unset; width: calc(100% - 140px); } .authorlist li a{ padding-top: 15%; padding-bottom: 85%; } } @media screen and (max-width:414px) { .row01 .modemore{ margin-top: 10px; } .authorlist li a{ padding-top: 10%; padding-bottom: 90%; } .row04 .videoswiper{ width: 90%; } .row01swiperarrows div{ top: 15px; } .banner .swiper-pagination-bullets{ bottom: 3px;} } @media screen and (max-width:370px) { /* .banner .gp-img{ padding-bottom: 100%;} */ .authorlist li{ width: 100%; } .authorlist li a{ padding-top: 25%; padding-bottom: 75%; } }