续费教材

.card{
  background:#ffffff;
  padding:16px 14px;
  border-radius:14px;
  margin:12px 0;
  box-sizing:border-box;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}

.title{
  font-size:26px;
  line-height:1.35;
  font-weight:600;
  margin-bottom:14px;
  color:#111;
}

.card p{
  font-size:18px;
  line-height:1.75;
  margin:16px 0;
}

.step{
  color:#005bd8;
  font-size:19px;
  line-height:1.75;
  font-weight:500;
  margin-top:16px;
  background:#eef6ff;
  border-left:5px solid #1677ff;
  padding:10px 12px;
  border-radius:8px;
  box-sizing:border-box;
}

.warn{
  color:#d60000;
  font-size:19px;
  line-height:1.75;
  font-weight:500;
  background:#fff1f0;
  border-left:5px solid #e53935;
  padding:10px 12px;
  border-radius:8px;
  box-sizing:border-box;
}

img{
  width:92%;
  max-width:780px;
  display:block;
  border-radius:10px;
  margin:14px auto 8px auto;
}

.btn{
  display:block;
  background:linear-gradient(135deg,#1677ff,#4096ff);
  color:#fff !important;
  text-align:center;
  padding:16px;
  border-radius:12px;
  text-decoration:none !important;
  margin-top:16px;
  font-size:18px;
  font-weight:600;
  box-sizing:border-box;
}

a{
  color:#005bd8;
  font-weight:600;
}

hr{
  margin:12px 0;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(255,90,90,0.28);
}

@media (max-width:600px){
  body{
    font-size:15px;
    line-height:1.6;
  }

.card{
    padding:12px 10px;
    border-radius:12px;
  }

.title{
    font-size:20px;
    line-height:1.35;
    margin-bottom:10px;
    font-weight:600;
  }

.card p{
    font-size:15px;
    line-height:1.65;
    margin:12px 0;
  }

.step{
    font-size:16px;
    line-height:1.65;
    font-weight:500;
    padding:9px 10px;
    border-left-width:4px;
  }

.warn{
    font-size:16px;
    line-height:1.65;
    font-weight:500;
    padding:9px 10px;
    border-left-width:4px;
  }

img{
    width:100%;
    margin:10px auto 6px auto;
  }

.btn{
    font-size:16px;
    padding:14px;
    font-weight:600;
  }
}
</style>
</head>

<body>

<div class="card">
<p class="warn">⭕️网络节点售后问题 联系本网页或者官网左下角在线客服 在线时间为9:00-24:00⭕️</p>
</div>

<p class="step">
● 续费之前请关闭加速器开关<br>
● 如果官网进不去请多等待一会<br>
● 如果忘记登录密码，请点击登陆界面“忘记密码”找回密码
</p>

<a href="https://11.iyun.win" target="_blank" class="btn" style="display:block;background:linear-gradient(135deg,#1677ff,#4096ff);color:#fff;text-align:center;padding:16px;border-radius:12px;text-decoration:none;margin-top:16px;font-size:18px;font-weight:600;box-sizing:border-box;">
看完下面步骤后，点击此处进入官网
</a>

<p class="warn">不要用百度浏览器和微信打开此页面和官网，否则会无法导入订阅</p>
</div>

<p class="warn">支付成功后，请先更新服务器；如果无法更新，请再替换服务器。</p>
</div>

<div class="card">
<div class="title">各系统更新订阅方法</div>

<a href="https://doc.iyun.win/project/18/" class="btn" style="display:block;background:linear-gradient(135deg,#1677ff,#4096ff);color:#fff;text-align:center;padding:16px;border-radius:12px;text-decoration:none;margin-top:16px;font-size:18px;font-weight:600;box-sizing:border-box;">
点击此处去查看
</a>
</div>

<div class="card">
<div class="title">各系统替换服务器方法</div>

<a href="https://doc.iyun.win/project/15/" class="btn" style="display:block;background:linear-gradient(135deg,#1677ff,#4096ff);color:#fff;text-align:center;padding:16px;border-radius:12px;text-decoration:none;margin-top:16px;font-size:18px;font-weight:600;box-sizing:border-box;">
点击此处去查看
</a>
</div>

</body>
</html>