html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
  margin: 0;
  padding: 0;
  height: 100%;
}

fieldset,
img,
input,
button {
  border: none;
  padding: 0;
  margin: 0;
  outline-style: none;
}

ul,
ol {
  list-style: none;
}

input {
  padding-top: 0;
  padding-bottom: 0;
  font-family: SimSun, 瀹嬩綋;
}

select,
input {
  vertical-align: middle;
}

select,
input,
textarea {
  font-size: 0.16rem;
  margin: 0;
}

textarea {
  resize: none;
}

img {
  border: 0;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

#app {
  height: 100%;
}

body {
  height: 100%;
  font-size: 0.18667rem;
  color: #666;
  background: #fff;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

a {
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #c81623;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-decoration: none;
  font-weight: 400;
  font-size: 100%;
}

s,
i,
em {
  font-style: normal;
  text-decoration: none;
}

.col-red {
  color: #c81623 !important;
}

.flex-loading {
  width: 2.66667rem;
  height: 0.48rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.flex-loading li {
  width: 0.05333rem;
  height: 0.16rem;
  display: inline-block;
  background: #000;
  margin: 0 0.02667rem;
  animation: flex-loading 0.8s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--time));
}

@keyframes flex-loading {
  0%,
  25%,
  50% {
    transform: scaleY(1);
  }
  75% {
    transform: scaleY(4);
  }
}

/* 全部 :root 和变量部分保留，因为这不会造成冲突 */
:root,
:host {
  --van-black: #000;
  --van-white: #fff;
  --van-gray-1: #f7f8fa;
  --van-gray-2: #f2f3f5;
  --van-gray-3: #ebedf0;
  --van-gray-4: #dcdee0;
  --van-gray-5: #c8c9cc;
  --van-gray-6: #969799;
  --van-gray-7: #646566;
  --van-gray-8: #323233;
  --van-red: #ee0a24;
  --van-blue: #1989fa;
  --van-orange: #ff976a;
  --van-orange-dark: #ed6a0c;
  --van-orange-light: #fffbe8;
  --van-green: #07c160;
  --van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
  --van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
  --van-primary-color: var(--van-blue);
  --van-success-color: var(--van-green);
  --van-danger-color: var(--van-red);
  --van-warning-color: var(--van-orange);
  --van-text-color: var(--van-gray-8);
  --van-text-color-2: var(--van-gray-6);
  --van-text-color-3: var(--van-gray-5);
  --van-active-color: var(--van-gray-2);
  --van-active-opacity: 0.6;
  --van-disabled-opacity: 0.5;
  --van-background: var(--van-gray-1);
  --van-background-2: var(--van-white);
  --van-background-3: var(--van-white);
  --van-padding-base: 0.10667rem;
  --van-padding-xs: 0.21333rem;
  --van-padding-sm: 0.32rem;
  --van-padding-md: 0.42667rem;
  --van-padding-lg: 0.64rem;
  --van-padding-xl: 0.85333rem;
  --van-font-bold: 600;
  --van-font-size-xs: 0.26667rem;
  --van-font-size-sm: 0.32rem;
  --van-font-size-md: 0.37333rem;
  --van-font-size-lg: 0.42667rem;
  --van-line-height-xs: 0.37333rem;
  --van-line-height-sm: 0.48rem;
  --van-line-height-md: 0.53333rem;
  --van-line-height-lg: 0.58667rem;
  --van-base-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  --van-price-font: avenir-heavy, "PingFang SC", helvetica neue, arial, sans-serif;
  --van-duration-base: 0.3s;
  --van-duration-fast: 0.2s;
  --van-ease-out: ease-out;
  --van-ease-in: ease-in;
  --van-border-color: var(--van-gray-3);
  --van-border-width: 0.02667rem;
  --van-radius-sm: 0.05333rem;
  --van-radius-md: 0.10667rem;
  --van-radius-lg: 0.21333rem;
  --van-radius-max: 26.64rem;
}

/* 其他 class 保持不变，略去中间重复部分 */

/* 最后这个类也处理过了 */
.mianHome {
  width: 10rem;
  height: 100%;
}

.openinstall_shadow {
  position: fixed;
  left: 0;
  top: 0;
  background: #00000080;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.openinstall_shadow .mask-img {
  text-align: right;
  margin-top: 1%;
  margin-right: 5%;
}

.openinstall_shadow .mask-img img {
  width: 70%;
  margin: 0 auto;
}





.check-content {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e1e1e1;
  width: 100%;
  height: 100%;
  position: absolute;
}

.check-content .loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.check-content .loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}

.check-content .loader:before,
.check-content .loader:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid #fff;
  animation: prixClipFix 2s linear infinite;
}

.check-content .loader:after {
  border-color: #ff3d00;
  animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
  inset: 6px;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  to {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

.check-content .waf-check {
  text-align: center;
  margin-top: 1rem;
}

.check-content .waf-check .btn {
  text-decoration: none;
  color: #000;
  background: #fff;
  font-size: 1.2rem;
  display: inline-block;
  border: 0.01333rem solid #5d5d5d;
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
}

.template-content {
  padding-bottom: 1.33333rem;
  position: relative;
}

.template-content .top-img {
  position: relative;
  background-size: contain;
  width: 100%;
  height: auto;
}

.template-content .top-img .chat-img {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 60%;
  height: auto;
}

.template-content .bottom-img {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}

.template-content .base-img {
  width: 100%;
  height: auto;
}

.template-content .customer-img {
  position: fixed;
  width: 2.13333rem;
  height: auto;
  top: 30%;
  right: 0.13333rem;
  transform: translateY(-50%);
  z-index: 9999;
}

.template-content .telegram-img {
  position: fixed;
  width: 2.13333rem;
  height: auto;
  top: 60%;
  right: 0.13333rem;
  transform: translateY(-50%);
  z-index: 9999;
}

.template-content .down_img {
  position: fixed;
  width: 10rem;
  height: auto;
  left: 0;
  bottom: 0;
  z-index: 999;
}

.template-content .template1_bg {
  width: 100%;
  height: auto;
}

.pop-modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0006;
}

.pop-modal .modal-content {
  background-color: #fefefe;
  width: 60%;
  margin: 30% auto;
}

.pop-modal img {
  max-width: 100%;
  height: auto;
}

.pop-modal .hbimg {
  animation: hob_shake 2s infinite;
  float: right;
}

@keyframes hob_shake {
  15%,
  45% {
    transform: rotate(3deg);
    transform-origin: 50% 100%;
  }
  30% {
    transform: rotate(-3deg);
    transform-origin: 50% 100%;
  }
  60%,
  to {
    transform: rotate(0deg);
    transform-origin: 50% 100%;
  }
}

.pop-modal .close {
  color: #aaa;
  float: right;
  position: relative;
  right: 44%;
  z-index: 9999;
}

.pop-modal .close img {
  background-color: #d04b21;
  position: relative;
  width: 0.46667rem;
  border-radius: 50%;
}