@charset "utf-8";
/* =========================================================
   怒名小铺 复刻版 — 样式表
   https://www.numing.cn/
   目录：
     01. 基础重置
     02. 网络字体
     03. 主题配色
     04. 页面骨架 / 公告条 / 轮播
     05. 楼层导航
     06. 域名与靓号卡片
     07. 页脚 / 版权 / 返回顶部
     08. 字号与配色工具类
     09. 个人主页卡片（profile card）
     10. 交易流程向导
     11. 复刻版补充样式
   ========================================================= */

/* =========================================================
    01. 基础重置
   ========================================================= */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td,span{margin:0;padding:0;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
li{list-style:none;}
img{border:0;vertical-align:middle;}
html,body{width:100%;height:100%;}
body{color:#333;background-color:#f2f2f2;}
*{-webkit-tap-highlight-color:transparent;}

/* =========================================================
    02. 网络字体（OPPO Sans 3.0 子集 woff2 + 图标字体 idaibu）
   ========================================================= */
@font-face{
  font-family:'qq3898027';
  font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/qq3898027.woff2') format('woff2');
}
body{font-family:'qq3898027','PingFang SC','Microsoft YaHei','Hiragino Sans GB',sans-serif!important;}

/* =========================================================
    03. 主题配色（站点主色 #0085e6）
   ========================================================= */
.color-zt{color:#0085e6!important;}
.color-bj{background:#0085e6!important;}
.tab-on{color:#0085e6!important;}
.show-lou-list:hover{background:rgba(0,133,230,.68)!important;color:#fff!important;}
.show-lou-list:after{background:#0085e6!important;}
.show-lou-listmi:hover{background:rgba(0,133,230,.68)!important;color:#fff!important;}
.show-lou-listmi:after{background:#0085e6!important;}
.card-buttons button.is-active{background:#0085e6!important;color:#fff!important;}
.card-timeline:after{background:linear-gradient(to top,rgba(255,255,255,0) 0%,#0085e6 100%);}
.card-item:after{background:#0085e6!important;color:#787878!important;}
.show-list:hover{border:2px solid #0085e6!important;box-shadow:0 0 8px rgba(0,133,230,.18);}
.show-list:hover::after{background-image:linear-gradient(90deg,transparent,#0085e6,transparent);}
.show-listmi:hover{border:2px solid #0085e6!important;box-shadow:0 0 8px rgba(0,133,230,.18);}
.show-listmi:hover::after{background-image:linear-gradient(90deg,transparent,#0085e6,transparent);}
.tab-bo:hover{color:#0085e6!important;}
.line.-start,.line.-end,.line.-progress,.button{background:#0085e6;}
.show-listmi-one{background:#0085e6;}
.show-listmi-three-buy a{color:#0085e6;}
.tab-bo{width:calc(100% / (3 + 1 + 1));}

/*本代码由以指代步原创设计 YZDB.NET*/
/*以指代步原创设计*/
/*技术QQ：7658199 */
/*拒绝盗版，尊重创作者*/

@font-face{font-family:"idaibu";src:url('../assets/iconfont.woff2')format('woff2'),url('../assets/iconfont.woff2')format('woff'),url('../assets/iconfont.woff2')format('truetype')}.idaibu{font-family:"idaibu"!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-fanhuidingbu:before{content:"\e679"}.icon-top:before{content:"\e61d"}.icon-icp:before{content:"\e8ba"}.icon-hot1:before{content:"\e61c"}.icon-hot:before{content:"\e641"}.icon-pingtai:before{content:"\e6d7"}.icon-gouwuche1:before{content:"\e61a"}.icon-gouwuche:before{content:"\e619"}.icon-biaoti1:before{content:"\e617"}.icon-biaoti2:before{content:"\e618"}.icon-youjian:before{content:"\e616"}.icon-tab-yuming:before{content:"\e9cd"}.icon-tab-qq:before{content:"\e631"}.icon-dongtai:before{content:"\e62e"}.icon-logo:before{content:"\e60f"}.icon-logo1:before{content:"\e613"}.icon-cainixihuan:before{content:"\e63d"}.icon-cainixihuanzuo:before{content:"\e620"}.icon-cainixihuanyou:before{content:"\e621"}.icon-cainixihuan1:before{content:"\e61b"}.icon-huiche:before{content:"\e612"}.icon-ui-qq:before{content:"\e887"}.icon-ui-weixin:before{content:"\e65f"}.icon-ui-alipay:before{content:"\e666"}.icon-ui-taobao:before{content:"\e667"}.icon-ui-1688:before{content:"\e668"}.icon-dianhua:before{content:"\e611"}.icon-wechat:before{content:"\e605"}.icon-weibo:before{content:"\e606"}.icon-qzone:before{content:"\e607"}.icon-wechat-friend:before{content:"\e60a"}.icon-qq:before{content:"\e60b"}.icon-markfill:before{content:"\e731"}.icon-tab-service:before{content:"\e737"}.icon-tab-miaosha:before{content:"\e603"}.icon-title-icon-purple:before{content:"\e604"}.icon-biaoti:before{content:"\e738"}.icon-tab-liwu:before{content:"\e601"}.icon-tab-home:before{content:"\e602"}.icon-tab-calendar:before{content:"\e953"}.icon-tab-save:before{content:"\e956"}.icon-ruyitao:before{content:"\e600"}.icon-tuijian:before{content:"\e6e9"}.icon-tuijian-copy:before{content:"\eb69"}.icon-renminbi:before{content:"\e73e"}.icon-home:before{content:"\e610"}.icon-you:before{content:"\e64e"}.icon-huodong:before{content:"\e650"}.icon-gouwulan:before{content:"\e651"}.icon-guanbi:before{content:"\e654"}.icon-jia:before{content:"\e659"}.icon-jian:before{content:"\e65a"}.icon-zuo:before{content:"\e65b"}.icon-saoma:before{content:"\e65c"}.icon-shang:before{content:"\e65d"}.icon-xia:before{content:"\e65e"}.icon-icon-test1:before{content:"\e660"}.icon-tuichu:before{content:"\e658"}.icon-liebiao:before{content:"\e684"}.icon-liebiaozhankai:before{content:"\e72f"}.icon-liebiaoshouqi:before{content:"\e730"}.icon-tuichu1:before{content:"\e60d"}.icon-tiaoseban:before{content:"\e609"}.icon-renzheng:before{content:"\e870"}.icon-danbao:before{content:"\e60c"}.icon-huati:before{content:"\e64b"}.icon-shangjia:before{content:"\e615"}.icon-wenjianjia:before{content:"\e62a"}.icon-shoucang1:before{content:"\e635"}.icon-id:before{content:"\e60e"}.icon-shezhi:before{content:"\e608"}.icon-zhanghao1:before{content:"\eb68"}.icon-shangpin:before{content:"\e64f"}.icon-tupian:before{content:"\e62d"}.icon-shangchuanyunduan:before{content:"\e87b"}.icon-dingdan1:before{content:"\e625"}.icon-onlinekefu:before{content:"\e688"}.icon-jishufuwushang1:before{content:"\e68e"}.icon-jishukanban:before{content:"\e6a3"}.icon-zhanghao:before{content:"\e683"}

body{font-family:'qq3898027','PingFang SC','Microsoft YaHei','Hiragino Sans GB',sans-serif!important;background-repeat:no-repeat;background-position:center center;background-size:cover;background-attachment:fixed;background-position:center center;background-repeat:no-repeat}
.content{margin:0 auto;width:750px;min-height:100vh;background-image:url(../assets/content-bj.png);background-attachment:fixed;background-repeat:no-repeat;background-size:cover;box-shadow:8px 0 8px rgba(0,0,0,.18),-8px 0 8px rgba(0,0,0,.18)}
@media only screen and (max-width:768px){.content{width:100%}
}
.content::after{content:"";display:table;clear:both}
.head{width:100%;height:60px;padding:10px;overflow:hidden;position:relative;box-sizing:border-box;display:flex;justify-content:center;align-items:center}
.head-icon{align-items:center;padding-right:10px}
.head-icon i{color:#f2f2f2;text-align:center}
.head-content{padding:0 10px;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap;overflow:hidden;text-align:right}
.head-text{-webkit-animation:loop 15s linear infinite both;animation:loop 15s linear infinite both;color:#f7f7f7;white-space:nowrap;word-break:keep-all}
@keyframes loop{0%{transform:translateX(100%)}
100%{transform:translateX(-100%)}
}
.banner{float:left;width:100%;margin-top:20px;padding:0 20px;box-sizing:border-box;position:relative}
.banner-box{float:left;width:100%;height:284px;position:relative;overflow:hidden;border-radius:8px;margin:0 auto}
.banner-points{position:absolute;z-index:5;list-style:none;display:flex;justify-content:center;align-items:center;bottom:12px;border-radius:8px;background:rgba(0,0,0,.2);padding:1px 2px}
.banner-points{left:calc((750px - 40px - 20px - 20px - 20px)/ 2)}
.banner-points li{cursor:pointer;display:inline-block;margin:0 auto;width:8px;height:8px;border-radius:50%;background-color:rgba(0,0,0,.5);margin:2px}
.banner-active{background-color:#fff!important;width:30px!important;height:8px!important;border-radius:8px!important}
.banner-next,.banner-prev{position:absolute;text-align:center;color:#fff;background-color:#000;cursor:pointer;font-size:20px;width:22px;height:50px;line-height:50px;border-radius:3px;top:39%;opacity:.2}
.banner-prev{left:10px}
.banner-next{right:10px}
.banner-next i,.banner-prev i{font-size:20px}
.banner-next:hover,.banner-prev:hover{opacity:.5}
.banner-box a img{width:100%;height:100%;text-align:center}
.banner-ad{right:5%;top:5%;position:absolute;overflow:hidden;opacity:.25}
.banner-ad font{float:left;color:#fff;padding:2px 6px;border-radius:3px;background-color:#000;letter-spacing:.5px;cursor:pointer}
@media screen and (max-width:768px){.banner-box{height:150px}
.banner-points{left:calc((375px - 20px - 20px - 10px - 10px)/ 2)}
.banner-ad{display:none}
.banner-next,.banner-prev{top:30%}
/* =========================================================
    04. 页面骨架 / 公告条 / 轮播
   ========================================================= */

}
.show{width:100%;padding:20px;border-radius:8px;display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box}
/* =========================================================
    05. 楼层导航（字母 / 拼音 / 6位 / 8位）
   ========================================================= */

.show-list-container{width:100%;display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box}
.show-lou{position:flex;top:0;width:750px;margin-bottom:15px;line-height:40px;border-radius:3px;box-shadow:0 0 8px rgba(0,0,0,.18)}
.show-lou-list{width:calc(100% / 6);float:left;font-weight:700;letter-spacing:1px;text-align:center;box-sizing:border-box;position:relative}
.show-lou-list:after{content:"";position:absolute;top:95%;left:50%;width:0;height:2px;z-index:10;border-radius:2px}
.show-lou-list:hover:after{left:0;transition:all .6s;width:100%}
.show-lou-listmi{width:calc(100% / 5);float:left;font-weight:700;letter-spacing:1px;text-align:center;box-sizing:border-box;position:relative}
.show-lou-listmi:after{content:"";position:absolute;top:95%;left:50%;width:0;height:2px;z-index:10;border-radius:2px}
.show-lou-listmi:hover:after{left:0;transition:all .6s;width:100%}
.show-title{float:left;width:100%;line-height:22px;margin-bottom:15px;letter-spacing:1px}
.show-title i{float:left}
.show-title span{float:left;cursor:pointer;margin:0 5px}
.show-biaoti{line-height:22px;margin-bottom:10px;letter-spacing:1px}
.show-biaoti i{float:left}
/* =========================================================
    06. 域名与靓号卡片（列表 / 米卡）
   ========================================================= */

.show-biaoti span{float:left;cursor:pointer;margin:0 5px}
.show-list{background:#fff;width:calc(670px / 3);height:115px;border-radius:8px;margin-bottom:20px;padding:10px 0;box-sizing:border-box;position:relative;display:block;border:2px solid #fff}
.show-list:not(:nth-child(3n)){margin-right:calc(40px / 2)}
@media only screen and (max-width:768px){.show-list{width:177px}
.show-list:nth-child(odd){margin-right:calc(40px / 2)}
.show-list:nth-child(even){margin-right:0}
}
.show-liang{background:url(../assets/bg-liang.png) 80px -25px no-repeat,#fff;background-size:180px}
.show-pu{background:url(../assets/bg-pu.png) 80px -25px no-repeat,#fff;background-size:180px}
.show-hj{background:url(../assets/bg-hj.png) 80px -25px no-repeat,#333;background-size:180px}
.show-bj-pu{box-shadow:0 0 8px rgba(0,0,0,.18)}
.show-bj-liang{box-shadow:0 0 8px rgba(255,0,0,.18)}
.show-bj-hj{box-shadow:0 0 8px rgba(255,198,0,.18)}
.show-list-hang{float:left;width:100%;line-height:22px;padding:0 10px}
.show-list-hang:nth-child(n+2){margin-top:12px}
.show-list-icon{float:left;padding:1px 7px 1px 5px;border-radius:5px 0 0 5px}
.show-list-hao{float:left;padding:0 5px;margin-left:-3px;letter-spacing:1px;border-radius:0 5px 5px 0;cursor:pointer}
.show-list-liang{position:absolute;right:10px;top:7px}
@media only screen and (max-width:768px){.show-list-liang{display:none}
}
.show-list-pay{float:left;margin-right:3px;color:red}
.show-list-pay i{float:left}
.show-list-money{float:left;color:red;font-weight:700;letter-spacing:1px}
.pay-hj{color:#fff2c5}
.money-hj{color:#fff2c5}
.show-list-jian{float:left;margin-left:5px}
.show-list-fenlei{float:left;padding:0 8px;border-radius:22px;letter-spacing:1px;margin-right:8px}
.show-list-fenlei i{margin-right:3px}
.show-list-bao{float:left;margin-left:-2px}
.show-list-bao i{float:left}
.show-listmi{background:#fff;width:calc(690px / 2);height:138px;border-radius:8px;margin-bottom:20px;box-sizing:border-box;position:relative;display:block;border:2px solid #fff}
.show-listmi:not(:nth-child(2n)){margin-right:calc(40px / 2)}
@media only screen and (max-width:768px){.show-listmi{width:100%}
.show-listmi:not(:nth-child(2n)){margin-right:calc(0px / 2)}
}
.show-listmi::after{content:"";display:table;clear:both}
.show-listmi:hover{cursor:pointer}
.show-listmi-pu{box-shadow:0 0 8px rgba(0,0,0,.18)}
.show-listmi-you{box-shadow:0 0 8px rgba(255,0,0,.18)}
.show-listmi-jin{box-shadow:0 0 8px rgba(255,198,0,.18)}
.show-mi-pu{background:url(../assets/bg-pu.png) 200px 30px no-repeat,#fff;background-size:168px}
.show-mi-you{background:url(../assets/bg-liang.png) 200px 30px no-repeat,#fff;background-size:168px}
.show-mi-jin{background:url(../assets/bg-hj.png) 200px 30px no-repeat,#fff;background-size:168px}
.show-listmi-one{float:left;width:100%;padding:10px;box-sizing:border-box;position:relative;color:#fff;border-radius:6px 6px 0 0;margin-top:0;overflow:hidden}
.show-listmi-one:hover::after{background-image:linear-gradient(90deg,transparent,#fff,transparent)}
.show-listmi-one:hover::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;border-radius:5px;cursor:pointer;background-size:200% 100%;background-position:-100% 0;opacity:1;animation:scanLine 2s infinite linear;transform:rotate(45deg)}
@keyframes scanLine{0%{background-position:-100% 0;opacity:1;transform:rotate(0)}
50%{opacity:.5;transform:rotate(0)}
100%{background-position:100% 0;opacity:1;transform:rotate(0)}
}
.show-listmi-one-icon{position:absolute;margin-top:-10px;margin-left:0;width:40px;height:40px;background-size:cover}
.onebj-you{background:#fe5502!important;color:#fff!important}
.onebj-jin{background:#333!important;color:#ffc600!important}
.mi-icon-pu{background:url(../assets/mi-pu.svg) no-repeat}
.mi-icon-you{background:url(../assets/mi-you.svg) no-repeat}
.mi-icon-jin{background:url(../assets/mi-jin.svg) no-repeat}
.show-listmi-one-mi{float:left;position:relative;padding-left:15%;letter-spacing:1px;width:55%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.show-listmi-one-year{position:absolute;right:10px;top:13px;letter-spacing:1px;overflow:hidden;opacity:.68}
.show-listmi-two{float:left;width:100%;padding:10px 10px;box-sizing:border-box;color:#787878;letter-spacing:1px}
.show-listmi-two-info{float:left;width:100%}
.show-listmi-two-info span{float:left;width:8%;color:#ddd}
.show-listmi-two-info font{float:left;width:80%;padding:0 2%;border-bottom:1px dashed #ddd;padding-bottom:6px}
.show-listmi-two-info font p{float:left;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.show-listmi-three{display:flex;align-items:center;float:left;width:100%;padding:0 10px;box-sizing:border-box;letter-spacing:1px}
.show-listmi-three span{float:left}
.show-listmi-three span i{margin-right:3px;color:red}
.show-listmi-three font{float:left;color:red;font-weight:700;margin-right:3px}
.show-listmi-three-fenlei{float:left;padding:2px 8px;border-radius:20px;margin:0 3px}
.show-listmi-three-fenlei i{margin-right:2px}
.show-listmi-three-buy{float:left;margin-left:3px}
.show-listmi-three-buy i{float:left}
.shopmi-buy{color:red!important}
.show-listmi-tag{position:absolute;right:-12px;bottom:22px;opacity:1;background:url(../assets/hot.svg) no-repeat;width:50px;height:50px;background-size:45px}
.show-lists{background:#fff;width:calc(690px / 2);height:115px;border-radius:8px;margin-bottom:20px;padding:10px 0;box-sizing:border-box;position:relative;display:block;border:2px solid #fff}
.show-lists:not(:nth-child(2n)){margin-right:calc(40px / 2)}
@media only screen and (max-width:768px){.show-lists{width:100%}
.show-lists:not(:nth-child(2n)){margin-right:calc(0px / 2)}
}
.show-lists:hover::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;border-radius:5px;cursor:pointer;background-size:200% 100%;background-position:-100% 0;opacity:1;animation:scanLine 2s infinite linear;transform:rotate(45deg)}
@keyframes scanLine{0%{background-position:-100% 0;opacity:.3;transform:rotate(0)}
50%{opacity:.1;transform:rotate(0)}
100%{background-position:100% 0;opacity:.3;transform:rotate(0)}
}
.show-lists-hang{float:left;width:100%;line-height:22px;padding:0 10px}
.show-lists-hang:nth-child(n+2){margin-top:12px}
.show-lists-icon{float:left;padding:1px 7px 1px 5px;border-radius:5px 0 0 5px}
.show-lists-hao{float:left;padding:0 5px;margin-left:-3px;letter-spacing:1px;border-radius:0 5px 5px 0;cursor:pointer}
.show-lists-liang{position:absolute;right:10px;top:7px}
@media only screen and (max-width:768px){.show-lists-liang{display:none}
}
.show-lists-pay{float:left;margin-right:5px;color:red}
.show-list-pay i{float:left}
.show-lists-money{float:left;color:red;font-weight:700;letter-spacing:1px}
.show-lists-jian{float:left;margin-left:5px}
.show-lists-fenlei{float:left;padding:0 8px;border-radius:22px;letter-spacing:1px;margin-right:8px}
.show-lists-fenlei i{margin-right:3px}
.show-lists-bao{float:left;margin-left:-2px}
.show-lists-bao i{float:left}
.pu-bj{color:#fff;background:#333}
.pu-wz{color:#333;background:#fff;border:1px solid #000}
.liang-bj{color:#fff;background:#fe5502}
.liang-wz{color:#fe5502;background:#fff;border:1px solid #fe5502}
.hj-bj{color:#000;background:#ffc600}
.hj-wz{color:#000;background:linear-gradient(135deg,#fff2c5 25%,#ffc600 75%);border:1px solid #ffc600}
.fenlei-blue{background:#e6efff;color:#337efe}
.fenlei-red{background:#ffe0e0;color:red}
.fenlei-orage{background:#fff1e0;color:#fb8b00}
.fenlei-green{background:#e2f7e1;color:#10bb0e}
.bao-blue{color:#337efe}
.bao-red{color:red}
.bao-orage{color:#fb8b00}
.bao-green{color:#10bb0e}
.bao-hj{color:#fff2c5}
.tui-hj{color:#ffc600}
/* =========================================================
    07. 页脚 / 版权 / 返回顶部
   ========================================================= */

.tui-pu{color:red}
.footer{position:fixed;bottom:0;width:750px;height:60px;z-index:1000;background:#fff;box-shadow:-8px 0 8px rgba(0,0,0,.18)}
.tab-bo{float:left;color:#787878;text-align:center;padding-bottom:5px}
.tab-bo i{width:24px;height:24px;display:block;margin:8px auto 0}
@media screen and (max-width:768px){.footer{width:100%;position:fixed;bottom:0;left:0}
}
.copy{float:left;width:100%;letter-spacing:1px;margin:20px 0;opacity:.68}
.copy-icp,.copy-year{display:flex;align-items:center;justify-content:center;color:#333}
.copy-icp{margin-top:3px}
.copy-icp i{margin-right:3px}
.copy-icp a{color:#333}
.top{display:none;position:fixed;bottom:12%;right:5%;cursor:pointer;z-index:9999}
.icon-top{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background-color:rgba(0,0,0,.5);color:#fff;font-size:24px;border-radius:50%}
/* =========================================================
    08. 字号与配色工具类
   ========================================================= */

.deth{float:left;width:100%;padding:20px 0}
.zt10{font-size:10px!important}
.zt12{font-size:12px!important}
.zt13{font-size:13px!important}
.zt14{font-size:14px!important}
.zt15{font-size:15px!important}
.zt16{font-size:16px!important}
.zt18{font-size:18px!important}
.zt20{font-size:20px!important}
.zt22{font-size:22px!important}
.zt24{font-size:24px!important}
.zt25{font-size:25px!important}
.zt26{font-size:26px!important}
.zt28{font-size:28px!important}
.zt30{font-size:30px!important}
.zt32{font-size:32px!important}
.zt40{font-size:40px!important}
/* =========================================================
    09. 个人主页卡片（profile card）
   ========================================================= */

.ztbc{font-weight:700!important}
.card{width:100%;margin:auto;overflow-y:auto;position:relative;z-index:1;overflow-x:hidden;background-color:#fff;display:-webkit-box;display:flex;-webkit-transition:.3s;transition:.3s;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;border-radius:8px;box-shadow:0 0 8px rgba(0,0,0,.25);letter-spacing:1px}
.card[data-state="#about"]{height:500px}
.card[data-state="#about"] .card-main{padding-top:0}
.card[data-state="#contact"]{height:750px}
.card[data-state="#experience"]{max-height:750px}
@media only screen and (max-width:768px){.card-erweima img{max-width:100%}
.card[data-state="#contact"]{height:570px}
.card[data-state="#experience"]{height:570px}
}
.card.is-active .card-header{height:80px}
.card.is-active .card-cover{height:100px;top:-50px}
.card.is-active .card-avatar{-webkit-transform:none;transform:none;left:20px;width:50px;height:50px;bottom:10px}
.card.is-active .card-fullname,.card.is-active .card-jobtitle{left:86px;-webkit-transform:none;transform:none}
.card.is-active .card-fullname{bottom:32px;font-size:22px}
.card.is-active .card-jobtitle{bottom:8px;font-size:16px}
.card-header{position:relative;display:-webkit-box;display:flex;height:200px;flex-shrink:0;width:100%;-webkit-transition:.3s;transition:.3s;margin-bottom:20px}
.card-header *{-webkit-transition:.3s;transition:.3s}
.card-cover{width:100%;height:100%;position:absolute;height:160px;top:-20%;left:0;will-change:top;background-size:cover;background-position:center;-webkit-filter:blur(30px);filter:blur(30px);-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-transition:.5s;transition:.5s}
.card-avatar{width:100px;height:100px;box-shadow:0 8px 8px rgba(0,0,0,.2);border-radius:50%;-o-object-position:center;object-position:center;-o-object-fit:cover;object-fit:cover;position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%) translateY(-64px);transform:translateX(-50%) translateY(-64px)}
.card-fullname{position:absolute;bottom:0;font-weight:700;text-align:center;white-space:nowrap;-webkit-transform:translateY(-10px) translateX(-50%);transform:translateY(-10px) translateX(-50%);left:50%}
.card-fullname font{float:left;font-size:22px}
.card-fullname span{float:left;background-size:cover;width:23px;height:23px;margin-top:4px;margin-left:3px}
.card-renzheng-gr{background:url(../assets/renzheng-gr.svg) no-repeat}
.card-renzheng-qy{background:url(../assets/renzheng-qy.svg) no-repeat}
.card-jobtitle{position:absolute;bottom:-12%;font-size:16px;white-space:nowrap;font-weight:500;opacity:.7;text-transform:uppercase;letter-spacing:1.5px;margin:0;left:50%;-webkit-transform:translateX(-50%) translateY(-7px);transform:translateX(-50%) translateY(-7px)}
.card-main{position:relative;-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}
.card-subtitle{font-weight:700;font-size:18px;margin-bottom:8px}
.card-content{padding:20px}
.card-desc{line-height:1.6;color:#636b6f;font-size:16px;margin:0}
.card-social{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:0 20px;margin-bottom:30px}
.card-social svg{fill:#a5b5ce;width:16px;display:block;-webkit-transition:.3s;transition:.3s}
.card-social a{color:#8797a1;height:32px;width:32px;border-radius:50%;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:.3s;transition:.3s;background-color:rgba(93,133,193,.05);border-radius:50%;margin-right:10px}
.card-social a:hover svg{fill:#637faa}
.card-social a:last-child{margin-right:0}
.card-buttons{display:-webkit-box;display:flex;background-color:#fff;margin-top:auto;position:-webkit-sticky;position:sticky;bottom:-1px;left:0}
.card-buttons button{-webkit-box-flex:1;flex:1 1 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0;font-size:15px;border:0;padding:15px 5px;cursor:pointer;color:#555;-webkit-transition:.3s;transition:.3s;font-weight:500;outline:0}
.card-buttons button:hover{background:#333;color:#fff}
.card-section{display:none}
.card-section.is-active{display:block;-webkit-animation:fadeIn .6s both;animation:fadeIn .6s both}
@-webkit-keyframes fadeIn{0%{opacity:0;-webkit-transform:translatey(40px);transform:translatey(40px)}
100%{opacity:1}
}
@keyframes fadeIn{0%{opacity:0;-webkit-transform:translatey(40px);transform:translatey(40px)}
100%{opacity:1}
}
.card-timeline{margin-top:30px;position:relative}
.card-timeline:after{content:"";left:60px;width:2px;top:0;height:100%;position:absolute;content:""}
.card-item{position:relative;padding-left:80px;padding-right:20px;padding-bottom:20px;z-index:1}
.card-item:last-child{padding-bottom:5px}
.card-item:after{content:attr(data-year);width:10px;position:absolute;top:10%;left:55px;width:8px;height:8px;line-height:.6;border:2px solid #fff;font-size:15px;text-indent:-50px;border-radius:50%}
.card-item-year{position:absolute;left:0;top:2px;font-size:15px;color:#6f6f7b;width:40px;text-align:right}
.card-item-month{position:absolute;left:0;top:22px;font-size:12px;color:#6f6f7b;width:40px;text-align:right}
.card-item-title{font-weight:700;font-size:18px;margin-bottom:5px}
.card-item-desc{font-size:16px;color:#6f6f7b;line-height:1.8;overflow:hidden}
/* =========================================================
    10. 交易流程向导（交易流程 3 步）
   ========================================================= */

.card-contact-wrapper{margin-top:20px}
.card-contact{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;font-size:18px;color:#666;line-height:34px;cursor:pointer;background:#f8f8f8;border-radius:6px}
.card-contact+.card-contact{margin-top:16px}
.card-contact i{font-size:20px;flex-shrink:0;width:30px;min-height:34px;margin-right:10px;-webkit-transition:.3s;transition:.3s;padding:0 0 0 10px;border-right:1px solid #dfe2ec}
.card-contact a{color:#666}
.card-erweima{width:100%;height:auto;background:#fff;margin-top:20px}
.card-erweima img{max-width:49%;text-align:center;border-radius:8px}
.card-erweima img:nth-child(1){margin-right:1%}
@media only screen and (max-width:768px){.card-erweima img{max-width:100%}
}
.card-step{margin-top:20px;position:relative}
.card-step:after{content:"";left:60px;width:2px;top:0;height:100%;position:absolute;content:""}
.wrapper{position:relative;width:100%;margin:0 auto;letter-spacing:1px}
.wizard{width:100%;margin:0 auto}
.wizard__header{position:relative;color:#fff;padding:50px;border-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0;text-align:center;min-height:30px;background:url(../assets/bj.jpg);background-color:#4d637b;background-position:center;background-repeat:no-repeat;background-size:cover}
.wizard__header-content{position:absolute;width:100%;height:100%;top:22%;left:0}
.wizard__header-overlay{position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(77,99,123,.6);border-top-left-radius:5px;border-top-right-radius:5px}
.wizard__title{font-size:20px;line-height:2.5rem;margin-top:1.2rem}
.wizard__subheading{font-size:18px;text-transform:uppercase;margin:0;letter-spacing:2px}
.wizard__subheading span{font-weight:700}
.wizard__steps{position:absolute;bottom:0;left:0;width:100%;transform:translateY(50%);z-index:10}
.wizard__footer{padding:15px 0 20px 20px;border-radius:8px}
.wizard__content{background:#fff;box-shadow:0 0 10px #c5c5c5;border-radius:5px}
.wizard__congrats-message{color:#6f6f7b;text-align:left;position:absolute;top:0;left:0;transform:translate(0,0);opacity:0}
.wizard.completed .wizard__content{animation:gettingOutRight 2s cubic-bezier(1,-.71,1,1.16) forwards}
.wizard.completed .wizard__congrats-message{animation:fadeInRight 2s cubic-bezier(1,-.71,1,1.16) forwards}
.line{position:absolute;top:0;left:50%;z-index:-1;height:4px;transition:all .5s ease}
.line.-start{left:0;width:50%}
.line.-end{left:50%;width:50%}
.line.-background{background:#c3c3c3;width:100%}
.line.-progress{width:100%;transform:scaleX(0);transform-origin:left center}
.line.-in-progress{transform:scaleX(1)}
.panels{position:relative;overflow:hidden;height:100vh;max-height:280px}
.panel{position:absolute;top:0;left:0;transition:.5s all;padding:20px 20px 0 20px}
.panel__header{margin-bottom:15px}
.panel__title{font-size:18px;line-height:2rem;font-weight:700}
.panel__subheading{font-size:16px;line-height:1.2rem;color:#6f6f7b}
.panel__content{font-size:16px;color:#6f6f7b}
.panel.movingOutBackward{transform:translateX(-750px)}
.panel.movingOutFoward{transform:translateX(750px)}
.panel.movingIn{transform:translateX(0)}
.steps{position:relative;display:flex;flex:0 1 auto;color:#fff}
.step{flex-basis:0;flex-grow:1;max-width:100%;box-sizing:border-box;text-align:center;border-radius:5px}
.step__content{position:relative;z-index:2}
.step.buyon .step__number{opacity:0}
.step.buyon .checkmark{z-index:0;animation:fill .4s ease-in-out forwards,scale .3s ease-in-out .6s both}
.step.buyon .checkmark__check{animation:stroke .5s linear .4s forwards}
.step.buyon .line{transform:scaleX(1)}
.step:last-child .line{width:50%}
.button{cursor:pointer;font-size:14px;line-height:1rem;color:#fff;padding:8px 15px;border:none;border-radius:5px;outline:0;display:inline-block;transition:all .3s}
.button:hover{opacity:.8}
.button.previous{margin-right:5px}
.button.disabled{background:#c3c3c3;cursor:default}
@keyframes stroke{to{stroke-dashoffset:0}
}
@keyframes scale{50%{transform:translateX(-50%) scale3d(1.5,1.5,1.5)}
100%{transform:scale3d(0)}
}
@keyframes fill{100%{box-shadow:inset 0 0 0 30px #75b2f5}
}
@keyframes gettingOutRight{0%{transform:translateX(0)}
30%{transform:translateX(100px)}
100%{transform:translateX(-200%)}
}
@keyframes fadeInRight{100%{opacity:1}
}

/* =========================================================
    11. 复刻版补充样式（轮播 / 向导 / 提示条 / 复制反馈）
   ========================================================= */
/* 轮播：容器必须形成层叠上下文，否则幻灯片上的 z-index 会“溢出去”，
   把箭头和右上角「广告」角标盖在下面（这是之前箭头看不见的原因）。 */
.banner-box{position:relative;z-index:1;}
.banner-box a{position:absolute;top:0;left:0;width:100%;height:100%;display:block;
  transition:transform .5s ease,opacity .5s ease;will-change:transform;}
.banner-box a img{width:100%;height:100%;object-fit:fill;display:block;}
/* 箭头 & 圆点留在幻灯片之上 */
.banner-prev,.banner-next{user-select:none;transform:translateY(-50%);top:50%!important;z-index:6;}
.banner-points{z-index:6;}
/* 「广告」角标是 .banner-box 的兄弟节点，抬到容器之上 */
.banner-ad{z-index:2;}

/* 长域名（如 dangdong.com.cn）：放宽名字区域，避免被省略号截断 */
.show-listmi-one-mi.is-long{width:68%;}

/* 卡片网格用 flex 的 column-gap 排间距。
   原站用的是 :nth-child(3n) 去掉右外边距，一旦同一个容器里
   混排了米卡和靓号（猜你喜欢就是 4 张米卡 + N 张靓号），
   nth-child 会按“容器里的第几个”来算，导致某一列少一个间距、整体错位。 */
.show-list-container{column-gap:20px;}
.show-list-container .show-list,
.show-list-container .show-listmi,
.show-list-container .show-lists{margin-right:0;}
@media only screen and (max-width:768px){
  .show-list-container .show-list,
  .show-list-container .show-listmi{margin-right:0;}
}
.panel{position:absolute;top:0;left:0;width:100%;box-sizing:border-box;
  opacity:0;transition:transform .5s ease,opacity .5s ease;will-change:transform;}
.panel.is-active{opacity:1;}
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  background:rgba(0,0,0,.78);color:#fff;font-size:16px;letter-spacing:1px;
  padding:12px 22px;border-radius:8px;z-index:99999;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  font-family:-apple-system,'Microsoft YaHei',sans-serif;}
.toast.is-show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.show-list-hao{user-select:none;}
.wizard.completed .wizard__footer .button.next{background:#c3c3c3;cursor:default;}

/* ---------- 11.1 底部导航兜底 ----------
   面板 1~4 在 HTML 里自带 display:none。
   JS 正常时由 changeTab() 改写内联样式；
   如果脚本没加载/被拦截，点击链接会改变地址栏 hash，
   这里用 :target 让对应面板照样显示出来，导航不会“点了没反应”。 */
#tabContent1:target,
#tabContent2:target,
#tabContent3:target,
#tabContent4:target{display:flex!important;}
.content:has(#tabContent1:target) #tabContent0,
.content:has(#tabContent2:target) #tabContent0,
.content:has(#tabContent3:target) #tabContent0,
.content:has(#tabContent4:target) #tabContent0{display:none!important;}