很麻烦的小盒子背景
    企业微信截图_16566451722745.png
    同样是背景
    image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.         <title>易览笔记</title>
    8.         <link rel="stylesheet" href="reset.css" />
    9.         <link rel="stylesheet" href="静态页面.css" />
    10.     </head>
    11.     <body>
    12.         <div class="page-wrapper">
    13.             <!-- group14 -->
    14.             <div class="group14">
    15.                 <div class="banner">
    16.                     <div class="Rectangle2"></div>
    17.                     <div class="Rectangle14"></div>
    18.                     <div class="Rectangle15"></div>
    19.                 </div>
    20.                 <header>
    21.                     <div class="logo">
    22.                         <div class="Rectangle22">
    23.                             <a href="/"><img src="./pictures/logo.png" alt="" /></a>
    24.                         </div>
    25.                     </div>
    26.                     <ul>
    27.                         <li><a href="/">产品介绍</a></li>
    28.                         <li><a href="/">解决方案</a></li>
    29.                         <li><a href="/">合作案例</a></li>
    30.                         <li><a href="/">行业动态</a></li>
    31.                         <li><a href="/">关于我们</a></li>
    32.                     </ul>
    33.                 </header>
    34.                 <div class="group">
    35.                     <div class="group13">
    36.                         <span>易览笔记</span>
    37.                         <div></div>
    38.                         <span>Let Science Be Sexy</span>
    39.                         <span
    40.                             >斑马鱼数字智能立志于为广大生物医药研究人员提供一体化的实验数据管理解决方案。</span
    41.                         >
    42.                         <span>快速了解 -></span>
    43.                         <div></div>
    44.                     </div>
    45.                     <div class="Frame19">
    46.                         <img src="./pictures/Frame19.png" alt="" />
    47.                     </div>
    48.                 </div>
    49.                 <!-- 产品介绍 -->
    50.                 <div class="Product">
    51.                     <div class="box-1">
    52.                         <div class="RectangleGroup">
    53.                             <div class="Rectangle31"></div>
    54.                             <div class="Rectangle32"></div>
    55.                             <div class="Rectangle33"></div>
    56.                             <div class="box Electronic">
    57.                                 <span>电子记录</span>
    58.                                 <span
    59.                                     >所有记录的地方，如实验的随记、标准的记录表、样品的登记...
    60.                                 </span>
    61.                                 <img
    62.                                     src="./pictures/icon.png"
    63.                                     alt=""
    64.                                     style="margin-top: 20px"
    65.                                 />
    66.                             </div>
    67.                         </div>
    68.                         <div class="RectangleGroup">
    69.                             <div class="Rectangle31"></div>
    70.                             <div class="Rectangle32"></div>
    71.                             <div class="Rectangle33"></div>
    72.                             <div class="box project">
    73.                                 <span>项目管理</span>
    74.                                 <span>管理研发项目、实验流程、审批、计划... </span>
    75.                                 <img
    76.                                     src="./pictures//Vector.png"
    77.                                     alt=""
    78.                                     style="margin-top: 48px"
    79.                                 />
    80.                             </div>
    81.                         </div>
    82.                     </div>
    83.                     <div class="box-2">
    84.                         <div class="RectangleGroup">
    85.                             <div class="Rectangle31"></div>
    86.                             <div class="Rectangle32"></div>
    87.                             <div class="Rectangle33"></div>
    88.                             <div class="box register" style="background: #a1f3fd">
    89.                                 <span style="background: #aff6ff">注册管理</span>
    90.                                 <span>跨项目和实验的记录一个对象的信息 </span>
    91.                                 <img
    92.                                     src="./pictures/对象储存 1.png"
    93.                                     alt=""
    94.                                     style="margin-top: 32px"
    95.                                 />
    96.                             </div>
    97.                         </div>
    98.                         <div class="RectangleGroup">
    99.                             <div class="Rectangle31"></div>
    100.                             <div class="Rectangle32"></div>
    101.                             <div class="Rectangle33"></div>
    102.                             <div class="box stock">
    103.                                 <span>库存管理</span>
    104.                                 <span>注册对象具体的存储和相关信息 </span>
    105.                                 <img
    106.                                     src="./pictures/05_库存管理 1.png"
    107.                                     alt=""
    108.                                     style="margin-top: 32px"
    109.                                 />
    110.                             </div>
    111.                         </div>
    112.                     </div>
    113.                     <div class="box-3">
    114.                         <div class="RectangleGroup">
    115.                             <div class="Rectangle31"></div>
    116.                             <div class="Rectangle32"></div>
    117.                             <div class="Rectangle33"></div>
    118.                             <div class="box data">
    119.                                 <span>数据中心</span>
    120.                                 <span
    121.                                     >所有protocol、sop、流程模板，基础表单、参数、方法的设置和结果汇总模块
    122.                                 </span>
    123.                                 <img
    124.                                     src="./pictures/Vector (1).png"
    125.                                     alt=""
    126.                                     style="margin-top: 27px"
    127.                                 />
    128.                             </div>
    129.                         </div>
    130.                         <div class="RectangleGroup">
    131.                             <div class="Rectangle31"></div>
    132.                             <div class="Rectangle32"></div>
    133.                             <div class="Rectangle33"></div>
    134.                             <div class="box query" style="background: #a1f3fd">
    135.                                 <span style="background: #aff6ff; width: 158px"
    136.                                     >查询＆审计追踪</span
    137.                                 >
    138.                                 <span>系统中所有数据查询，记录和样品的审计追踪模块 </span>
    139.                                 <img
    140.                                     src="./pictures/查询 1.png"
    141.                                     alt=""
    142.                                     style="margin-top: 42px"
    143.                                 />
    144.                             </div>
    145.                         </div>
    146.                     </div>
    147.                     <div class="box-4">
    148.                         <span class="best">最佳的科研数据记录</span>
    149.                         <span
    150.                             >斑马鱼数字智能立志于为广大生物医药研究人员
    151.                             提供一体化的实验数据管理解决方案。</span
    152.                         >
    153.                         <span
    154.                             >以<strong>易览笔记</strong>为核心，我们将推出一整套数据产品矩阵，
    155.                             您可以随时随地的录入和访问您的数据。<br />通过<strong>易览笔记</strong>，
    156.                             实验室的管理者可以对实验室轻松做到易览无余。</span
    157.                         >
    158.                         <div class="Frame12">
    159.                             <div class="icon">
    160.                                 <img src="./pictures/Frame 19.png" alt="" />
    161.                                 <img src="./pictures/Frame 19 (2).png" alt="" />
    162.                                 <img src="./pictures/Frame 19 (1).png" alt="" />
    163.                             </div>
    164.                             <div class="spanList">
    165.                                 <span>丰富的功能模块满足不同的业务需求</span>
    166.                                 <span>灵活的配置方式适应多样的应用习惯</span>
    167.                                 <span>立体的数据标记让数据井井有条</span>
    168.                             </div>
    169.                         </div>
    170.                     </div>
    171.                 </div>
    172.             </div>
    174.             <!-- 介绍文字 -->
    175.             <div class="introduction">
    176.                 <div class="Frame10">
    177.                     <div class="Rectangle40"></div>
    178.                     <div class="Rectangle41"></div>
    179.                     <div class="Rectangle42"></div>
    180.                 </div>
    181.                 <div class="first">
    182.                     <div class="left">
    183.                         <span>以数据驱动决策</span>
    184.                         <span
    185.                             >集中、标准化的数据捕获和存储有助于确保数据的完整性和有效性，
    186.                             而集成的分析工具可以帮助您获得更好洞察力以做出更好的决策</span
    187.                         >
    188.                     </div>
    189.                     <div class="right"><img src="./pictures/数据驱动5.png" alt="" /></div>
    190.                 </div>
    191.                 <div class="second">
    192.                     <div class="left"><img src="./pictures/插图2.png" alt="" /></div>
    193.                     <div class="right">
    194.                         <span>支持复杂、专业的团队协作和工作管理</span>
    195.                         <span
    196.                             >提供专业的项目管理及实验流程以加速您的研发。随时知晓信息，
    197.                             计划项目分配的资源、追踪项目和实验的进度、自定义数据的统计表、仪表盘或透视表
    198.                         </span>
    199.                     </div>
    200.                 </div>
    201.             </div>
    202.             <!-- 应用领域 -->
    203.             <div class="application">
    204.                 <span class="Atext">应用领域</span>
    205.                 <div class="container">
    206.                     <div class="left"><img src="./pictures/Frame18.png" alt="" /></div>
    207.                     <div class="right">
    208.                         <div class="buttonGroup">
    209.                             <div></div>
    210.                             <div></div>
    211.                             <div></div>
    212.                         </div>
    213.                         <div class="content">
    214.                             <span>生物公司</span>
    215.                             <span>生产管理</span>
    216.                             <span
    217.                                 >提供专业的项目管理及实验流程以加速您的研发。随时知晓信息，
    218.                                 计划项目分配的资源、追踪项目和实验的进度、自定义数据的统计表、仪表盘或透视表
    219.                             </span>
    220.                         </div>
    221.                     </div>
    222.                 </div>
    223.             </div>
    224.             <!-- 合作案例 -->
    225.             <div class="Cooperation">
    226.                 <span class="Ctext">合作案例</span>
    227.                 <div class="container">
    228.                     <div class="left">
    229.                         <div class="box">
    230.                             <div class="quotation">
    231.                                 <img src="./pictures/quotation.png" alt="" />
    232.                             </div>
    233.                             <div class="kehu">xx客户</div>
    234.                             <div class="circle"></div>
    235.                             <span
    236.                                 >以前我们的数据虽然都放在硬盘上，但是根本无法使用，现在数据都是标记好的，
    237.                                 这样才能真正的实现数据的有效积累，想调取什么数据，一目了然。</span
    238.                             >
    239.                         </div>
    240.                         <div class="box">
    241.                             <div class="quotation">
    242.                                 <img src="./pictures/quotation.png" alt="" />
    243.                             </div>
    244.                             <div class="kehu">xx客户</div>
    245.                             <div class="circle"></div>
    246.                             <span
    247.                                 >以前我们的数据虽然都放在硬盘上，但是根本无法使用，现在数据都是标记好的，
    248.                                 这样才能真正的实现数据的有效积累，想调取什么数据，一目了然。</span
    249.                             >
    250.                         </div>
    251.                         <div class="box">
    252.                             <div class="quotation">
    253.                                 <img src="./pictures/quotation.png" alt="" />
    254.                             </div>
    255.                             <div class="kehu">xx客户</div>
    256.                             <div class="circle"></div>
    257.                             <span
    258.                                 >以前我们的数据虽然都放在硬盘上，但是根本无法使用，现在数据都是标记好的，
    259.                                 这样才能真正的实现数据的有效积累，想调取什么数据，一目了然。</span
    260.                             >
    261.                         </div>
    262.                     </div>
    263.                     <div class="right"></div>
    264.                 </div>
    265.             </div>
    266.             <!-- 加入我们 -->
    267.             <div class="joinus">
    268.                 <div class="left">
    269.                     <div><img src="./pictures//Ellipse 75.png" alt="" /></div>
    270.                     <div class="people"><img src="./pictures/人.png" alt="" /></div>
    271.                 </div>
    272.                 <div class="right">
    273.                     <div class="Rectangle8">
    274.                         <span class="span1">快来加入我们</span>
    275.                         <span class="span2">Let Science Be Sexy</span>
    276.                     </div>
    277.                     <div class="Rectangle9"></div>
    278.                 </div>
    279.             </div>
    280.             <!-- group8 -->
    281.             <div class="group8">
    282.                 <div class="left">
    283.                     <img src="./pictures/logo.png" alt="" />
    284.                     <span>Let Science Be Sexy</span>
    285.                     <div class="QRcode">二维码</div>
    286.                 </div>
    287.                 <div class="right">
    288.                     <div class="box"><span>产品中心</span><a href="/">产品介绍</a></div>
    289.                     <div class="box"><span>行业动态</span><a href="/">行业新闻</a></div>
    290.                     <div class="box">
    291.                         <span>关于我们</span>
    292.                         <a href="/">公司简介</a>
    293.                         <a href="/">公司资质</a>
    294.                         <a href="/">联系我们</a>
    295.                     </div>
    296.                     <div class="box"><span>招贤纳士</span><a href="/">招贤纳士</a></div>
    297.                 </div>
    298.             </div>
    299.             <!-- 版权信息 -->
    300.             <footer>
    301.                 <div class="footer1">
    302.                     Copyright © 2020 南京市斑马鱼数字智能科技有限责任公司 All rights
    303.                     reserved. 苏ICP备2020062205号-1
    304.                 </div>
    305.                 <div class="footer2">苏公网安备 32011302321091号</div>
    306.             </footer>
    307.         </div>
    308.     </body>
    309. </html>
    /* 版心 */
.page-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 300px;
    overflow: hidden;
}
/* group14 */
.group14 {
    height: 1730px;
    position: relative;
}
header {
    width: 1095px;
    height: 86px;
    margin: 0 auto;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    text-align: center;
}
header .logo {
    width: 133px;
    height: 86px;
}
.Rectangle22 {
    width: 133px;
    height: 80px;
    background: #ffffff;
    border-radius: 0px 0px 20px 20px;
}
.Rectangle22 a img {
    margin: 15px 24px;
}
header ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
header ul li a {
    width: 72px;
    height: 24px;
    font-family: 'Microsoft YaHei';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin-left: 85px;
}
.group {
    position: relative;
    width: 1200px;
    height: 650px;
    margin: 105px auto 0;
    display: flex;
    justify-content: space-between;
}
.group .group13 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.group13 span {
    font-style: normal;
    font-weight: 700;
    font-family: 'Segoe UI';
}
.group13 span:nth-child(1) {
    width: 282px;
    height: 88px;
    background: #ffffff;
    border: 3px solid #1f6ed4;
    border-radius: 4px;
    text-align: center;
    line-height: 88px;
    font-size: 48px;
    color: #1f6ed4;
    align-self: flex-end;
}
.group13 span:nth-child(3) {
    margin-top: 26px;
    font-family: 'Arial';
    font-size: 40px;
    line-height: 46px;
    text-align: right;
    color: #fff;
}
.group13 span:nth-child(4) {
    width: 384px;
    height: 64px;
    margin-top: 16px;
    font-family: 'Microsoft YaHei';
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #b2d0f7;
}
.group13 span:nth-child(5) {
    width: 228px;
    height: 54px;
    margin-top: 48px;
    align-self: flex-end;
    background: #ffffff;
    border: 3px solid #1f6ed4;
    border-radius: 40px;
    text-align: center;
    line-height: 45px;
    font-size: 18px;
    color: #1f6ed4;
}
.Frame19 {
    width: 690px;
    height: 650px;
}

.banner {
    position: relative;
    float: left;
}
.Rectangle2 {
    position: absolute;
    width: 1976.34px;
    height: 2458.4px;
    left: -600px;
    top: -1245.65px;
    background: #3358ff;
    border-radius: 371px;
    transform: rotate(74.67deg);
    z-index: -1;
}
.Rectangle14 {
    position: absolute;
    width: 1976.34px;
    height: 2620.53px;
    left: -570px;
    top: -1174.59px;

    background: radial-gradient(
        47.6% 47.6% at 69.85% -4.03%,
        rgba(51, 88, 255, 0.081) 0%,
        rgba(255, 255, 255, 0.2376) 100%
    );
    border-radius: 371px;
    transform: rotate(73.9deg);
    z-index: -2;
}
.Rectangle15 {
    position: absolute;
    width: 1976.34px;
    height: 2625.2px;
    left: -390px;
    top: -1098.19px;

    background: radial-gradient(
        62.63% 62.64% at 66.39% -1.43%,
        rgba(51, 88, 255, 0.108) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    border-radius: 371px;
    transform: rotate(73.9deg);
    z-index: -3;
}

/* Product */
.Product {
    width: 1200px;
    height: 815px;
    margin: 80px auto 0;
    display: flex;
    justify-content: space-between;
    /* transform: translateY(-240px); */
}
.box-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.box-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.box-3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.box-4 {
    display: flex;
    margin-top: 94px;
    flex-direction: column;
    font-style: normal;
    font-family: 'Microsoft YaHei';
    font-size: 18px;
    line-height: 32px;
    color: #6b6e79;
}
.box-4 span {
    margin-left: 12px;
    margin-bottom: 32px;
}
.box-4 .best {
    display: block;
    margin-left: 0;
    margin-bottom: 32px;
    font-family: 'Segoe UI';
    font-weight: 700;
    font-size: 44px;
    line-height: 59px;
    color: #2e3032;
}
.box-4 strong {
    font-weight: 700;
    color: #1f212d;
}
.Frame12 {
    display: flex;
    justify-content: space-between;
}
.Frame12 .icon img {
    display: flex;
    flex-direction: column;
    width: 40px;
    height: 40px;
    margin-bottom: 24px;
}
.spanList span {
    margin-right: 24px;
}
.Product .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
    height: 300px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin-bottom: 24px;
    margin-right: 24px;
    background: #868cad;
}
.Product .box span:nth-child(1) {
    width: 104px;
    height: 34px;
    margin: 32px auto;
    background: #cad2f8;
    border-radius: 20px;
    text-align: center;
    line-height: 34px;
}
.Product .box span:nth-child(2) {
    width: 176px;
    margin: 0 auto;
    font-family: 'Microsoft YaHei';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #c8ccdf;
}
.Product .box img {
    width: 70px;
    height: 70px;
}
/* introduction  */
.introduction {
    width: 100%;
    height: 1397px;
    overflow: hidden;
}
/* .introduction .Frame10 {
  width: 100%;
  height: 100%;
} */
/* .introduction .Frame10 .Rectangle40 {
  float: left;
  width: 100%;
  height: 100%;
  background: rgba(52, 140, 236, 0.04);
  border-radius: 0px 157px 157px 157px;
  transform: rotate(7.36deg);
  z-index: -2;
} */
.introduction .first {
    width: 1197px;
    height: 560.28px;
    margin: 54px auto 0;
}
.introduction .first .left {
    float: left;
    width: 507px;
    height: 560.28px;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    text-align: right;
    color: #2e3032;
}
.introduction .first .left span:nth-child(1) {
    width: 252px;
    height: 48px;
    margin-top: 185px;
    margin-bottom: 32px;
}
.introduction .first .left span:nth-child(2) {
    width: 384px;
    height: 96px;
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #6b6e79;
}
.introduction .first .right {
    width: 690px;
    height: 560.28px;
    float: right;
}
.introduction .second {
    width: 1180.92px;
    height: 506px;
    margin: 134.72px auto 0;
}
.introduction .second .left {
    float: left;
    width: 651.55px;
    height: 506px;
}
.introduction .second .right {
    float: right;
    width: 529.37px;
    height: 506px;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    text-align: right;
    color: #2e3032;
}
.introduction .second .right span:nth-child(1) {
    width: 384px;
    height: 96px;
    margin-top: 125px;
    margin-bottom: 33px;
    margin-left: 30px; /*???*/
}
.introduction .second .right span:nth-child(2) {
    width: 384px;
    height: 128px;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #6b6e79;
    margin-left: 30px; /*???*/
}

/* application */
.application {
    width: 100%;
    height: 830px;
}
.application .Atext {
    display: block;
    width: 176px;
    height: 59px;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 44px;
    line-height: 59px;
    text-align: center;
    color: #2e3032;
    margin: 165px auto 0;
}
.application .container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.application .container .left {
    width: 587px;
    height: 360px;
    margin-top: 80px;
}
.application .container .right {
    margin-top: 118px;
    margin-left: 95px;
    display: flex;
    justify-content: center;
}
.buttonGroup {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.buttonGroup div {
    width: 8px;
    height: 80px;
    background: #6aefff;
    border-radius: 10px;
    margin-bottom: 24px;
    margin-right: 60px;
}
.buttonGroup + .content {
    width: 450px;
    height: 95px;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    color: #2e3032;
}
.buttonGroup + .content span:nth-child(1) {
    width: 144px;
    height: 48px;
    margin-bottom: 29px;
}
.buttonGroup + .content span:nth-child(2) {
    width: 88px;
    height: 29px;
    background: #f0f8ff;
    border-radius: 32px;
    font-size: 14px;
    line-height: 19px;
    color: #1f6ed4;
    margin-bottom: 15px;
    text-align: center;
}
.buttonGroup + .content span:nth-child(3) {
    width: 450px;
    height: 96px;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #6b6e79;
}

/* Cooperation */
.Cooperation {
    width: 100%;
    height: 954px;
    background: #ebf5ff;
    overflow: hidden;
}
.Cooperation .Ctext {
    display: block;
    width: 176px;
    height: 59px;
    margin: 80px auto 0;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 44px;
    line-height: 59px;
    text-align: center;
    color: #2e3032;
}
.Cooperation .container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.Cooperation .container .left {
    display: flex;
    flex-direction: column;
    margin-top: 88px;
    margin-right: 124.73px;
}
.Cooperation .container .left .box {
    width: 587px;
    height: 168px;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 20px 50px 0px 20px;
    margin-bottom: 64px;
}
.quotation {
    width: 39px;
    height: 37px;
    margin-top: 13px;
    margin-left: 32px;
    display: inline-block;
}
.circle {
    width: 32px;
    height: 32px;
    background: #c4c4c4;
    border-radius: 50%;
    float: right;
    margin-top: 15px;
    margin-right: 16px;
}
.kehu {
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    float: right;
    margin-top: 19px;
    margin-right: 60px;
}
.circle + span {
    width: 513px;
    height: 96px;
    font-family: 'Microsoft YaHei';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #6b6e79;
    margin-top: 10px;
    margin-left: 32px;
}
.Cooperation .container .right {
    width: 485.27px;
    height: 382.44px;
    background: url(./pictures/插图1.png);
}

/* .joinus */
.joinus {
    width: 100%;
    height: 604px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.joinus .left {
    width: 457.01px;
    height: 380.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-right: 76.86px;
}
.joinus .left .people {
    position: absolute;
    left: 57.77px;
    top: 40.61px;
}
.joinus .right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.Rectangle8 {
    width: 587px;
    height: 168px;
    background: #00a7f5;
    border-radius: 60px 60px 60px 0px;
    z-index: 1;
    font-style: normal;
    text-align: center;
}
.Rectangle8 .span1 {
    width: 392px;
    height: 74px;
    margin: 32px auto 0;
    font-family: 'Segoe UI';
    font-weight: 700;
    font-size: 56px;
    line-height: 74px;
    color: #fffb34;
}
.Rectangle8 .span2 {
    width: 222px;
    height: 28px;
    margin: 2px auto 0;
    font-family: 'Arial';
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    color: #ffffff;
}
.Rectangle9 {
    width: 587px;
    height: 168px;
    background: #ffffff;
    border: 2px solid #00a7f5;
    border-radius: 60px 60px 60px 0px;
    position: absolute;
    top: 9px;
}

/* .group8 */
.group8 {
    width: 100%;
    height: 344px;
    display: flex;
    justify-content: center;
}
.group8 .left {
    width: 140px;
    height: 237px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 59px;
    margin-right: 250px;
}
.group8 .left img {
    width: 80px;
    height: 47px;
    margin-bottom: 10px;
}
.group8 .left span {
    width: 130px;
    height: 16px;
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #b2b5bf;
    margin-bottom: 24px;
}
.group8 .left .QRcode {
    width: 140px;
    height: 140px;
    background: #f2f2f2;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #000000;
    line-height: 140px;
}
.group8 .right {
    width: 600px;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 57px;
}
.group8 .right .box {
    width: 118px;
    height: 150px;
    border-right: 1px solid rgba(178, 181, 191, 0.1);
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: #0f1329;
}
.group8 .right .box span {
    width: 56px;
    height: 19px;
    margin-bottom: 32px;
}
.group8 .right .box a {
    display: block;
    width: 56px;
    height: 18px;
    font-family: 'Microsoft YaHei';
    font-weight: 400;
    line-height: 18px;
    color: #535454;
    margin-bottom: 16px;
}

/* Footer */
Footer {
    width: 100%;
    height: 124px;
    background: #f8fbff;
    border-top: 1px solid #b3b5bf;
    font-family: 'Microsoft YaHei';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
}
.footer1 {
    margin: 32px auto 24px;
    color: #b3b5bf;
}
.footer2 {
    margin: 0 auto 32px;
    color: #000000;
}