.title { width: 100%; height: 60px; background: rgba(0, 0, 0, 0.5); min-width: 1220px; position: fixed; top: 0; left: 0; z-index: 99; } .title .title-box { width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; display: flex; align-items: center; } .title .title-box .title-logo { width: 245px; height: 34px; margin-right: 74px; color: #fff; display: flex; align-items: center; } .title .title-sub-name { font-size: 12px; transform: scale(0.68) translateX(-66px); width: 282px; opacity: 0.75; } .title .title-name { font-family: hanyiyaku; font-size: 16px; line-height: 22px; } .title .title-box .title-logo img { width: 34px; height: 34px; margin-right: 10px; border-radius: 5px; } .title .navbar-nav { flex: 1; width: 0; display: flex; } .title .nav-link { color: #fff; font-weight: 400; font-size: 15px; color: #FFFFFF; line-height: 21px; text-align: left; font-style: normal; padding: 0 16px; cursor: pointer; } .title .title-button { display: flex; } .title .title-btn { width: 100px; height: 34px; border-radius: 2px; border: 1px solid #FFFFFF; color: #FFFFFF; text-align: center; box-sizing: border-box; line-height: 32px; margin-right: 10px; cursor: pointer; } .title .title-btn:hover { border-color: #0971FF; color: #0971FF; } .title .title-btn.register { margin-right: 0px; background: #0971FF; border-color: #0971FF; } .title .title-btn.register:hover { color: #FFFFFF; background: #3696ff; border-color: #3696ff; } .banner { padding-top: 60px; background: rgba(21, 26, 41, 1); } .banner .swiper { width: 100%; min-width: 1220px; height: 498px; position: relative; } .banner .swiper-pagination-bullet { width: 50px; height: 1px; border: 2px solid #979797; opacity: 0.5; border-radius: 0; } .banner .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 6px; } .banner .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .banner .swiper-horizontal>.swiper-pagination-bullets, .banner .swiper-pagination-bullets.swiper-pagination-horizontal, .banner .swiper-pagination-custom, .banner .swiper-pagination-fraction { bottom: 20px; } .banner .swiper-slide { width: 100%; height: 100%; background: #151A29 url('https://file-node.oss-cn-shanghai.aliyuncs.com/youji/1da909133e7e4ceb86928bb1af23533a') no-repeat; background-size: 100% 100%; } .banner .slide-box { height: 100%; width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; color: #fff; } .banner .banner-img { width: 435px; height: 308px; margin-right: 84px; } .banner .banner-img img { width: 100%; height: 100%; } .banner .banner-title { font-weight: 500; font-size: 36px; line-height: 50px; margin-bottom: 12px; } .banner .banner-sub-title { font-weight: 300; font-size: 20px; line-height: 28px; opacity: 0.7; margin-bottom: 50px; } .banner .banner-button { width: 160px; height: 44px; background: #0971FF; border-radius: 2px; font-weight: 500; font-size: 16px; line-height: 44px; text-align: center; margin-bottom: 30px; cursor: pointer; } .banner .banner-button:hover { color: #FFFFFF; background: #3696ff; border-color: #3696ff; } .banner .banner-button .huifont-jiantou { font-size: 13px; margin-left: 9px; } .banner .banner-sub-item { font-size: 16px; margin-bottom: 20px; padding-left: 22px; position: relative; } .banner .banner-sub-item::before { content: ''; position: absolute; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 6px; background: #0971FF; left: 6px; } .banner .banner-sub-list { padding: 30px 0; } .side-type { width: 100%; min-width: 1220px; height: 122px; background: #202633; } .side-type .side-type-box { width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; display: flex; align-items: center; } .side-type .side-type-item { flex: 1; width: 0; } .side-type .side-type-title { display: flex; align-items: center; font-weight: 500; font-size: 18px; color: #FFFFFF; line-height: 25px; } .side-type .side-type-title img { width: 34px; height: 34px; margin-right: 12px; } .side-type .side-type-content { margin-top: 8px; font-size: 14px; color: #7D7B85; line-height: 20px; } .product { padding: 100px 0; width: 100%; min-width: 1220px; } .product .product-box { width: 100%; max-width: 1200px; margin: 0 auto; } .product .product-title { text-align: center; font-weight: 600; font-size: 40px; color: #1F2329; line-height: 56px; margin-bottom: 13px; } .product .product-sub-title { text-align: center; font-size: 18px; color: #5D6C82; line-height: 30px; opacity: 0.85; margin-bottom: 52px; } .product .product-tab { display: flex; justify-content: center; border-bottom: 1px solid rgba(224, 228, 235, 0.5); padding-bottom: 18px; margin-bottom: 48px; } .product .product-tab-item { font-size: 20px; color: #5D6C82; line-height: 28px; width: 200px; text-align: center; cursor: pointer; position: relative; } .product .product-tab-item::before { content: ''; position: absolute; width: 100px; height: 3px; background: #0971FF; bottom: -19px; left: 50px; display: none; } .product .product-tab-item:hover { color: #0971FF; } .product .product-tab-item:hover::before { display: block; } .product .product-tab-item.active { color: #0971FF; } .product .product-tab-item.active::before { display: block; } .product .project-content { display: flex; } .product .project-img { width: 746px; height: 420px; background: #212630; border-radius: 16px; overflow: hidden; margin-right: 30px; } .product .project-img img { width: 100%; height: 100%; } .product .project-article { flex: 1; width: 0; } .product .article-title { font-weight: 600; font-size: 28px; color: #1F2329; line-height: 40px; padding: 25px 0; } .product .article-content { font-size: 16px; color: #5D6C82; line-height: 30px; opacity: 0.85; } .product .article-button { width: 120px; height: 36px; line-height: 36px; background: #0971FF; border-radius: 2px; text-align: center; color: #fff; font-weight: 500; font-size: 16px; margin-top: 50px; cursor: pointer; } .product .article-button:hover { color: #FFFFFF; background: #3696ff; border-color: #3696ff; } .solution { padding-top: 96px; background: #F7FAFD; } .solution .solution-title { font-weight: 600; font-size: 40px; color: #1F2329; line-height: 56px; text-align: center; margin-bottom: 44px; } .solution .solution-tab { width: 648px; margin: 0 auto; display: flex; background: #ECF1FA; border-radius: 28px; height: 56px; align-items: center; margin-bottom: 40px; position: relative; } .solution .solution-item { width: 25%; text-align: center; font-weight: 600; font-size: 18px; color: #8E95A8; cursor: pointer; position: relative; z-index: 9; transition: color 0.3s; } .solution .solution-item-bg { position: absolute; width: 25%; left: 0; top: 0; height: 100%; border-radius: 28px; background: #0971FF; transition: left 0.3s; } .solution .solution-item.active { color: #fff; } .solution .solution-swiper { width: 100%; min-width: 1220px; height: 600px; } .solution .solution-swiper .swiper-slide { width: 100%; height: 100%; color: #fff; background-repeat: no-repeat; background-size: 100% 100%; } .solution .solution-swiper .swiper-slide:nth-child(1) { background-image: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/96872b8179da4cf29599d5cf01c69fed); } .solution .solution-swiper .swiper-slide:nth-child(2) { background-image: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/5a9846976fea45c1becb3c768f7e4109); } .solution .solution-swiper .swiper-slide:nth-child(3) { background-image: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/5ea8dc9317c643d0b0254d8d13a154f3); } .solution .solution-swiper .swiper-slide:nth-child(4) { background-image: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/5f5d9f14b2754bbfa7c870aae8606b0f); } .solution .solution-swiper-box { width: 100%; max-width: 1200px; margin: 0 auto; padding-top: 167px; } .solution .solution-swiper-title { font-weight: 600; font-size: 32px; line-height: 45px; margin-bottom: 48px; } .solution .solution-swiper-item { display: flex; align-items: center; margin-bottom: 28px; } .solution .solution-swiper-item img { width: 20px; height: 20px; } .solution .solution-swiper-label { flex: 1; width: 0; overflow: hidden; margin-left: 3px; font-weight: 600; font-size: 20px; line-height: 28px; } .news { padding: 100px 0; min-width: 1220px; } .news .news-title { font-weight: 600; font-size: 40px; color: #1F2329; line-height: 56px; text-align: center; margin-bottom: 44px; } .news .news-swiper-content { width: 1200px; margin: 0 auto; position: relative; } .news .news-swiper { width: 1104px; height: 510px; margin: 0 auto; padding: 0 20px; } .news .swiper-slide { width: 100%; height: 100%; padding: 20px 0; opacity: 0; transition: opacity 0.3s; } .news .swiper-slide.swiper-slide-active, .news .swiper-slide.swiper-slide-next { opacity: 1 !important; } .news .news-item { width: 100%; height: 100%; background: #FFFFFF; box-shadow: 0px 4px 26px -7px rgba(27, 71, 144, 0.25); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; } .news .news-swiper-icon { width: 48px; height: 48px; border-radius: 50%; background: #E7F0F8; position: absolute; top: 50%; margin-top: -24px; cursor: pointer; text-align: center; line-height: 48px; color: #4E5969; } .news .news-swiper-icon:hover { color: #0971FF; } .news .news-swiper-icon .iconfont { font-size: 24px; } .news .prev { flex: 0; } .news .next { right: 0; } .news .news-item img { width: 100%; height: 235px; } .news .news-item-content { padding: 30px 30px 20px 30px; flex: 1; height: 0; overflow: hidden; display: flex; flex-direction: column; } .news .news-item-title { font-weight: 600; font-size: 18px; color: #1F2329; line-height: 28px; margin-bottom: 12px; } .news .news-item-article { font-size: 14px; color: #5D6C82; line-height: 22px; margin-bottom: 12px; flex: 1; height: 0; overflow: hidden; } .news .news-item-date { font-size: 14px; color: #5D6C82; } .about { padding: 100px 0; min-width: 1220px; background: #F7FAFD; } .about .about-title { font-weight: 600; font-size: 40px; color: #1F2329; line-height: 56px; text-align: center; margin-bottom: 58px; } .about .about-content { width: 1200px; margin: 0 auto; display: flex; align-items: center; margin-bottom: 100px; } .about .about-content img { width: 488px; height: 268px; } .about .about-article { font-weight: 400; font-size: 14px; color: #1F2329; line-height: 23px; margin-left: 40px; } .about .about-article p { margin-bottom: 24px; } .about .about-article p:last-child { margin: 0; } .footer { background: #212631; min-width: 1220px; } .footer .footer-box { width: 1200px; margin: 0 auto; } .footer .footer-content { padding: 50px; display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer .footer-title { font-weight: 500; font-size: 24px; color: #FFFFFF; line-height: 33px; margin-bottom: 28px; } .footer .footer-download { flex: 1; width: 0; } .footer .footer-qr { display: flex; } .footer .qr-item { margin-right: 56px; } .footer .footer-qr img { width: 130px; height: 130px; } .footer .qr-name { text-align: center; font-size: 14px; color: #98999D; line-height: 20px; margin-top: 10px; } .footer .contact-information { font-weight: 400; font-size: 14px; color: #98999D; line-height: 32px; } .footer .foot-information { font-weight: 400; font-size: 12px; color: #98999D; line-height: 17px; display: flex; align-items: center; padding: 20px; justify-content: center; } .footer .foot-information a { color: #98999D; margin-right: 30px; } .footer .foot-information img { width: 14px; height: 14px; margin-left: 30px; margin-right: 10px; }