﻿    body {
      overflow-x: hidden;
    }
    div {
      box-sizing: border-box !important;
    }
    .container {
      width: 24rem;
    }

    /* logo */
    .logo {
      /* border: 0.0125rem solid red; */
      width: 9.2625rem;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .logo img {
      width: 3rem;
      height: 0.625rem;
    }

    /* 头部 */
    header {
      width: 24rem;
      position: relative;

    }
    /* 导航栏 */
    .headerTool {
      width: 24rem;
      height: 0.875rem;
      display: flex;
      align-items: center;
      position: fixed;
      top: 0;
      z-index: 1;
    }
    /* layui导航栏样式修改 */
    .layui-nav {
      width: 14.7375rem;
      height: 100%;
      display: flex;
      align-items: center;
      background: none;
    }
    header .layui-nav-item {
      width: 1.875rem;
      font-size: 10px;
    }
    header .layui-nav-item a {
      display: inline-block;
      text-align: center;
    }

    @media screen and (min-width: 300px) and (max-width: 769px) {
      header .layui-nav-item a,
      .descripte,
      .phone,
      .webDes {
        zoom: 0.53;
      }
    }

    /* 修改layui 导航标签默认字体颜色 */
    .layui-nav .layui-nav-item a {
      color: #fff;
    }
    /* 导航栏选中样式  */
    .layui-this a {
      display: inline-block;
      color: #2a8aff !important;
    }
    /* 航栏选中样式伪元素 底部boder */
    .layui-this a:after {
      top: auto !important;
      bottom: 0 !important;
      width: 100% !important;
    }
    /* 隐藏默认微元素 */
    .layui-nav .layui-this:after {
      display: none;
    }
    /* 修改微元素属性 底部boder */
    .layui-nav .layui-this a:after,
    .layui-nav-bar {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0.05rem;
      background-color: #2a8aff;
      transition: all 0.2s;
      -webkit-transition: all 0.2s;
      pointer-events: none;
    }

    /* 主图 */
    .headerMainImg {
      width: 24rem;
      height: 10.2875rem;
      background-image: url('../images/indexBg.png');
      background-size: 100% 100%;
      position: relative;
    }

    .xcxImg1{
      /* border: 1px solid red; */
      width: 2rem;
      height: 2.25rem;
      position: absolute;
      top: 5.875rem;
      left: 9.9375rem;
      background-image: url('../images/xcxImg.jpg');
      background-size: 100% 100%;      
      transform: scale(.9);

    }

    .xcxImg2{
      /* border: 0.0125rem solid red; */
      width: 2rem;
      height: 2.25rem;
      position: absolute;
      top: 5.875rem;
      left: 11.9375rem;
      background-image: url('../images/xcxImg.jpg');
      background-size: 100% 100%;  
      transform: scale(.9);
    }

    /* 选择我们的理由 */
    .selectReason {
      width: 100%;
      height: 8.475rem;
      padding: 0 3.4rem;
      padding-top: 0.875rem;
      background-color: #f7f8fc;
    }
    /* 选择我们的理由 */
    .reasonTitle {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    /* 理由标题 */
    .reasonTitle .title {
      font-size: 0.575rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #072629;
    }
    /* 理由描述 */
    .reasonTitle .des {
      margin-top: 0.175rem;
      font-size: 0.225rem;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #9ca8a9;
      line-height: 0.3125rem;
    }
    /* 理由卡片 */
    .selectReason .card {
      margin-top: 0.8rem;
      width: 100%;
      height: 3.75rem;
      display: flex;
      justify-content: space-around;
    }
    /* 卡片子元素 */
    .selectReason .card .cardItem {
      width: 5.325rem;
      height: 3.75rem;
      margin: 0 0.2rem;
    }

    .selectReason .card .cardItem:nth-child(1) {
      width: 5.325rem;
      height: 3.75rem;
      background-image: url(../images/card1.png);
      background-size: 100% 100%;
    }

    .selectReason .card .cardItem:nth-child(2) {
      width: 5.325rem;
      height: 3.75rem;
      background-image: url(../images/card2.png);
      background-size: 100% 100%;
    }

    .selectReason .card .cardItem:nth-child(3) {
      width: 5.325rem;
      height: 3.75rem;
      background-image: url(../images/card3.png);
      background-size: 100% 100%;
    }
    /* 锚点 */
    .maodian {
      width: 100%;
      height: auto;
      padding: 0 2.0875rem;
    }
    /* 锚点子元素 */
    .anchorDiv {
      width: 100%;
      height: auto;
      display: flex;
    }
    /* 锚点左侧元素 */
    .anchorDiv .img {
      height: 12.3625rem;
      width: 9.9875rem;
    }

    .anchorDiv .img img {
      width: 9.9875rem;
    }
    /* 锚点右侧元素 */
    .anchorDiv .des {
      display: flex;
      flex-direction: column;
      padding-left: 0.25rem;
    }
    /* 锚点右侧元素的文字 */

    .anchorDiv .des .content {
      width: 7.3375rem;
      height: 1.625rem;
      font-size: 0.575rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #072629;
      line-height: 0.8125rem;
      letter-spacing: 0.025rem;
      margin-left: 0.25rem;
      margin-top: 2.375rem;
    }
    /* 锚点右侧元素的文字下的横线 */
    .anchorDiv .heng {
      margin-left: 0.25rem;
      height: 0.1rem;
      margin-top: 0.475rem;
    }
    /* 锚点右侧元素的文字下的横线图片 */
    .anchorDiv .heng img {
      width: 1.175rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* 锚点右侧元素的文字下的按钮 */
    .anchorDiv .tiyan img {
      margin-top: 0.8625rem;
      width: 4.5rem;
      cursor: pointer;
    }
    /* 加上改类，左右反转 */
    .reverse {
      flex-direction: row-reverse;
    }
    /* 反转后的右侧图片额外处理 */
    .reverse .img img {
      position: relative;
      right: 1rem;
    }
    /* 反转后的左侧文字额外处理 */
    .reverse .des {
      position: relative;
      right: 1rem;
    }
    /* 顾问单独处理 */
    .guwen .img img {
      width: 11.425rem;
      right: 2.625rem;
    }

    /* 关于我们 */
    .aboutMe {
      width: 24rem;
      height: 3.75rem;
      display: flex;
    }
    /* 关于我们左侧 */

    .aboutMe .img {
      width: 100%;
      position: relative;
    }
    /* 关于我们左侧图片 */

    .aboutMe .img img {
      width: 100%;
    }
    /* 关于我们右侧描述 */

    .aboutMe .des {
      width: 10rem;
      position: absolute;
      top: 0;
      left: 12.0375rem;
      display: flex;
      flex-direction: column;
      padding-left: 0.25rem;
    }
    /* 关于我们右侧描述文字 */

    .aboutMe .des .content {
      width: 7.3375rem;
      height: 1rem;
      font-size: 0.575rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #072629;
      line-height: 0.8125rem;
      letter-spacing: 0.025rem;
      margin-left: 0.25rem;
      margin-top: 2.375rem;
    }
    /* 关于我们右侧描述文字下的横线  */
    .aboutMe .heng {
      margin-left: 0.25rem;
    }

    .aboutMe .heng img {
      width: 1.175rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* 关于我们右侧描述文字下面的描述  */
    .aboutMe .descripte {
      width: 8.55rem;
      margin-top: 0.6625rem;
      font-size: 0.25rem;
    }

    /* 底部 */
    footer {
      margin-top: 3.625rem;
      width: 24rem;
      height: 3.75rem;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      background-image: url(../images//footerBg.png);
    }
    footer .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

    }
    footer .left .call {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      margin-bottom: 0.125rem;
    }

    .call .callDiv {
      width: 3.75rem;
      height: 0.625rem;
      display: flex;
    }

    .call .callDiv .imgDiv {
      width: 0.625rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .call .callDiv .imgDiv img {
      width: 0.4375rem;
      height: 0.4375rem;
    }

    .call .callDiv .phone {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0.2rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }

    footer .left .address {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      margin-top: 0.125rem;
    }

    .address .addressDiv {
      width: 3.75rem;
      height: 0.625rem;
      display: flex;
    }

    .address .addressDiv .imgDiv {
      width: 0.625rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .address .addressDiv .imgDiv img {
      width: 0.3125rem;
      height: 0.4375rem;
    }

    .address .addressDiv .phone {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0.2rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }

    .phone a{
      color: #ffffff;
    }

    footer .right {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 0.75rem;
    }

    .erweima {
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .erweima img {
      width: 1.6rem;
      height: 2.025rem;
      margin-top: 0.3125rem;
    }
    .webDes {
      width: 100%;
      height: 0.75rem;
      background-color: rgb(69, 69, 69);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.175rem;
      color: #efefef;
    }

    .webDes a{
      color: #efefef;
      margin-right: 0.25rem;
    }

    .webDes a:hover{
      color: skyblue;
    }