@charset "utf-8";
/*====================================================
  手机端实体WiFi页通用样式（H5 手机版）
  - 单列 480px 内宽，底部价格贴纸/二维码固定
  - 含安全区适配（iPhone 流海屏 / 底部横条）
  - 仅面向手机端；平板/桌面误打开时内容居中
====================================================*/

/*----- 基础重置：移动端友好 -----*/
*{padding:0;margin:0;box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-user-select: none;user-select: none;}
html{height:100%;background:#7dc5ca; /* 超出480宽度区域背景色 */}
body{min-height:100%;min-height:100dvh;color:#333;background:#f2f5f7; 
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",Tahoma,Arial,sans-serif;
  font-size:14px;line-height:1.2;
  max-width: 480px;
  margin: 0 auto; /* 水平居中 */ background:#f6f6f6;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  touch-action:pan-y;overflow-x:hidden;overscroll-behavior:none;}
/* 隐藏滚动条但保留滚动能力 */
html,body{-ms-overflow-style:none;scrollbar-width:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;}

a{text-decoration:none;}
img{border:0;vertical-align:middle;max-width:100%;height:auto;}
ol,ul{list-style:none;}
table{border-collapse:collapse;}
button{background:none;border:none;font:inherit;color:inherit;cursor:pointer;}
.clear{clear:both;width:0;height:0;overflow:hidden;}
/* 放开允许复制 图片长按菜单 */
.allow-select {-webkit-user-select: text !important;user-select: text !important;}
img:not(.allow-menu) {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;}
.img-mask-wrap {position: relative;display: block;}
.img-mask-layer {position: absolute;inset: 0;background: transparent;pointer-events: auto;}
img {display: block;max-width: 100%;}
.hidden{opacity:0;transition:opacity 0.3s;pointer-events:none;}
/*----- 通用工具类 -----*/
/* 允许横向滚动的块，给div加上 class="scroll-x-box" */
.scroll-x-box {overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE */}
.scroll-x-box::-webkit-scrollbar {display: none; /* webkit内核：微信、safari、chrome隐藏滚动条轨道 */}
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
/* 下拉刷新头部提示区域 */
.pull-refresh-header{height:0;overflow:hidden;text-align:center;line-height:60px;color:#666;transition: height 0.2s; }
.pull-refresh-header span{ }
.pull-refresh-header.show{height:40px;}
.cat-page-bg { position:fixed;background-color:#ededed;left: 0;right:auto;overflow: hidden;padding-top: 100vw; z-index:-999;left: 50%;width: 100%;transform: translateX(-50%); max-width:480px; }
.cat-page-bg::after {content: "";display: block;position: absolute;left: 0px;right: 0px;bottom: 0px;top: 50%;background: linear-gradient(0deg, rgb(243, 245, 247), rgba(0, 0, 0, 0));}

.mt10{ margin-top:10px;}
.mt20{ margin-top:20px;}
/*----- 配色 -----*/
.ys-bai{ color:#FFF}
.ys-hei{ color:#000}
.ys-hui{ color:#ccc}
.ys-cheng{ color:#FF6600}
.ys-qing{ color:#66cccc}
.ys-lv{ color:#07c160}
.btn-bg-lv{ background:#07c160; }
.btn-bg-hui{ background:#ddd; }

/*----- 图标颜色 -----*/
.icon-002{color: #ff8300; }/* VIP */
.icon-wechat,.icon-wechat-1{color: #07C160;; }/* wechat */
.icon-douyin,.icon-douyin-1{color: #333;; }/* douyin */

.avatar {display: block;border-radius: 100%;overflow: hidden}
/*----- 动画 -----*/
.donghua-up05{animation:fadeUp .5s ease .05s both;}


/*----- 上下安全区padding -----必须元素本身是 `position:absolute / fixed` 才会生效 */
.pt-save{}
.pb-save{bottom:calc(64px + var(--safe-bottom));}


/*----- logo区 ------------ */

/* 父容器建议设置相对定位，logo盒子基于它定位 */
.logo-box {position: relative;width: 100%;min-height: 100vh;}
.logo-box-tl {position: absolute;top: 16px;left: 16px;}
.logo-box-tc {position: absolute;top: 16px;left: 50%;transform: translateX(-50%);}
.logo-box-tr {position: absolute;top: 16px;right: 16px;}
.logo-box-cc {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}



/*----- 链接到官网 -----*/
.contact-box{ z-index:99999;height:30px; background:#fff; position:fixed; padding: 5px 10px;border-radius:20px 0px 0px 20px; transition: transform 0.3s ease;right:0px; top:23px; line-height:1; gap:5px; will-change: transform; /* 新增，优化transform动画 */ display:flex;}
.contact-box.hidden {transform: translateX(100%);}
@media (min-width: 480px) {.contact-box {margin-right: calc((100vw - 481px) / 2);}}


.contact-box button {border: none;background: transparent;padding: 0;flex: 1; /* 三个按钮弹性均分宽度 */text-align: center;font-size: 18px; /* 图标大小根据你的icon调整 */}






/* 弹窗主体 微信风格 */
.popup-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:386px;background:#ffffff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;max-height:61.8vh;
/* 渐显 */transition:all 0.25s ease; display:none;
/* 毛玻璃透明效果 */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
/* 增强质感 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.6);}
.popup-wrap.active {opacity: 1;visibility: visible;}
.popup-title{padding:16px 16px 12px;font-size:17px;font-weight:500;text-align:center;color:#333333;border-bottom:1px solid #f5f5f5;}
/* 可滚动内容区域 */
.popup-content{padding:16px;overflow-y:auto;flex:1;font-size:15px;color:#444;line-height:1.6;-webkit-overflow-scrolling: touch;
/* 居中开始 */display:flex;flex-direction:column;justify-content:center;/* 垂直居中 */align-items:center; /* 水平居中 */}
.popup-content img{ max-width:50%; min-width:128px;}
.popup-content p{ font-size:14px;}
.popup-close-btn{border-top:1px solid #f5f5f5;padding:12px 16px;text-align:center;}
.popup-close-btn button{border: none;outline: none;color:#ffffff;font-size:16px;padding:10px 32px;border-radius:8px; width:128px; line-height:1}
.popup-close-btn button:active{background:#06ae56; /* 点击变暗 */}

/*遮罩样式*/
.scr-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.88);display: flex;justify-content: center;align-items: center;z-index: 999;opacity:0;visibility:hidden;transition:all 0.25s ease;}
.scr-overlay.active {opacity: 1;visibility: visible;}



/*----- 内容区 -----*/
.main{ left: 50%;width: 100%;transform: translateX(-50%); max-width:480px;position: relative; padding:0 16px calc(120px + var(--safe-bottom)); }

/* 从下方20px浮上来，数值可调 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px); 
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.donghua-up05 {animation: fadeUp .5s ease .05s both;}


/*----- 页面背景（铺满全屏；图片加载失败时退回深色渐变，保证白字可读）-----*/
.bg-wrap {
  max-width: 480px;
  margin: 0 auto; /* 大屏居中 */
}
.bg-wrap img {width: 100%;display: block;}