.solution_ban {
  height: 790px;
}
.solution_ban .a1_txt {
  max-width: 478px;
  margin: 50px 0 85px 0;
}
.web_banner {
  padding-top: 260px;
  background-image: url(../img/solution_websi/bannerr.jpg);
}
.dtc_banner {
  padding-top: 240px;
  background-image: url(../img/solution_dtc/bannerr.jpg);
}
.dtc_banner .a1_txt {
  margin: 40px 0 60px 0;
  line-height: 35px;
}
.mark_banner {
  background-image: url(../img/solution_mark/bannerr.jpg);
  padding-top: 220px;
}
.mark_banner .mark_tit {
  font-size: 22px;
  font-family: HarmonyOS_Sans_SC, HarmonyOS_Sans_SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #191919;
}
.mark_banner .a1_txt {
  max-width: 550px;
  font-size: 16px;
  line-height: 28px;
  margin: 20px 0 85px 0;
}
.mark_banner .Experience {
  width: 207px;
  height: 57px;
}
.mark_banner .Experience span {
  margin-right: 22px;
}
.web_title .tit {
  font-size: 44px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 400;
  text-align: center;
  color: #191919;
}
.web_title .txt {
  font-size: 18px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: center;
  color: #636363;
}
.web_area2 .web_a2_box {
  margin-top: 55px;
  width: 100%;
}
.web_area2 .web_a2_box .web_a2_item {
  position: relative;
  width: 443px;
  height: 304px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 50px;
}
.web_area2 .web_a2_box .web_a2_item .chaozhi {
  position: absolute;
  top: -12px;
  left: 0;
  width: 62px;
  height: 32px;
  background: linear-gradient(0deg, #ff8f01 0%, #ff3421 100%), #333333;
  border-radius: 10px 0 10px 0;
  font-size: 15px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
}
.web_area2 .web_a2_box .web_a2_item.isActive {
  box-shadow: 0px 0px 29px 0px rgba(5, 0, 0, 0.04);
  border-color: var(--themeColor);
}
.web_area2 .web_a2_box .web_a2_item.isActive .checkbox {
  background: var(--themeColor);
  border-color: var(--themeColor);
}
.web_area2 .web_a2_box .web_a2_item .checkbox {
  position: absolute;
  width: 23px;
  height: 23px;
  background: #ffffff;
  border-radius: 100%;
  border: 2px solid #eeeeee;
  right: 24px;
  top: 24px;
  cursor: pointer;
}
.web_area2 .web_a2_box .web_a2_item .checkbox i {
  color: #fff;
  font-size: 12px;
}
.web_area2 .web_a2_box .web_a2_item .tit {
  font-size: 24px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 400;
  text-align: left;
  color: #191919;
  margin-bottom: 15px;
}
.web_area2 .web_a2_box .web_a2_item .txt {
  width: 321px;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #636363;
  line-height: 25px;
  min-height: 108px;
}
.web_area2 .web_a2_box .web_a2_item .aprice .num {
  font-size: 46px;
  font-family: HarmonyOS_Sans_SC_Bold, HarmonyOS_Sans_SC_Bold-Regular;
  font-weight: 550;
  text-align: left;
  color: #333333;
}
.web_area2 .web_a2_box .web_a2_item .aprice span {
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #636363;
  margin-bottom: 10px;
}
.Freeapp {
  width: 1400px;
  height: 306px;
  background: #eef8f2;
  border-radius: 10px;
  padding: 50px 0 0 50px;
  margin-top: 40px;
}
.Freeapp .fhead {
  margin-bottom: 40px;
}
.Freeapp .fhead .tit {
  font-size: 24px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #191919;
}
.Freeapp .fhead span {
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #ff0045;
  margin-left: 40px;
  margin-bottom: 8px;
}
.Freeapp .Freelist {
  width: 100%;
}
.Freeapp .Freelist .Freeitem {
  width: 20%;
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #191919;
  margin-bottom: 15px;
}
.solution_template {
  width: 100%;
}
.solution_template.soldtc .InnerBox {
  min-height: 710px;
}
.solution_template.soldtc .tem_img {
  max-width: 610px;
}
.solution_template.soldtc .txt p {
  display: block;
  margin-bottom: 15px;
}
.solution_template .InnerBox {
  min-height: 516px;
}
.solution_template.isColor {
  background: var(--danColor);
}
.solution_template .tem_img {
  max-width: 700px;
}
.solution_template .tem_img img {
  max-width: 700px;
  width: auto;
}
.solution_template .tem_info .tit {
  font-size: 38px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #191919;
}
.solution_template .tem_info .txt {
  max-width: 700px;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #666666;
  line-height: 28px;
  margin: 25px 0 55px 0;
}
.solution_template .tem_info .Experience {
  width: 147px;
  height: 47px;
  border-radius: 7px;
}
.solution_template .tem_info .Experience span {
  font-size: 18px;
  margin-right: 20px;
}
.dtc_area2 .dtc_a2_box {
  width: 100%;
  margin: 80px 0;
}
.dtc_area2 .dtc_a2_box .dtc_a2_item .icon img {
  max-width: 78px;
}
.dtc_area2 .dtc_a2_box .dtc_a2_item .tit {
  margin: 40px 0 20px 0;
  font-size: 24px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 400;
  text-align: center;
  color: #191919;
}
.dtc_area2 .dtc_a2_box .dtc_a2_item .txt {
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: center;
  color: #666666;
  line-height: 28px;
}
.dtc_area2 .Experience {
  margin: 0 auto;
}
.dtc_area4 {
  background: var(--themeColor);
}
.dtc_area4 .dtc_a4_left > span {
  font-size: 18px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
}
.dtc_area4 .dtc_a4_left h2 {
  font-size: 38px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #ffffff;
  margin: 20px 0 65px 0;
}
.dtc_area4 .problemBox {
  width: 916px;
}
.dtc_area4 .problemBox .problem_line {
  width: 100%;
  border-bottom: solid 1px rgba(255, 255, 255, 0.24);
}
.dtc_area4 .problemBox .problem_line.isOpen {
  border-color: #fff;
}
.dtc_area4 .problemBox .problem_line.isOpen .openIcon::after {
  display: none !important;
}
.dtc_area4 .problemBox .problem_line .problem_head {
  height: 100px;
  cursor: pointer;
}
.dtc_area4 .problemBox .problem_line .problem_head .pro_left .num {
  width: 135px;
  font-size: 24px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #ffffff;
}
.dtc_area4 .problemBox .problem_line .problem_head .pro_left .tit {
  max-width: 712px;
  font-size: 22px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #ffffff;
}
.dtc_area4 .problemBox .problem_line .problem_head .pro_right .openIcon {
  width: 10px;
  height: 2px;
  position: relative;
  background: #ffffff;
}
.dtc_area4 .problemBox .problem_line .problem_head .pro_right .openIcon::after {
  content: '';
  display: block;
  position: absolute;
  height: 10px;
  width: 2px;
  background: #ffffff;
}
.dtc_area4 .problemBox .problem_line .problem_ceontnet {
  width: 100%;
  padding-bottom: 40px;
  padding-left: 135px;
  display: none;
}
.dtc_area4 .problemBox .problem_line .problem_ceontnet .ptext {
  max-width: 712px;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  line-height: 24px;
}
.dtc_area5 .dtc_a5_box {
  margin-top: 80px;
}
.dtc_area5 .dtc_a5_box .dtc_a5_left .a5_tit {
  font-size: 35px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #191919;
  margin-bottom: 20px;
}
.dtc_area5 .dtc_a5_box .dtc_a5_left .a5_txt {
  max-width: 600px;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #666666;
  line-height: 28px;
}
.dtc_area5 .dtc_a5_box .dtc_a5_left .proportion {
  margin: 40px 0;
}
.dtc_area5 .dtc_a5_box .dtc_a5_left .proportion .port_item .vnum {
  font-size: 35px;
  font-family: HarmonyOS_Sans_SC_Bold, HarmonyOS_Sans_SC_Bold-Regular;
  font-weight: 400;
  text-align: left;
  color: #2aae67;
  margin-bottom: 15px;
}
.dtc_area5 .dtc_a5_box .dtc_a5_left .proportion .port_item .vtit {
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #191919;
}
.dtc_area5 .dtc_a5_box .dtc_a5_left .zhouqi {
  margin-bottom: 45px;
  opacity: 0.64;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #191919;
}
.dtc_area5 .dtc_a5_box .dtc_a5_left .Experience {
  margin-top: 55px;
}
.dtc_area5 .dtc_a5_box .dtc_a5_right {
  width: 700px;
}
.dtc_area5 .dtc_a5_box .dtc_a5_right img {
  width: 100%;
  max-height: 600px;
}
.mark_area2 .mar_a2_template {
  width: 100%;
  margin-bottom: 90px;
}
.mark_area2 .mar_a2_template:last-of-type {
  margin-bottom: 0;
}
.mark_area2 .mar_a2_template .mar_a2_img {
  max-width: 700px;
}
.mark_area2 .mar_a2_template .mar_a2_img img {
  width: auto;
  max-width: 700px;
}
.mark_area2 .mar_a2_template .mar_a2_info {
  max-width: 680px;
  padding-top: 90px;
}
.mark_area2 .mar_a2_template .mar_a2_info.paddtop50 {
  padding-top: 50px;
}
.mark_area2 .mar_a2_template .mar_a2_info.paddtop70 {
  padding-top: 70px;
}
.mark_area2 .mar_a2_template .mar_a2_info .tit {
  max-width: 668px;
  font-size: 38px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #191919;
  line-height: 48px;
}
.mark_area2 .mar_a2_template .mar_a2_info .txt {
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #666666;
  line-height: 28px;
  margin: 30px 0;
}
.mark_area2 .mar_a2_template .mar_a2_info .txt p {
  display: block;
  margin-bottom: 16px;
}
.mark_area2 .mar_a2_template .mar_a2_info .tiyanbtn {
  border-radius: 30px;
  width: 136px;
  height: 48px;
  background: var(--themeColor);
  font-size: 14px;
  font-family: HarmonyOS_Sans_SC_Medium, HarmonyOS_Sans_SC_Medium-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}
.mark_area3 {
  background: var(--danColor);
}
.mark_area3 .mak3_tit {
  font-size: 28px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #191919;
  margin-bottom: 40px;
}
.mark_area3 .ma_a3_list {
  width: 100%;
}
.mark_area3 .ma_a3_list .ma_a3_item {
  margin-bottom: 43px;
  width: 30%;
}
.mark_area3 .ma_a3_list .ma_a3_item .tit {
  font-size: 18px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #191919;
  margin-bottom: 20px;
}
.mark_area3 .ma_a3_list .ma_a3_item .itxt::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: var(--themeColor);
  display: block;
  margin-right: 11px;
  margin-top: 10px;
}
.mark_area3 .ma_a3_list .ma_a3_item .itxt .ifont {
  max-width: 391px;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #636363;
  line-height: 32px;
}
.mark_area4 .problem_mark {
  width: 100%;
  margin-top: 40px;
}
.mark_area4 .problem_mark .marka4_line {
  background: var(--danColor);
  margin-bottom: 25px;
  padding: 0 30px;
}
.mark_area4 .problem_mark .marka4_line.isOpen .openIcon {
  transform: rotate(45deg);
}
.mark_area4 .problem_mark .marka4_line:last-of-type {
  margin-bottom: 0;
}
.mark_area4 .problem_mark .marka4_line .problem_head {
  height: 58px;
  cursor: pointer;
}
.mark_area4 .problem_mark .marka4_line .problem_head .tit {
  max-width: 1000px;
  font-size: 22px;
  font-family: MicrosoftYaHeiSemibold, MicrosoftYaHeiSemibold-Regular;
  font-weight: 550;
  text-align: left;
  color: #191919;
}
.mark_area4 .problem_mark .marka4_line .problem_head .pro_right .openIcon {
  width: 15px;
  height: 3px;
  position: relative;
  background: var(--themeColor);
}
.mark_area4 .problem_mark .marka4_line .problem_head .pro_right .openIcon::after {
  content: '';
  display: block;
  position: absolute;
  height: 15px;
  width: 3px;
  background: var(--themeColor);
}
.mark_area4 .problem_mark .marka4_line .marka4_ceontnet {
  display: none;
  max-width: 1309px;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #636363;
  line-height: 26px;
  padding-bottom: 25px;
}