@media (min-width: 1200px) {
  .x-zhu {
    --t1: 84px;
    --l2: 440px;
  }

  .xmind-bg {
    background: url(../image/xmind-bg.jpg) no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: 100%;
    max-width: 1100px;
    height: 1600px;
    margin: 50px auto;
    position: relative;
  }
  .x-zhu {
    width: 252px;
    height: 80px;
    background: url(../image/xmind-shu-bg.png) no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.25s ease, filter 0.25s ease;
  }
  .x-zhu-a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
    color: inherit;
    cursor: pointer;
  }
  .x-zhu:hover {
    transform: translateY(-4px);
    filter: brightness(1.05);
  }
  .t1-z {
    position: absolute;
    top: 67px;
    left: 416px;
  }
  .x-fu {
    width: 115px;
    height: 50px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #37525e;
    color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }
  .x-fu-a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
    cursor: pointer;
  }
  .x-fu:hover {
    transform: translateY(-3px);
    background-color: #008baa;
    box-shadow: 0px 10px 18px 0px rgba(0, 139, 170, 0.28);
  }
  .t1-r1 {
    position: absolute;
    top: 84px;
    left: 840px;
  }
  .t1-more {
    position: absolute;
    top: 6px;
    left: 970px;
  }
  .plan-list {
    width: 100%;
    margin: 0 auto;
  }
  .plan-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #333;
    margin-right: 10px;
    flex-shrink: 0;
  }
  .plan-btn {
    flex: 1;
    width: 120px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.5s ease;
  }
  .plan-btn a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
    cursor: pointer;
  }
  .plan-btn:hover {
    background-color: #008baa;
    border-color: #008baa;
    color: #fff;
    font-weight: 500;
    transform: translateX(4px);
    box-shadow: 0px 6px 14px 0px rgba(0, 139, 170, 0.18);
  }
  /* 第二排 */
  /* 大的灰色框 */
  .x-fu-2 {
    width: 265px;
  }
  .t2-z {
    position: absolute;
    top: 308px;
    left: 416px;
  }
  .t2-r1 {
    position: absolute;
    top: 325px;
    left: 840px;
  }
  .t2-l1 {
    position: absolute;
    top: 265px;
    left: -10px;
  }
  .t2-l2 {
    position: absolute;
    top: 325px;
    left: -10px;
  }
  .t2-l3 {
    position: absolute;
    top: 385px;
    left: -10px;
  }
  /* 第三排 */
  .t3-z {
    position: absolute;
    top: 555px;
    left: 416px;
  }
  .t3-r1 {
    position: absolute;
    top: 510px;
    left: 840px;
  }
  .t3-r2 {
    position: absolute;
    top: 570px;
    left: 840px;
  }
  .t3-r3 {
    position: absolute;
    top: 630px;
    left: 840px;
  }
  /* 第四排 */
  .t4-z {
    position: absolute;
    top: 788px;
    left: 416px;
  }
  .t4-r1 {
    position: absolute;
    top: 768px;
    left: 840px;
  }
  .t4-r2 {
    position: absolute;
    top: 828px;
    left: 840px;
  }
  .t4-l1 {
    position: absolute;
    top: 808px;
    left: -10px;
  }

  /* 第五排 */
  .x-fu-3 {
    width: 265px;
    height: 50px;
    font-size: 14px;
    text-align: center;
  }
  .t5-z {
    position: absolute;
    top: 1028px;
    left: 416px;
  }
  .t5-l1 {
    position: absolute;
    top: 1198px;
    left: -10px;
  }
  .t5-l2 {
    position: absolute;
    top: 1198px;
    left: 416px;
  }
  .t5-l3 {
    position: absolute;
    top: 1198px;
    left: 840px;
  }
  /* 第六排 */
  .t6-z {
    position: absolute;
    top: 1412px;
    left: 416px;
  }
  .t6-r1 {
    position: absolute;
    top: 1428px;
    left: 840px;
  }
  .t6-l1 {
    position: absolute;
    top: 1398px;
    left: -10px;
  }
  .t6-l2 {
    position: absolute;
    top: 1458px;
    left: -10px;
  }
}

@media (max-width: 1199px) {
  .x-zhu {
    --t1: 7vw;
    --l2: 36.666667vw;
  }

  .xmind-bg {
    background: url(../image/xmind-bg.jpg) no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: 100%;
    max-width: 91.666667vw;
    height: 130vw;
    margin: 4.166667vw auto;
    position: relative;
  }
  .x-zhu {
    width: 21vw;
    height: 6.666667vw;
    background: url(../image/xmind-shu-bg.png) no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    font-size: 2vw;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.25s ease, filter 0.25s ease;
  }
  .x-zhu-a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.416667vw;
    color: inherit;
    cursor: pointer;
  }
  .x-zhu:hover {
    transform: translateY(-0.333333vw);
    filter: brightness(1.05);
  }
  .t1-z {
    position: absolute;
    top: 5.583333vw;
    left: 34.666667vw;
  }
  .x-fu {
    width: 9.583333vw;
    height: 4.166667vw;
    font-size: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #37525e;
    color: #ffffff;
    border-radius: 0.416667vw;
    box-shadow: 0vw 0vw 0.416667vw 0vw rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }
  .x-fu-a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
    cursor: pointer;
  }
  .x-fu:hover {
    transform: translateY(-0.25vw);
    background-color: #008baa;
    box-shadow: 0vw 0.833333vw 1.5vw 0vw rgba(0, 139, 170, 0.28);
  }
  .t1-r1 {
    position: absolute;
    top: 7vw;
    left: 70vw;
  }
  .t1-more {
    position: absolute;
    top: 0.5vw;
    left: 80.833333vw;
  }
  .plan-list {
    width: 100%;
    margin: 0 auto;
  }
  .plan-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.416667vw;
  }
  .dot {
    width: 0.416667vw;
    height: 0.416667vw;
    border-radius: 50%;
    background-color: #333;
    margin-right: 0.833333vw;
    flex-shrink: 0;
  }
  .plan-btn {
    flex: 1;
    width: 10vw;
    height: 2.5vw;
    line-height: 2.5vw;
    border: 0.083333vw solid #ccc;
    border-radius: 0.416667vw;
    font-size: 1.333333vw;
    text-align: center;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.5s ease;
  }
  .plan-btn a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
    cursor: pointer;
  }
  .plan-btn:hover {
    background-color: #008baa;
    border-color: #008baa;
    color: #fff;
    font-weight: 500;
    transform: translateX(0.333333vw);
    box-shadow: 0vw 0.5vw 1.166667vw 0vw rgba(0, 139, 170, 0.18);
  }
  .plan-btn.active {
    background-color: #008baa;
    border-color: #008baa;
    color: #fff;
    font-weight: 500;
  }
  /* 第二排 */
  /* 大的灰色框 */
  .x-fu-2 {
    width: 22.083333vw;
  }
  .t2-z {
    position: absolute;
    top: 25.666667vw;
    left: 34.666667vw;
  }
  .t2-r1 {
    position: absolute;
    top: 27.083333vw;
    left: 70vw;
  }
  .t2-l1 {
    position: absolute;
    top: 22.083333vw;
    left: -0.833333vw;
  }
  .t2-l2 {
    position: absolute;
    top: 27.083333vw;
    left: -0.833333vw;
  }
  .t2-l3 {
    position: absolute;
    top: 32.083333vw;
    left: -0.833333vw;
  }
  /* 第三排 */
  .t3-z {
    position: absolute;
    top: 46.25vw;
    left: 34.666667vw;
  }
  .t3-r1 {
    position: absolute;
    top: 42.5vw;
    left: 70vw;
  }
  .t3-r2 {
    position: absolute;
    top: 47.5vw;
    left: 70vw;
  }
  .t3-r3 {
    position: absolute;
    top: 52.5vw;
    left: 70vw;
  }
  /* 第四排 */
  .t4-z {
    position: absolute;
    top: 65.666667vw;
    left: 34.666667vw;
  }
  .t4-r1 {
    position: absolute;
    top: 64vw;
    left: 70vw;
  }
  .t4-r2 {
    position: absolute;
    top: 69vw;
    left: 70vw;
  }
  .t4-l1 {
    position: absolute;
    top: 67.333333vw;
    left: -0.833333vw;
  }

  /* 第五排 */
  .x-fu-3 {
    width: 22.083333vw;
    height: 4.166667vw;
    font-size: 1.166667vw;
    text-align: center;
  }
  .t5-z {
    position: absolute;
    top: 85.666667vw;
    left: 34.666667vw;
  }
  .t5-l1 {
    position: absolute;
    top: 99.833333vw;
    left: -0.833333vw;
  }
  .t5-l2 {
    position: absolute;
    top: 99.833333vw;
    left: 34.666667vw;
  }
  .t5-l3 {
    position: absolute;
    top: 99.833333vw;
    left: 70vw;
  }
  /* 第六排 */
  .t6-z {
    position: absolute;
    top: 117.666667vw;
    left: 34.666667vw;
  }
  .t6-r1 {
    position: absolute;
    top: 119vw;
    left: 70vw;
  }
  .t6-l1 {
    position: absolute;
    top: 116.5vw;
    left: -0.833333vw;
  }
  .t6-l2 {
    position: absolute;
    top: 121.5vw;
    left: -0.833333vw;
  }
}