﻿body {
  margin: 0;
  line-height: 1;
}
h1,
h2,
p {
  margin: 0;
}
div {
  box-sizing: border-box;
}
.header {
  background: url("../image/head_bg.png") no-repeat center;
  height: 620px;
  position: relative;
  min-width: 1200px;
}
.header-text {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 126px;
}
.font75 {
  font-size: 75px;
}
.mt52 {
  margin-top: 52px;
}
.mt24 {
  margin-top: 24px;
}
.font54 {
  font-size: 54px;
}
.help-img {
  position: absolute;
  top: 3px;
}
.relative {
  position: relative;
}
.dfc {
  display: flex;
  align-items: center;
}
.dfcjsc {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tips {
  gap: 0 35px;
}
.mt60 {
  margin-top: 60px;
}
.tips-item {
  border-width: 1px;
  border-color: rgb(29, 126, 245);
  border-style: solid;
  border-radius: 9px;
  width: 178px;
  height: 63px;
  font-size: 20px;
  color: #1d7ef5;
  gap: 0 12px;
}
.customize-view{
  background: url("../image/customize.png") no-repeat center;
  height: 992px;
  min-width: 1200px;
}
.customize {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 90px;
}
.font44 {
  font-size: 44px;
}
.tc {
  text-align: center;
}
.font22 {
  font-size: 22px;
}
.c-4c4 {
  color: #4c4c4c;
}
.mt14 {
  margin-top: 14px;
}
.mt65 {
  margin-top: 65px;
}
.customize .content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.customize-item {
  border-radius: 14px;
  background-color: #fff;
  width: 590px;
  height: 314px;
  padding-top: 36px;
  
}
.customize-item .icon-item { 
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 43px;
}
.customize-item .icon-item > div { 
  margin: 0 17px;
  position: relative;
  text-align: center;
}

.customize-item .icon-item > div::after { 
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -38px;
  width: 1px;
  height: 60px;
  background-color: #ececec;
}


.customize-item .icon-item > div:last-child::after { 
  display: none;
}


.font30 {
  font-size: 30px;
}
.c-7b7 {
  color: #7b7b7b;
}
.font16 {
  font-size: 16px;
}
.mt20 {
  margin-top: 20px;
}
.mt50 {
  margin-top: 50px;
}
.gap18 {
  gap: 20px;
}
.gap52 {
  gap: 0 52px;
}
.gap23 {
  gap: 0 23px;
}
.advantage-view{
  min-width: 1200px;
}
.advantage {
  max-width: 1200px;
  margin:  0 auto;
  height: 636px;
  padding-top: 90px;
  background-color: #fff;
}
.advantage-item {
  border-radius: 14px;
  width: 387px;
  height: 267px;
  background-image: linear-gradient(to bottom, #eff4fe, #f1fdff);
  position: relative;
}
.mt120 {
  margin-top: 120px;
}
.advantage-item .icon {
  position: absolute;
  top: -50%;
  margin-top: 70px;
  left: 50%;
  margin-left: -70px;
}
.mt90 {
  margin-top: 90px;
}
.font32 {
  font-size: 32px;
}
.font18 {
  font-size: 18px;
}
.mt34 {
  margin-top: 34px;
}
.w170 {
  width: 170px;
}
.footer-view{
  height: 594px;
  background: url("../image/footer.png") no-repeat center;
  min-width: 1200px;
}
.footer {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 90px;
}
.font48 {
  font-size: 48px;
}
.mt16 {
  margin-top: 16px;
}
.font16 {
  font-size: 16px;
}
.ml16 {
  margin-left: 16px;
}
.mr52 {
  margin-right: 52px;
}
.qrcode {
  border-radius: 14px;
  background-color: #fff;
  width: 180px;
  height: 185px;
  margin: 0 auto;
  margin-top: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrcode img {
  width: 170px;
}
.mt10 {
  margin-top: 10px;
}
.font20 {
  font-size: 20px;
}
ul {
  padding: 0;
}
li {
  list-style: none;
}
.right-bar {
  position: fixed;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
}

.right-bar li {
  width: 75px;
  height: 75px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.right-bar li .wei-box {
  position: absolute;
  background-color: #fff;
  padding: 15px 16px 10px 20px;
  top: -120px;
  right: calc(100% + 10px);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
  display: none;
}
.right-bar li .wei-box::after {
  bottom: 195px;
}
.right-bar li .contact-box::after {
  bottom: 65px;
}
.right-bar li .wei-box::after,
.right-bar li .contact-box::after {
  border: solid transparent;
  content: " ";
  height: 0;
  left: 100%;
  position: absolute;
  width: 0;
  border-width: 5px;

  border-left-color: #fff;
}

.right-bar li .wei-box p {
  font-size: 14px;
  margin-top: 12px;
  color: #666;
}

.right-bar li .contact-box {
  position: absolute;
  display: none;
  text-align: left;
  background-color: #fff;
  padding: 18px 17px;
  width: 175px;
  height: 171px;
  top: -100px;
  right: calc(100% + 10px);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
}

.right-bar li .contact-box .contact-name {
  font-size: 13px;
  color: #666;
}
a {
  text-decoration: none;
}

.right-bar li .contact-box .contact-kefu {
  font-size: 13px;
  color: #333;
  margin-top: 14px;
}

.right-bar li .contact-box .contact-kefu img {
  vertical-align: middle;
  margin-right: 10px;
}

.right-bar li .contact-box .phone {
  font-size: 14px;
  color: #666;
  margin-top: 12px;
  margin-left: 25px;
  line-height: 25px;
}

.right-bar li .contact-box .time {
  font-size: 12px;
  color: #666;
  line-height: 20px;
  margin-top: 10px;
}

.right-bar li:hover {
  background-color: #f8f8f8;
}

.right-bar li:hover .hide-box {
  display: block;
}

.right-bar li .ico {
  margin-top: 17px;
}

.right-bar li .name {
  font-size: 12px;
  color: #999;
  margin-top: 6px;
}
