body{background:#F5F7FA;font-size:15px;overflow-x:hidden;overflow-y:auto;}
html,body{width:100%;min-width:1280px;}
/*html{filter:grayscale(100%);}*/

/*脙茠脝鈥櫭冣€毭偮ッ兤捗偮⒚兟⒚⑩偓拧脗卢脙鈥毭偮γ兤捗⑩偓拧脙鈥毭偮兤捗嗏€櫭冣€毭偮ッ兤捗偮⒚兟⒚⑩偓拧脗卢脙鈥毭偮γ兤捗⑩偓拧脙鈥毭偮泵兤捗嗏€櫭冣€毭偮┟兤捗⑩偓聽脙垄芒鈥毬⑩€灺⒚兤捗⑩偓拧脙鈥毭偮兤捗嗏€櫭冣€毭偮ッ兤捗⑩偓鹿脙垄芒鈥毬偮犆兤捗偮⒚兟⒚⑩偓拧脗卢脙鈥毭偮�*/
.ui-backtop{display:none;}
.ui-sidebar{z-index:10 !important;}
.ui-filter{background:none;box-shadow:none;margin:0;border:0;}
.ui-filter .ui-row{padding-bottom:10px;}
.ui-filter .ui-row .ui-filter-left{font-size:15px;width:100px;color:#1b2337;text-align:left;}
.ui-filter .ui-row .ui-filter-left span{/* background:#7F7F8C; */padding:8px 15px;border-radius:25px 0 25px 25px;color: #787878;font-size:14px;}
.ui-filter .ui-row .ui-filter-right{flex:1;overflow:hidden;font-size:0;border-bottom:1px solid #eee;padding-bottom:5px;margin-bottom:5px;}
.ui-filter .ui-row .ui-filter-right a{color:#505a71;border:0;font-size:14px;border:1px solid transparent;padding:6px 12px;}
.ui-filter .ui-row .ui-filter-right a:hover{color:#296bef;background:#FFFCFB;border:1px solid #FFE9E3;border-radius:18px;}
.ui-filter .ui-row .ui-filter-right a.active{color: var(--el-color-white);background: var(--vd-primary);border: 1px solid var(--vd-primary);border-radius:18px;}
pre{background:#F4F8FF;border:1px solid #e0eaff;padding:15px 20px;border-radius:4px;line-height:1.5;margin:0;color:#666;position:relative;margin:20px 0;}
.ui-comment-emoji{display:flex;flex-wrap:wrap;width:100%;max-width:100%;max-height:200px;overflow-x:hidden;overflow-y:auto;padding:10px;}
.ui-comment-emoji div{width:40px;height:40px;line-height:40px;font-size:24px;border:1px solid #fff;display:block;text-align:center;border-radius:4px;cursor:pointer;font-family:'Segoe UI Emoji';}
.ui-comment-emoji div:hover{border-color:#eaeaea;}

.nogoods{font-size:16px;text-align:center;font-weight:400;color:#333;margin-top:100px;}
.nogoods p{padding:0;margin:0 0 20px 0;}
.nogoods span{display:inline-block;font-size:70px;color:#ddd;}
.nogoods a{display:inline-block;width:160px;line-height:50px;text-align:center;font-size:16px;background:#fff;color:#296bef;border:1px solid #296bef;border-radius:2px;transition:color .15s ease 0s;position:relative;z-index:1}
.nogoods a:before{position:absolute;top:-1px;left:-1px;width:0;height:52px;background:#296bef;border-radius:2px;content:"";transition-delay:0s;transition:width .15s ease 0s;z-index:-1}
.nogoods a:hover{color:#fff}
.nogoods a:hover:before{width:101%}

.ui-payway{display:flex;flex-wrap:wrap;}
.ui-payway-item{flex:0 0 48.5%;max-width:48.5%;display:flex;align-items:center;justify-content:center;margin:1.5% 0;padding:15px 0;border:.8px solid #e1e6f0;color:#a1abc2;border-radius:4px;text-align:center;position:relative;cursor:pointer;font-size:16px;}
.ui-payway-item:nth-child(odd){margin-right:1.5%;}
.ui-payway-item:nth-child(even){margin-left:1.5%;}
.ui-payway-item img{height:40px;}
.ui-payway-item i{font-size:24px;margin-right:10px;color:#fff;background:#999;display:inline-block;width:40px;height:40px;line-height:40px;border-radius:50%;}
.ui-payway-item span{position:absolute;right:1px;bottom:0px;color:#fff;z-index:20;font-size:12px;display:none;}
.ui-payway-item.blue i{background:#1890FF}
.ui-payway-item.green i{background:#19BE6B}
.ui-payway-item.red i{background:#296bef}
.ui-payway-item.active{border-color:#296bef;}
.ui-payway-item.active:before{position:absolute;content:"";right:0;bottom:0;color:#296bef;width:0;height:0;border-bottom:30px solid #296bef;border-left:30px solid transparent;z-index:10;}
.ui-payway-item.active span{display:block;}
.ui-payway.one .ui-payway-item{flex:0 0 100%;max-width:100%;margin:0;margin-bottom:20px;padding:10px 0}
.ui-payway.one .ui-payway-item:last-child{margin-bottom:0;}

.ui-order{padding:20px;background:#fff;margin:20px auto;}
.ui-order .title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f3f3f3;padding-bottom:15px;}
.ui-order .title .desc span{color:#999;}
.ui-order .title .price span{color:#296bef;font-size:24px;}
.ui-order .qrcode{padding:15px 0;text-align:center;margin:50px 0;}
.ui-order .tips{text-align:center;background:#FAFBFD;border:1px solid #EEEFF1;line-height:46px;border-radius:4px;}


/*脙茠脝鈥櫭冣€毭偮っ兤捗⑩偓拧脙鈥毭偮济兤捗⑩偓鹿脙鈥γ⑩偓艙脙茠脝鈥櫭冣€毭偮γ兤捗⑩偓聽脙垄芒鈥毬⑩€灺⒚兤捗⑩偓拧脙鈥毭偮犆兤捗嗏€櫭冣€毭偮ッ兤捗⑩偓鹿脙垄芒鈥毬偮犆兤捗⑩偓拧脙鈥毭偮�*/
.coupon{margin:40px auto;}
.coupon-wrap{display:flex;flex-wrap:wrap;margin:0 0 0 -2%;}
.coupon-item{width:48%;margin:0 0 2.5% 2%;display:flex;flex-wrap:wrap;transition:all .5s;position:relative;}
.coupon-item:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-radius:10px;}
.coupon-left{width:32%;border:1px solid #FFE2E4;border-radius:10px;background:#FFF9F9;position:relative;padding:20px 20px 30px 20px;}
.coupon-left:before{content:"";position:absolute;display:block;width:20px;height:10px;border-radius:0 0 10px 10px;background:#fff;border:1px solid #FFE2E4;border-top-color:#fff;right:-10px;top:-1px;z-index:20}
.coupon-left:after{content:"";position:absolute;display:block;width:20px;height:10px;border-radius:10px 10px 0 0;background:#fff;border:1px solid #FFE2E4;border-bottom-color:#fff;right:-10px;bottom:-1px;z-index:20;box-shadow:rgba(255,255,255,1) 0px 3px 5px 0px}
.coupon-left .head{font-size:36px;color:#296bef;font-weight:500;text-align:center;}
.coupon-left .head span{color:#999;font-size:14px;font-weight:normal;margin-left:5px;}
.coupon-left .foot{color:#999;text-align:center;font-size:14px;}
.coupon-left .foot span{color:#2469F6;margin:0 5px;}
.coupon-right{width:68%;border:1px solid #FFE2E4;border-left:0;border-radius:10px;background:#fff;display:flex;align-items:center;padding:0 25px 0 30px;justify-content:space-between;}
.coupon-right .body{font-size:18px;color:#333;font-weight:bold;}
.coupon-right .body p{font-size:15px;padding-top:5px;color:#999;font-weight:normal;}
.coupon-right .body p span{color:#296bef;margin-right:5px;}
.coupon-right .action a{display:block;padding:10px 20px;border:1px solid #eaeaea;border-radius:30px;font-size:15px;color:#999;}
.coupon-right .action a:hover{border-color:#296bef;color:#296bef;}

/*VIP脙茠脝鈥櫭冣€毭偮兤捗⑩偓拧脙鈥毭偮泵兤捗⑩偓拧脙鈥毭偮幻兤捗嗏€櫭冣€毭偮ッ兤捗⑩偓娄脙鈥毭偮久兤捗偮⒚兟⒚⑩偓拧脗卢脙鈥毭偮�*/
.vip-list{display:flex;flex-wrap:wrap;margin:30px 0 0 -3%;}
.vip-list-item{width:47%;margin:0 0 3% 3%;padding:25px;background:#fff;border-radius:6px;border:.8px solid #e1e6f0;color:#a1abc2;position:relative;overflow:hidden;cursor:pointer;}
.vip-list-item:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);}
.vip-list-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}
.vip-list-item .left{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;}
.vip-list-item .icon{background:#a1abc2;width:55px;height:55px;line-height:50px;border-radius:50%;text-align:center;margin-right:15px;}
.vip-list-item .icon i{font-size:30px;color:#fff;}
.vip-list-item h3{color:#333;font-size:18px;font-weight:bold;color:#262d3d;}
.vip-list-item .price{font-size:20px;color:#296bef;}
.vip-list-item .price span{font-size:14px;color:#999;margin-left:5px;}
.vip-list-item .ischeck{position:absolute;right:3px;bottom:0px;color:#fff;z-index:20;font-size:24px;display:block;}
.vip-list-item.active{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#ddd}
.vip-list-item.active:after{position:absolute;content:"";right:0;bottom:0;color:#296bef;width:0;height:0;border-bottom:50px solid #296bef;border-left:50px solid transparent;z-index:10;}
.vip-list-item.active .ischeck{display:block;}
.vip-list-item.active .icon{background:#296bef;}
.vip-list-item.disabled{cursor:not-allowed;opacity:0.4}
.vip-list-item.disabled:after{position:absolute;content:"";right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.1);}
.vip-list-item.disabled .ischeck{display:none;}
.vip-list-item.disabled:hover{box-shadow:none;}

/*脙茠脝鈥櫭冣€毭偮兤捗⑩偓拧脙鈥毭偮兤捗偮⒚兟⒚⑩偓拧脗卢脙鈥γ偮久兤捗嗏€櫭冣€毭偮兤捗⑩偓拧脙鈥毭偮兤捗⑩偓拧脙鈥毭偮�*/
.comment-post{display:flex;justify-content:space-between;flex-wrap:wrap;margin:30px 0;}
.comment-post-face{width:70px;padding-right:10px;}
.comment-post-face img{width:50px;height:50px;border-radius:50%;}
.comment-post-body{flex:1;border:3px solid #f0f0f0;}
.comment-post-body-wrap{display:flex;justify-content:space-between;}
.comment-post-body-area{flex:1;padding:15px;}
.comment-post-body-area textarea{border:0;width:100%;resize:none;min-height:60px;}
.comment-post-action{border-top:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;padding:15px;}
.comment-post-action-name{font-weight:bold;}
.comment-post-action-name i{margin-left:10px;font-weight:normal;}
.comment-post-login{width:100px;background:#296bef;color:#fff;margin:-2px;text-align:center;z-index:999;display:flex;align-items:center;}
.comment-post-login a{display:block;margin:0 auto;font-size:18px;color:#fff;}

.subject{text-align:center;}
.subject h2{font-size:24px;color:#0c0c0c;margin:30px 0;position:relative;padding-bottom:18px;margin-bottom:24px;}
.subject h2:after{content:'';display:inline-block;position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:6px;width:40px;background:#296bef;border-radius:3px}

.subject.green h2:after{background:#00B75B;}
.subject.blue h2:after{background:#2128D8;}
.subject.yellow h2:after{background:#FE4105;}

.plan-a{margin-left:1px;font-size:0;vertical-align:middle;display:flex;margin:40px auto;}
.plan-a-item{vertical-align:middle;border:1px solid #e8e8e8;margin-left:-1px;display:inline-block;justify-content:center;align-items:center;padding:50px 20px;overflow:hidden;background:#fff;text-align:center;font-size:15px;flex:1;}
.plan-a-item:hover{color:#333;border-color:#296bef;position:relative;z-index:2;}
.plan-a-item i{font-size:64px;color:#296bef}
.plan-a-item h4{font-size:22px;margin-top:20px;}
.plan-a-item p{line-height:30px;color:#a1abc2;font-size:13px;}
.plan-b{margin-top:-41px;}

.plan-a.green .plan-a-item:hover{border-color:#00B75B;}
.plan-a.green .plan-a-item i{color:#00B75B;}
.plan-b.green .plan-b-item:hover{border-color:#00B75B;}
.plan-b.green .plan-b-item i{color:#00B75B;}

.plan-a.blue .plan-a-item:hover{border-color:#2128D8;}
.plan-a.blue .plan-a-item i{color:#2128D8;}
.plan-b.blue .plan-b-item:hover{border-color:#2128D8;}
.plan-b.blue .plan-b-item i{color:#2128D8;}

.intro-wrap{display:flex;flex-wrap:wrap;align-items:center;margin:30px auto;}
.intro-item{width:50%;padding:0 30px;}
.intro-item:first-child{padding-right:30px;}
.intro-item:last-child{padding-left:30px;}
.intro-item img{max-width:100%;}
.intro-list{list-style:none;}
.intro-list li{background:#fff;border-bottom:1px solid #eaeaea;margin-bottom:15px;padding-bottom:15px;}
.intro-list li h3{font-size:20px;font-weight:bold;}
.intro-list li p{line-height:40px;font-size:16px;}

.cms-version tr td{border-right:1px solid #EBF2FF;position:relative;}
.cms-version tr td:first-child{text-align:left !important;}
.cms-version tr td:first-child i{position:absolute;right:15px;color:#ddd;}

.our_list{display:flex;flex-wrap:wrap;margin:10px 0;}
.our_list .item{flex:0 0 33.333333%;max-width:33.333333%;}
.our_list .item_body{margin:20px;padding:18px 20px;display:flex;align-items:center;box-shadow:0px 2px 32px 0px rgba(0,0,0,0.1);border-radius:10px;transition:all 0.36s ease;background:#fff;}
.our_list .item_body .image{width:46px;line-height:42px;height:46px;background:#ccc;border-radius:50%;text-align:center;}
.our_list .item_body .image i{color:#fff;font-size:24px;}
.our_list .item_body .text{margin-left:20px;}
.our_list .item_body .text h4{font-size:18px;}
.our_list .item_body .text span{font-size:14px;color:#999;font-family:Verdana, Geneva, sans-serif;}
.our_list .item_body:hover{transform:translateY(-10px);box-shadow:0px 2px 32px 0px rgba(0,0,0,0.2);}
.our_list .item_body .bg01{background:#008AFF;}
.our_list .item_body .bg02{background:#F25767;}
.our_list .item_body .bg03{background:#5CC9A7;}
.our_list .item_body .bg04{background:#50B5FF;}
.our_list .item_body .bg05{background:#FFBE3D;}
.our_list .item_body .bg06{background:#6965EB;}
.our_list .item_body .bg07{background:#FE4505;}
.our_list .item_body .bg08{background:#FE9505;}
.our_list .item_body .bg09{background:#4A70FF;}
.our_list .item_body .bg10{background:#FF6F3D;}
.our_list .item_body .bg11{background:#8D8AFF;}
.our_list .item_body .bg12{background:#FF6D7C;}


.width{width:100%;min-width:1280px;max-width:1440px;margin:0 auto;}

.header-wrap{background:#fff;min-width:1280px;/* height:60px; */border-bottom:.8px solid #e1e6f0;box-shadow:0px 4px 16px 0px rgba(0,60,179,0.1);position:sticky;top:0;z-index:999;}
.header{display:flex;justify-content:space-between;}
.header-left,.header-right{display:flex;align-items:center;}
.logo{padding:0 20px;}
.logo img{height:40px;}
.nav{margin:0;height:60px;}
.nav ul{list-style:none;display:flex;}
.nav ul li{position:relative;}
.nav ul li a{line-height:60px;padding:0 12px;font-size:16px;color:#545c63;display:block;}
.nav ul li:hover:after{width:75%;}
.nav ul li:after{width:0;height:2px;content:'';transition:0.3s;position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#296bef;}
.nav ul li a:hover{color:#296bef;}
.nav ul li.active:after{width:75%;}
.nav ul li.active a{color:#296bef;}

.nav ul li ul{flex-wrap:wrap;}
.nav ul li ul li{width:100%;border-bottom:1px solid #f3f3f3;}
.nav ul li ul li a{color:#333 !important;font-size:14px;}
.nav ul li ul li a:hover{background:#fff;color:#296bef !important;}
.nav ul li ul li:hover:after{display:none;}

.toplink{margin-right:10px;line-height:60px;height:60px;}
.toplink a{display:inline-block;font-size:16px;}
.toplink a i{color:#fff;margin-right:3px;}

.nologin{line-height:60px;height:60px;}
.nologin a{display:inline-block;padding:0 20px;font-size:16px;}
.nologin a.active{background:#296bef;color:#fff;height:60px;line-height:60px;}
.islogin{line-height:60px;padding-right:10px;}
.islogin .account{display:inline-block;position:relative;}
.islogin .account a{}
.islogin .account a img{width:40px;height:40px;border-radius:50%;border:1px solid #f3f3f3;padding:2px;margin-right:4px;}
.islogin .account a i{font-size:14px;color:#999;}
.islogin .account .panel{position:absolute;top:60px;right:0px;background:#fff;width:260px;z-index:9999;box-shadow:0 0 10px 1px rgba(0,0,0,.1);border:1px solid #f3f3f3;display:none;}
.islogin .account .panel-header{border-bottom:1px solid #F5F5F5;padding:15px 20px;display:flex;align-items:center;/*background:linear-gradient(180deg,#F5F7FA 1%,#fff 90%);*/}
.islogin .account .panel-header .face{margin-right:15px;}
.islogin .account .panel-header .face img{width:50px;height:50px;border-radius:50%;}
.islogin .account .panel-header .info{line-height:20px;}
.islogin .account .panel-header .info span{color:#999;display:block;}
.islogin .account .panel-list{list-style:none;}
.islogin .account .panel-list li{line-height:50px;}
.islogin .account .panel-list li a{padding:0 20px;display:block;color:#666;}
.islogin .account .panel-list li a:hover{background:#fafafa;}
.islogin .account .panel-list li a i{margin:0 15px;color:#666;font-size:22px;}
.islogin .account .panel-list li a span{float:right;color:#296bef;border:1px solid #FFE9E3;background:#FFFCFB;padding:4px 6px;display:inline-block;line-height:16px;margin-top:14px;border-radius:4px;font-size:12px;}
.islogin .account .panel-list li.border{border-top:1px solid #f5f5f5;}
.islogin .account:hover .panel{display:block;}



.banner{/* margin-top:30px; */background:#fff;border-radius:10px;}
.banner-act{border-radius:10px 10px 0 0;overflow:hidden;}
.banner-header{display:flex;overflow:hidden;}
.banner-left{width: 320px;max-width:320px;background:#39364D;border-radius: 10px 0 0 0;color:#fff;/*display:flex;align-items:center;*/}
.banner-left div{display:block;background:linear-gradient(90deg,#FF575C 1%,#FF7B2B 90%);color:#fff;padding:15px 15px 15px 40px;/* margin-top:20px; */margin-left:-10px;position:relative;font-weight:bold;font-size:18px;}
.banner-left div:after{content:"";position:absolute;top:100%;left:0;width:5px;height:5px;color:#fff;border:5px solid transparent;border-right-color:#DB1D2C;border-top-color:#DB1D2C;}
.banner-left ul{margin-top:15px;list-style:none;width:100%;}
.banner-left ul li{}
.banner-left ul li a{color:#fff;font-size:15px;display:block;padding:6px 15px 6px 25px;line-height:40px;vertical-align:middle}
.banner-left ul li a:hover{background:#4D4A5F;}


.banner-left ul li a i{margin-right:15px;vertical-align:middle;font-size:28px;color:#9E9AB5}
.banner-zhongjian{flex:1;min-width:680px;/* overflow:hidden; */border-radius:0 10px 0 0;height: 400px;}
.banner-zhongjian img{height:420px;}


.banner-right{width: 320px;max-width:320px;background: #302e2e;border-radius: 0 10px 0 0;color:#fff;/*display:flex;align-items:center;*/}
.banner-right div{display:block;background: linear-gradient(90deg, #0F5EFF 1%, #0F5EFF 90%);color:#fff;padding: 15px 15px 15px 40px;/* margin-top:20px; */margin-right: -10px;/* position: relative; */font-weight:bold;font-size:18px;}
.banner-right div:after{content:"";position:absolute;top:100%;left:0;width:5px;height:5px;color:#fff;border:5px solid transparent;/* border-right-color:#DB1D2C; *//* border-top-color:#DB1D2C; */}
.banner-right ul{margin-top:15px;list-style:none;width:100%;}
.banner-right ul li{}
.banner-right ul li a{color:#fff;font-size:15px;display:block;padding:6px 15px 6px 25px;line-height:40px;vertical-align:middle}
.banner-right ul li a:hover{background:#4D4A5F;}
.banner-right ul li a i{margin-right:15px;vertical-align:middle;font-size:28px;color:#9E9AB5}

.banner-footer{display:flex;background:#fff;padding:15px 20px;border-radius:0 0 10px 10px;box-shadow:0 5px 20px 0 rgba(0,0,0,0.1);align-items:center;justify-content:space-between;}
.banner-footer .notice{display:flex;align-items:center;overflow:hidden;height:40px;}
.banner-footer .notice ul{overflow:hidden;height:50px;}
.banner-footer .search{text-align:right;position:relative;}
.banner-footer .search input,.banner-footer .search button{vertical-align:middle;}
.banner-footer .search input{border:1px solid #eaeaea;height:40px;line-height:36px;padding:0 20px;width:240px;border-radius:20px;}
.banner-footer .search button{border:0;height:36px;line-height:30px;width:36px;background: #0F5EFF;color:#fff;border-radius:50%;position:absolute;right:2px;top:2px;}

.banner .ui-carousel-prev,.ui-carousel-next{width:90px;}
.banner .ui-carousel-page{bottom:25px;}
.banner .ui-carousel-page li{height:12px;width:12px;border-radius:12px;transition:all 1s}
.banner .ui-carousel-page li.active{width:40px;}

.home-wrap{display:flex;align-items:center;justify-content:space-between;}
.home-subject{display:inline-block;font-size:24px;font-weight:bold;}
.home-nav{display:inline-block;margin-left:20px;text-align:right;}
.home-nav a{border:1px solid #dbdee0;color:#8f8f8f;background:#fff;padding:8px 14px;display:inline-block;margin-left:10px;border-radius:4px;}
.home-nav a.active,.home-nav a:hover{border-color:#296bef;background:#296bef;color:#fff;}

.temp-list{margin:0;min-height:300px;}
.temp-list-wrap{margin:0 -14px;display:flex;flex-wrap:wrap;padding:5px 0;}
.temp-list-item{width:25%;padding:0 14px;margin-bottom:28px;position:relative;}
.temp-list-item .ui-ring{right:12px;}
.temp-list-item .ui-ring.left{left:10px;}

.temp-list-box{background:#fff;border-radius:8px;border:0.8px solid transparent;}
.temp-list-box:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.temp-list-box .item-image{position:relative;overflow:hidden;padding-bottom:56.2%;background:#F8FBFF;border-radius:8px 8px 0 0;}
.temp-list-box .item-image img{width:100%;min-height:100%;height:auto;position:absolute;z-index:1;/*object-fit:cover;*/border-radius:8px 8px 0 0;}
.temp-list-box .item-image svg{width:100%;height:100%;text-anchor:middle;border-radius:8px 8px 0 0;font-size:20px;position:absolute;}
.temp-list-box .item-text{padding:20px 20px;}
.temp-list-box .item-text a{font-size:18px;font-weight:bold;line-height:40px;height:50px;display:block;}
.temp-list-box .item-text p{color:#a1abc2;line-height:24px;height:50px;font-size:14px;overflow:hidden;}
.temp-list-box .item-footer{padding:0 20px 20px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 8px 8px;min-height:55px;}
.temp-list-box .item-footer .user{vertical-align:middle;}
.temp-list-box .item-footer .user a{color:#b5b5b5;}
.temp-list-box .item-footer .user a:hover{color:#296bef;}
.temp-list-box .item-footer .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.temp-list-box .item-footer .info{text-align:right;}
.temp-list-box .item-footer .info em{border:1px solid #296bef;color:#296bef;padding:6px;font-size:14px;border-radius:4px;background:#fff;}
.temp-list-box .item-footer .price{color:#296bef;font-size:16px;}
.temp-list-box .item-footer .price del{color:#999;font-size:12px;margin-left:5px;}
.temp-list-box .item-footer .price span{color:#999;font-size:15px;margin-left:5px;}

.pro-list .temp-list-box .item-image{padding-bottom:100%;}
.service .temp-list-box .item-image{padding-bottom:56.2%;}

.plug_list{display:flex;flex-wrap:wrap;margin:0 -14px;}
.plug_list_item{width:33.33%;margin:0 0 28px 0;position:relative;padding:0 14px;}
.plug_list_item_body{background:#fff;padding:15px 20px;border:0.8px solid #f3f3f3;border-radius:8px;}
.plug_list_item_body:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.plug_list_item .ui-ring{right:10px;}
.plug_list_wrap{display:flex;flex-wrap:wrap;padding:10px 10px 10px 0;}
.plug_list_icon{width:66px;height:66px;margin-right:20px;}
.plug_list_icon img{width:100%;height:100%;border-radius:5px;border:1px solid #eaeaea;padding:3px;}
.plug_list_body{flex:1;overflow:hidden;}
.plug_list_body .name{font-size:16px;font-weight:bold;padding-top:5px;}
.plug_list_body .intro{font-size:14px;line-height:24px;margin-top:8px;color:#a1abc2;}
.plug_list_foot{border-top:1px solid #f3f3f3;margin-top:10px;padding-top:15px;display:flex;justify-content:space-between;align-items:center}
.plug_list_foot .price{color:#296bef;font-size:14px;}
.plug_list_foot .free{color:#999;font-size:14px;}
.plug_list_foot .user{vertical-align:middle;}
.plug_list_foot .user a{color:#b5b5b5;}
.plug_list_foot .user a:hover{color:#296bef;}
.plug_list_foot .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}

.link{padding:10px 0;}
.link a{display:inline-block;margin:10px 8px 0 0;border:1px solid #f3f3f3;padding:10px 15px;border-radius:4px;font-size:15px;color:#666;}
.link a:hover{border-color:#2469F6;color:#2469F6;}

.position-relative{position:relative;margin-top:30px;}
.shape{position:absolute;pointer-events:none;right:0;bottom:-2px;left:0;overflow:hidden;}
.shape svg{transform:scale(2);width:100%;height:34px;transform-origin:top center;vertical-align:middle;color:#202942;background:#fff}
.footer{min-height:30px;background:#202942;color:#adb5bd;padding:5px 0 5px 0;position:relative;}
.copyright{border-top:0px solid #283353;padding:15px 0;}
.copyright-body{max-width:96%;margin:0 auto;color:#fff;display:flex;justify-content:space-between;padding:0;}
.copyright-body div,.copyright-body div a{color:#adb5bd;}
.copyright-body div a:hover{color:#fff;}

.page_single{display:flex;margin:30px 0;box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-radius:10px;}
.page_single_left{width:250px;background:#39364D;border-radius:10px 0 0 10px;min-height:700px;}

.page_nav ul{margin:30px 0;list-style:none;}
.page_nav ul li{line-height:60px;padding-left:44px;border-bottom:1px solid #222031;position:relative;}
.page_nav ul li:after{position:absolute;content:'';display:block;width:100%;height:1px;background:#46425E;left:0;bottom:-2px;}
.page_nav ul li a{font-size:16px;color:#fff;}
.page_nav ul li.active{background:linear-gradient(90deg,#FFF7F4 1%,#fff 90%);border-left:4px solid #296bef;margin-left:-10px;border-bottom:0;}
.page_nav ul li.active:after{display:none;}
.page_nav ul li.active a{color:#296bef;}

.ucenter{background:#F7F6FC url('../images/active.jpg') no-repeat center;background-size:cover;height:220px;padding:20px 0;}
.u-header{display:flex;align-items:center;justify-content:space-between;}

.user-info{display:flex;align-items:center;justify-content:space-between;padding:30px 0 0 0;}
.user-info .face{width:120px;}
.user-info .face img{width:100%;height:100%;border-radius:50%;border:3px solid rgba(255,255,255,0.8)}
.user-info .name{color:#fff;font-size:28px;font-weight:bold;margin-left:30px;}
.user-info .name div{font-size:16px;font-weight:normal;line-height:40px;}
.user-info-data{display:flex;align-items:center;padding-top:30px;min-width:450px;}
.user-info-data .item{/*width:33.33%;*/position:relative;text-align:center;padding:0 40px;}
.user-info-data .item:after{content:'';position:absolute;display:block;right:0;top:0;width:1px;height:60%;background:rgba(255,255,255,0.2);transform:translateY(40%);}
.user-info-data .item:last-child:after{display:none;}
.user-info-data .item .info{font-size:16px;color:#fff;line-height:40px;}
.user-info-data .item .num{font-size:30px;color:#fff;}

.user_nav{padding:0 20px;margin-top:20px;}
.user_nav .ui-fold ul{padding:0;}
.user_nav .ui-fold ul>li{border-bottom:0;}
.user_nav .ui-fold ul>li>a{color:#B1AEC2;font-size:16px;display:block;padding-left:30px;}
.user_nav .ui-fold ul li>i{right:5px;}
.user_nav .ui-fold ul li.active{color:#fff;}
.user_nav .ui-fold ul li.active>a{color:#fff;background:#29263A;border-radius:10px 10px 0 0}
.user_nav .ui-fold ul li ul{background:#29263A;padding:0 0 10px 0;border-radius:0 0 10px 10px;padding-bottom:10px;border-top:0;}
.user_nav .ui-fold ul li ul.show{display:block;}
.user_nav .ui-fold ul li ul li{line-height:45px;padding-left:20px;border-radius:0;}
.user_nav .ui-fold ul li ul li a{font-size:14px;}
.user_nav .ui-fold ul li ul li{border:0;line-height:45px;padding:0;}
.user_nav .ui-fold ul li ul li a i{font-size:20px;margin-right:10px;}
.user_nav .ui-fold ul li ul li a{color:#908BB5;padding:0 0 0 40px;display:block;font-size:14px;}
.user_nav .ui-fold ul li ul li a:hover{color:rgba(255,255,255,0.8);}
.user_nav .ui-fold ul li ul li.active a{color:rgba(255,255,255,0.8);}

.page_single_right{flex:1;overflow:hidden;background:#fff;border-radius:0 10px 10px 0;padding:40px 64px;}
.page_title{font-size:24px;color:#000;margin-bottom:10px;border-bottom:1px solid #eee;padding-bottom:20px;position:relative;}
.page_title:after{content:'';display:block;bottom:0;width:100px;height:2px;background:#296bef;position:absolute;}
.page_title a{position:absolute;right:0;top:15px;font-size:15px;color:#296bef;}
.page_content{min-height:100px;margin-top:30px;}
.page_content *{max-width:100%;}
.page_content>p{margin-bottom:15px;font-size:16px;line-height:34px;}
.page_content>h1{font-size:28px;line-height:normal;border-bottom:1px solid #e9e9e9;margin:0 0 20px 0;padding-bottom:20px;}
.page_content>h2{font-size:24px;line-height:normal;border-bottom:1px solid #e9e9e9;margin:0 0 20px 0;padding-bottom:20px;}
.page_content>h3{font-size:20px;line-height:normal;border-bottom:1px solid #e9e9e9;margin:0 0 20px 00;padding-bottom:20px;}
.page_content>h4{font-size:16px;line-height:normal;}

.page_contact{font-family:verdana;color:#666;}
.page_contact h1{color:#262d3d;margin:30px 0 -10px 0;font-size:26px;}
.contact{margin-top:50px;display:flex;flex-wrap:wrap;padding:5px 0;}
.contact-item{width:50%;margin-bottom:40px;}
.contact-item .wrap{padding:35px 45px;background:#fff;border-radius:6px;border:.8px solid #e1e6f0;color:#a1abc2;}
.contact-item .wrap:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);}
.contact-item em{font-size:30px;margin:0 30px 20px 0;float:left;background:#296bef;color:#fff;width:55px;height:55px;line-height:52px;border-radius:50%;text-align:center;}
.contact-item h3{font-family:microsoft yahei;color:#333;font-size:18px;font-weight:600;color:#262d3d;}
.contact-item:nth-child(1n){padding-right:40px;padding-right:0;}
.contact-item:nth-child(2n){padding-right:0;padding-left:40px;}

.proshow{display:flex;margin:30px 0;box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-radius:10px;background:#fff;padding:30px;position:relative;}
.proshow-left{width:400px;margin-right:30px;}
.proshow-left img{width:100%;}
.proshow-right{flex:1;overflow:hidden;}
.pro-name{font-size:24px;color:#262d3d;font-weight:bold;}
.pro-intro{color:#a1abc2;padding:15px 0;}
.pro-price{display:flex;align-items:center;justify-content:space-between;background:#F8F8F8;padding:15px 30px;margin-bottom:20px;}
.pro-price .price{color:#296bef;font-size:24px;}
.pro-price .price del{color:#777;font-size:15px;margin-left:10px;}
.pro-price em{border:1px solid #2E95FF;color:#2E95FF;padding:4px;border-radius:4px;}

.pro-ul{list-style:none;padding:0 10px;clear:both;}
.pro-ul li{display:flex;padding:6px 0;align-items:center;}
.pro-ul li em{color:#a1abc2;width:100px;display:block;font-size:15px;}

.pro-action{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.pro-action-left{padding-left:65px;line-height:40px;display:flex;}
.pro-action-left button{display:block;padding:0 15px;color:#2E95FF;text-align:center;border:0;overflow:hidden;font-size:15px;margin-right:15px;border-radius:4px;}
.pro-action-left button.red{background:#ff4837;color:#fff;}
.pro-action-left button.blue{background:#2E95FF;color:#fff;}
.pro-action-left button.yellow{background:#ff8037;color:#fff;}
.pro-action-left button.green{background:#19BE6B;color:#fff;}

.pro-action-url{line-height:40px;display:flex;}
.pro-action-url a{display:block;padding:0 15px;color:#2E95FF;text-align:center;border:0;overflow:hidden;font-size:15px;margin-right:15px;border-radius:4px;}
.pro-action-url a.red{background:#ff4837;color:#fff;}
.pro-action-url a.blue{background:#2E95FF;color:#fff;}
.pro-action-url a.yellow{background:#ff8037;color:#fff;}
.pro-action-url a.green{background:#19BE6B;color:#fff;}
.pro-action-right{text-align:right;}

.ui-goods-sku{list-style:none;padding:0 10px;margin-top:5px;}
.ui-goods-sku .tips{display:none;}
.ui-goods-sku li{line-height:30px;display:flex;color:#555;}
.ui-goods-sku li em{color:#a1abc2;display:inline-block;min-width:54px;padding-top:5px;font-size:14px;}
.ui-goods-sku li span{color:#296bef;padding-right:5px;}
.ui-goods-sku li dl{margin-top:3px;display:flex;flex-wrap:wrap;flex:1;}
.ui-goods-sku li dl dt{font-weight:normal;line-height:28px;border:1px solid #eaeaea;border-radius:4px;padding:6px 15px;min-width:40px;min-height:28px;margin:0 10px 10px 0;cursor:pointer;position:relative;text-align:center;font-size:14px;}
.ui-goods-sku li dl dt.image{padding:4px;}
.ui-goods-sku li dl dt img{display:block;width:80px;height:80px;object-fit:cover;}
.ui-goods-sku li dl dt:hover{border:1px solid #296bef;}
.ui-goods-sku li dl dt:hover a{color:#296bef;}
.ui-goods-sku li dl dt i{position:absolute;right:0px;bottom:-10px;color:#fff;z-index:20;font-size:10px;display:none;}
.ui-goods-sku li dl dt.selected{border:1px solid #296bef;}
.ui-goods-sku li dl dt.selected a{color:#296bef;}
.ui-goods-sku li dl dt.selected:before{position:absolute;content:"";right:0;bottom:0;color:#296bef;width:0;height:0;border-bottom:20px solid #296bef;border-left:20px solid transparent;z-index:10;}
.ui-goods-sku li dl dt.selected i{display:block;}
.ui-goods-sku.active{border:1px solid #296bef;padding:0;}
.ui-goods-sku.active li{padding:0 15px 0 15px;}
.ui-goods-sku.active li:last-child{padding-bottom:15px;}
.ui-goods-sku.active .tips{display:block;margin-bottom:15px;background:#296bef;color:#fff;padding:10px 0 10px 20px;}

.proshow-intro{margin:30px 0;box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);min-height:300px;background:#fff;border-radius:0 10px 10px 10px;}
.proshow-nav{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:0 10px 0 0;}
.proshow-nav ul{list-style:none;display:flex;margin-bottom:-1px;}
.proshow-nav ul li{}
.proshow-nav ul li a{display:block;padding:15px 25px;}
.proshow-nav ul li.active{background:#fff;border:1px solid #f3f3f3;border-bottom:1px solid #fff;border-top:3px solid #296bef;border-radius:4px 4px 0 0;}
.proshow-nav ul li.active a{color:#296bef;font-weight:bold;}

.ui-tab-panel{padding:15px 30px;min-height:200px;}
.ui-tab-panel img{max-width:100%;}
.ui-tab-panel *{max-width:100%;}
.ui-tab-panel>p{margin-bottom:15px;font-size:15px;line-height:30px;}
.ui-tab-panel>h1{font-size:28px;line-height:normal;border-bottom:1px solid #e9e9e9;margin:0 0 20px 0;padding-bottom:20px;}
.ui-tab-panel>h2{font-size:24px;line-height:normal;border-bottom:1px solid #e9e9e9;margin:0 0 20px 0;padding-bottom:20px;}
.ui-tab-panel>h3{font-size:20px;line-height:normal;border-bottom:1px solid #e9e9e9;margin:0 0 20px 0;padding-bottom:20px;}
.ui-tab-panel>h4{font-size:16px;line-height:normal;}

.tempshow{display:flex;justify-content:space-between;position:relative;}
.tempshow-left{flex:1;padding-right:30px;}
.tempshow-right{width:300px;}
.tempbox{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);min-height:300px;background:#fff;border-radius:10px;}

.tempshow-head{margin:0;}
.temp-action-left{line-height:50px;/* display:flex; */}


.temp-box{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);background:#fff;border-radius:10px;padding:25px 30px;position:relative;}
.lastbox{position:sticky;top:80px;}
.temp-name{font-size:20px;color:#000;margin-bottom:10px;border-bottom:1px solid #eee;padding-bottom:20px;position:relative;overflow:hidden;}
.temp-name:after{content:'';display:block;bottom:0;width:60px;height:2px;background:#296bef;position:absolute;}
.temp-name a{float:right;font-size:15px;margin-top:10px;}
.temp-name a span{color:#296bef;margin-right:5px;}
.temp-author{display:flex;align-items:center;margin-top:20px;}
.temp-author .face{width:70px;margin-right:20px;}
.temp-author .face img{width:100%;height:100%;/* border-radius:100%; */}
.temp-author .body{}
.temp-author .body .name{font-size:16px;}
.temp-author .body .star{color:#F90;}

.artlist{list-style:none;}
.artlist li{line-height:40px;border-bottom:1px solid #f3f3f3;padding:5px 0;}
.artlist li a{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.artlist li a em{background:#999;color:#fff;height:26px;line-height:26px;width:26px;border-radius:50%;font-family:verdana;margin-right:10px;font-size:12px;display:inline-block;text-align:center;}
.artlist li:nth-child(1) a em{background: #0F5EFF;}
.artlist li:nth-child(2) a em{background: #0F5EFF;}
.artlist li:nth-child(3) a em{background: #0F5EFF;}

.plugshow-left{width:152px;margin-right:40px;}
.plugshow-left img{width:100%;border:1px solid #f3f3f3;border-radius:4px;box-shadow:0 1px 5px 0 rgba(0,0,0,0.1);}
.plug-action-right{text-align:right;color:#999;}
.plug-action-right span{font-size:24px;color:#296bef;margin-left:5px;}

.faq .ui-panel{background:#fff;border-bottom:0;border-radius:6px;padding:6px 15px 6px 30px;margin-top:15px;border:1px solid #eaeaea;}
.faq .ui-panel i{color:#999;font-size:16px;}
.faq .ui-panel a{color:#333;}
.faq .ui-panel.active{background:#FFFCFB;border-radius:6px 6px 0 0;border:1px solid #FFE9E3;}
.faq .ui-panel.active a{color:#296bef;font-weight:bold;}
.faq .ui-panel.active i{color:#296bef;}
.faq .ui-panel-body{background:#fff;border-radius:0 0 6px 6px;padding:20px 30px;border:1px solid #FFE9E3;border-top:0;}
.faq .ui-panel-body .ui-row{justify-content:space-between;}
.faq .ui-panel-body .tips{margin:3px 15px 0 0;}
.faq .ui-panel-body .tips span{background:#0F5EFF;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:50%;}
.faq .ui-panel-body .ans{flex:1;overflow:hidden;line-height:30px;}
.faq .ui-panel-body .ans span{color:#999}
.faq .ui-panel-body .ans a{color:#296bef}
.faq .ui-panel-body .ans a:hover{text-decoration:underline;}

.artshow{margin:0;box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-radius:10px;background:#fff;padding:40px;position:relative;}
.art-title h1{font-size:32px;line-height:40px;color:#1c1f21;}
.art-info{color:#9199a1;line-height:24px;font-size:15px;padding:20px 0;display:flex;align-items:center;justfily-content:space-between;border-bottom:1px solid #f3f3f3;}
.art-info-left{display:flex;align-items:center;}
.art-info-right{text-align:right;flex:1;overflow:hidden;}
.art-info .user{vertical-align:middle;}
.art-info .user img{width:48px;height:48px;border-radius:50%;margin-right:10px;vertical-align:middle;}
.art-info .info{}
.art-info .info a{color:#333;}
.art-info .info a:hover{color:#296bef;}
.art-info .info span{display:block;font-size:14px;}

.ui-share{text-align:right;color:#999;}
.ui-share a{display:inline-block;width:40px;line-height:35px;height:40px;border-radius:50%;border:1px solid #eaeaea;margin-left:10px;text-align:center;vertical-align:middle;}
.ui-share a i{font-size:16px;}
.ui-share a:nth-child(1){color:#1890FF;}
.ui-share a:hover:nth-child(1){border-color:#1890FF;}
.ui-share a:nth-child(2){color: #f30;}
.ui-share a:hover:nth-child(2){border-color:#296bef;}
.ui-share a:nth-child(3){color:#19BE6B;}
.ui-share a:hover:nth-child(3){border-color:#19BE6B;}

.art-body{word-break:break-all;padding-top:30px;font-size:16px;}
.art-body img{max-width:100%;}
.art-body p{margin-bottom:20px;line-height:32px;font-size:16px;}
.art-body h1{font-size:24px;line-height:normal;border-bottom:1px solid #e9e9e9;margin:0 0 20px 0;padding-bottom:20px;}
.art-body h2{font-size:22px;line-height:normal;border-bottom:1px solid #e9e9e9;margin:0 0 20px 0;padding-bottom:20px;}
.art-body h3{font-size:20px;line-height:normal;border-bottom:1px solid #e9e9e9;margin:0 0 20px 0;padding-bottom:20px;}
.art-body h4{font-size:16px;line-height:normal;}
.art-body a{color:#206DF5;}
.art-login{position:relative;min-height:200px;max-height:800px;overflow:hidden;}
.art-login .readmore{position:absolute;left:0;bottom:0;z-index:99;width:100%;height:120px;font-size:16px;line-height:30px;text-align:center;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 50%);cursor:pointer;padding-top:20px;font-family:microsoft yahei;color:#999;}
.art-login .readmore span{color:#296bef;padding:0 5px;}
.art-login .ui-line:before{border-color:#296bef;}
.art-login .ui-line span{border:1px solid #296bef;border-radius:4px;background:#fff;padding:10px 20px;}

.user_info{display:flex;padding:20px 0;margin-bottom:30px;}
.user_info_left{width:50%;display:flex;}
.user_info_left .face{width:150px;margin-right:30px;}
.user_info_left .face img{width:140px;height:140px;border-radius:50%;}
.user_info_left .info{line-height:35px;font-size:16px;}
.user_info_left .info p{font-weight:bold;}
.user_info_left .info p span{font-weight:normal;margin-left:15px;font-size:14px;color:rgba(0,0,0,.4);}
.user_info_left .info div span{color:rgba(0,0,0,.4);}
.user_info_right{width:50%;display:flex;align-items:center;padding-top:20px;}
.user_info_right.bill{width:70%;}
.user_info_right .item{width:33.33%;position:relative;text-align:center;}
.user_info_right .item:after{content:'';position:absolute;display:block;right:0;top:0;width:1px;height:80%;background:#eaeaea;transform:translateY(10%);}
.user_info_right .item:last-child:after{display:none;}
.user_info_right .item .info{font-size:15px;color:rgba(0,0,0,.4);line-height:40px;}
.user_info_right .item .num{font-size:24px;color:#666;}
.user_info_right .item .num span{font-size:12px;color:#999;margin-left:5px;}
.user_info_right .item .num.red{color:#296bef;}

.fee_wrap{margin:20px -14px 0 -14px;display:flex;flex-wrap:wrap;}
.fee_item{width:33.33%;padding:14px;}
.fee_item_body{background:#F8FBFF;padding:15px 20px;border:1px solid #E5EBF5;border-radius:4px;}
.fee_item_head{font-size:15px;color:#000;line-height:40px;}
.fee_item_foot{display:flex;justify-content:space-between;align-items:center;}
.fee_item_left{font-size:24px;}
.fee_item_left.red{color:#F44336;}
.fee_item_left.blue{color:#0F5EFF;}
.fee_item_right{}

.ui-cart{margin:20px 0;padding:30px 40px;box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-radius:10px;background:#fff;position:relative;min-height:700px;}
.cart-head{display:flex;align-items:center;margin-top:30px;border:1px solid #eee;border-left:0;}
.cart-head-item{background:#fafafa;padding:10px 15px;line-height:40px;border-left:1px solid #eee;text-align:center;font-weight:bold;font-size:16px;}
.cart-head-item.num{width:180px;}
.cart-head-item.other{width:120px;}
.cart-head-item.action{width:100px;}
.cart-head-item.name{flex:1;overflow:hidden;text-align:left}

.cart-list{display:flex;align-items:center;border:1px solid #eee;border-top:0;border-left:0;}
.cart-list-item{background:#fff;padding:10px 15px;border-left:1px solid #eee;text-align:center;min-height:70px;line-height:70px;}
.cart-list-item .ui-inputnumber-wrap{line-height:normal;}
.cart-list-item.num{width:180px;}
.cart-list-item.other{width:120px;}
.cart-list-item.action{width:100px;}
.cart-list-item.name{flex:1;overflow:hidden;text-align:left;display:flex;line-height:28px;}
.cart-list-item.name img{display:block;margin-right:15px;width:70px;height:70px;}
.cart-list-item.name div{font-size:16px;}
.cart-list-item.name em{color:#999;display:block;font-size:15px;}

.cart-foot{display:flex;justify-content:space-between;align-items:center;background:#fff;line-height:40px;border:1px solid #eee;border-top:0;}
.cart-foot .total{padding:10px 15px;}
.cart-foot .total span{color:#296bef;margin-right:5px;}
.cart-foot .action{padding:10px 15px;}

.ui-order{margin:0;box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-radius:10px;background:#fff;padding:30px 40px;position:relative;min-height:565px;}
.prenext{display:flex;flex-wrap:wrap;margin-top:30px;}
.prenext-item{width:50%;}
.prenext-item:nth-child(odd){padding-left:0;padding-right:15px;}
.prenext-item:nth-child(even){padding-left:15px;padding-right:0;}

.ui-panels .ui-panel{padding-left:10px;}
.ui-panels .ui-panel.active{background:#fff;font-size:16px;}
.ui-panels .ui-panel.active a{font-weight:bold;}

.page-bind{background:#fff;padding:120px 350px;margin-bottom:30px;}
.bind-list{}
.bind-list a{display:block;border:1px solid #eee;margin-bottom:20px;padding:15px 20px;color:#333;font-weight:bold;font-size:16px;}
.bind-list a p{color:#999;font-weight:normal;font-size:14px;margin-top:10px;}
.bind-list a:hover{color:#0F5EFF;background:#FFF6F6;border-color:#FFD1D0;}
.bind-list a:hover p{color:#555;}

.tns-nav{position:absolute;right:0;top:-10px;}
.tns-nav[type="goods"]{text-align:right;}
.tns-nav a{width:40px;height:40px;line-height:36px;border:1px solid #eee;border-radius:50%;background:none;display:inline-block;text-align:center;margin-left:10px;transition:0.3s;float:none;}
.tns-nav a i{font-size:16px;}
.tns-nav a:hover{background:#296bef;border-color:#296bef;color:#fff;}
.tns-nav a[aria-disabled="true"],.tns-nav a[aria-disabled="true"]:hover{color:#999;background:#fff;border-color:#eee;cursor:not-allowed;}
.tns-dots{text-align:center;margin-top:20px;}
.tns-dots a{display:inline-block;margin:5px;background:#eaeaea;width:12px;height:12px;border-radius:50%;}
.tns-dots a.active{background:#296bef}




.news-list{margin:0;min-height:300px;}
.news-list-wrap{margin:0 -14px;/* display:flex; */flex-wrap: wrap;padding:5px 0;flex-direction: row;}
.news-list-item{/* width:25%; */padding:0 14px;margin-bottom:28px;position:relative;}
.news-list-item .ui-ring{right:12px;}
.news-list-item .ui-ring.left{left:10px;}

.news-list-box{background:#fff;border-radius:8px;border:0.8px solid transparent;}
.news-list-box:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.news-list-box .item-image{position:relative;overflow:hidden;padding-bottom:56.2%;background:#F8FBFF;border-radius:8px 8px 0 0;}
.news-list-box .item-image img{width:100%;min-height:100%;height:auto;position:absolute;z-index:1;/*object-fit:cover;*/border-radius:8px 8px 0 0;}
.news-list-box .item-image svg{width:100%;height:100%;text-anchor:middle;border-radius:8px 8px 0 0;font-size:20px;position:absolute;}
.news-list-box .item-text{padding:20px 20px;}
.news-list-box .item-text a{font-size:18px;font-weight:bold;line-height:40px;height:50px;display:block;}
.news-list-box .item-text p{color:#a1abc2;line-height:24px;height:50px;font-size:14px;overflow:hidden;}
.news-list-box .item-footer{padding:0 20px 20px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 8px 8px;min-height:55px;}
.news-list-box .item-footer .user{vertical-align:middle;}
.news-list-box .item-footer .user a{color:#b5b5b5;}
.news-list-box .item-footer .user a:hover{color:#296bef;}
.news-list-box .item-footer .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.news-list-box .item-footer .info{text-align:right;}
.news-list-box .item-footer .info em{border:1px solid #296bef;color:#296bef;padding:6px;font-size:14px;border-radius:4px;background:#fff;}
.news-list-box .item-footer .price{color:#296bef;font-size:16px;}
.news-list-box .item-footer .price del{color:#999;font-size:12px;margin-left:5px;}
.news-list-box .item-footer .price span{color:#999;font-size:15px;margin-left:5px;}




.ziliao_list{display:flex;flex-wrap:wrap;margin:0 -14px;}
.ziliao_list_item{/* width:33.33%; */margin:0 0 28px 0;position:relative;padding:0 14px;}
.ziliao_list_item_body{background:#fff;padding:15px 20px;border:0.8px solid #f3f3f3;border-radius:8px;}
.ziliao_list_item_body:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.ziliao_list_item .ui-ring{right:10px;}
.ziliao_list_wrap{display:flex;flex-wrap:wrap;padding:10px 10px 10px 0;}
.ziliao_list_icon{width:66px;height:66px;margin-right:20px;}
.ziliao_list_icon img{width:100%;height:100%;border-radius:5px;border:1px solid #eaeaea;padding:3px;}
.ziliao_list_body{flex:1;overflow:hidden;}
.ziliao_list_body .name{font-size:16px;font-weight:bold;padding-top:5px;}
.ziliao_list_body .intro{font-size:14px;line-height:24px;margin-top:8px;color:#a1abc2;}
.ziliao_list_foot{border-top:1px solid #f3f3f3;margin-top:10px;padding-top:15px;display:flex;justify-content:space-between;align-items:center}
.ziliao_list_foot .price{color:#296bef;font-size:14px;}
.ziliao_list_foot .free{color:#999;font-size:14px;}
.ziliao_list_foot .user{vertical-align:middle;}
.ziliao_list_foot .user a{color:#b5b5b5;}
.ziliao_list_foot .user a:hover{color:#296bef;}
.ziliao_list_foot .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}


.container{display:flex;flex-wrap:wrap;justify-content:space-between;}
.container .container-left{width:1075px;}
.container .container-right{width:345px;margin-left:20px;}



.activitybox{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);min-height:300px;background:#fff;border-radius:10px;}

.activityshow-head{margin:0;}

.activity-action-left{line-height:50px;display:flex;}


.activity-box{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);background:#fff;border-radius:10px;padding:25px 30px;position:relative;}
.lastbox{position:sticky;top:80px;}

.activity-name{font-size:20px;color:#000;margin-bottom:10px;border-bottom:1px solid #eee;padding-bottom:20px;position:relative;overflow:hidden;}
.activity-name:after{content:'';display:block;bottom:0;width:60px;height:2px;background:#FF525F;position:absolute;}
.activity-name a{float:right;font-size:15px;margin-top:10px;}
.activity-name a span{color:#f30;margin-right:5px;}

.activity-author{display:flex;align-items:center;margin-top:20px;}
.activity-author .face{width:70px;margin-right:20px;}
.activity-author .face img{width:100%;height:100%;border-radius:50%;}
.activity-author .body{}
.activity-author .body .name{font-size:16px;}
.activity-author .body .star{color:#F90;}

.activityshow{display:flex;margin:30px 0;box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-radius:10px;background:#fff;padding:30px;position:relative;justify-content:space-between;position:relative;}}
.activityshow-left{width:500px; margin-right:30px; }
.activityshow-left img{width:100%;}
.activityshow-left{width:500px;margin-right:30px;}
.activityshow-right{width:300px;}
.activityshow-right{flex:1;overflow:hidden;}

.activity-name{font-size:24px;color:#262d3d;font-weight:bold;}
.activity-intro{color:#a1abc2;padding:15px 0;}

.activity-price{display:flex;align-items:center;justify-content:space-between;background:#F8F8F8;padding:15px 30px;margin-bottom:20px;}
.activity-price .price{color:#f30;font-size:24px;}
.activity-price .price del{color:#777;font-size:15px;margin-left:10px;}
.activity-price em{border:1px solid #2E95FF;color:#2E95FF;padding:4px;border-radius:4px;}

.activity-ul{list-style:none;padding:0 10px;clear:both;}
.activity-ul li{display:flex;padding:6px 0;align-items:center;}
.activity-ul li em{color:#a1abc2;display:block;font-size:15px;}

.activity-action{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.activity-action-left{/* padding-left:65px; */line-height:40px;display:flex;}
.activity-action-left button{display:block;padding:0 15px;color:#2E95FF;text-align:center;border:0;overflow:hidden;font-size:15px;margin-right:15px;border-radius:4px;}
.activity-action-left button.red{background:#ff4837;color:#fff;}
.activity-action-left button.blue{background:#2E95FF;color:#fff;}
.activity-action-left button.yellow{background:#ff8037;color:#fff;}
.activity-action-left button.green{background:#19BE6B;color:#fff;}

.activity-action-url{line-height:40px;display:flex;}
.activity-action-url a{display:block;padding:0 15px;color:#2E95FF;text-align:center;border:0;overflow:hidden;font-size:15px;margin-right:15px;border-radius:4px;}
.activity-action-url a.red{background:#ff4837;color:#fff;}
.activity-action-url a.blue{background:#2E95FF;color:#fff;}
.activity-action-url a.yellow{background:#ff8037;color:#fff;}
.activity-action-url a.green{background:#19BE6B;color:#fff;}
.activity-action-right{text-align:right;}

.activityshow-intro{margin:30px 0;box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);min-height:300px;background:#fff;border-radius:0 10px 10px 10px;}
.activityshow-nav{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:0 10px 0 0;}
.activityshow-nav ul{list-style:none;display:flex;margin-bottom:-1px;}
.activityshow-nav ul li{}
.activityshow-nav ul li a{display:block;padding:15px 25px;}
.activityshow-nav ul li.active{background:#fff;border:1px solid #f3f3f3;border-bottom:1px solid #fff;border-top:3px solid #FF525F;border-radius:4px 4px 0 0;}
.activityshow-nav ul li.active a{color:#FF525F;font-weight:bold;}

.activity_list_body{flex:1;overflow:hidden;}
.activity_list_body .name{font-size:16px;font-weight:bold;padding-top:5px;}
.activity_list_body .intro{font-size:14px;line-height:24px;margin-top:8px;color:#a1abc2;}

.activity_list_foot{border-top:1px solid #f3f3f3;margin-top:10px;padding-top:15px;display:flex;justify-content:space-between;align-items:center}
.activity_list_foot .price{color:#f30;font-size:14px;}
.activity_list_foot .free{color:#999;font-size:14px;}
.activity_list_foot .user{vertical-align:middle;}
.activity_list_foot .user a{color:#b5b5b5;}
.activity_list_foot .user a:hover{color:#FF6000;}
.activity_list_foot .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}


.daohang_list{display:flex;flex-wrap:wrap;margin:0 -14px;}
.daohang_list_item{width: 25%;margin:0 0 28px 0;position:relative;padding:0 14px;}
.daohang_list_item_body{background:#fff;padding:15px 20px;border:0.8px solid #f3f3f3;border-radius:8px;}
.daohang_list_item_body:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.daohang_list_item .ui-ring{right:10px;}
.daohang_list_wrap{display:flex;flex-wrap:wrap;}
.daohang_list_icon{width:50px;height:50px;margin-right:20px;}
.daohang_list_icon img{width:100%;height:100%;border-radius:5px;border:1px solid #eaeaea;padding:3px;}
.daohang_list_body{flex:1;overflow:hidden;}
.daohang_list_body .name{font-size: 14px;font-weight:bold;}
.daohang_list_body .intro{font-size: 12px;margin-top:8px;color:#a1abc2;}
.daohang_list_foot{border-top:1px solid #f3f3f3;margin-top:10px;padding-top:15px;display:flex;justify-content:space-between;align-items:center}
.daohang_list_foot .price{color:#296bef;font-size:14px;}
.daohang_list_foot .free{color:#999;font-size:14px;}
.daohang_list_foot .user{vertical-align:middle;}
.daohang_list_foot .user a{color:#b5b5b5;}
.daohang_list_foot .user a:hover{color:#296bef;}
.daohang_list_foot .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}


.services{max-width:1480px;margin:40px auto;padding:0 20px;}
.services-wrap{display:flex;flex-wrap:wrap;margin:1px 0 0 1px;}
.services-item{width:25%;margin:-1px 0 0 -1px;border:1px solid #eaeaea;position:relative;padding:30px 40px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
.services-item:nth-child(1){border-top-left-radius:16px;}
.services-item:nth-child(4){border-top-right-radius:16px;}
.services-item:nth-child(5){border-bottom-left-radius:16px;}
.services-item:last-child{border-bottom-right-radius:16px;}
.services-biz .services-item:nth-child(1){border-bottom-left-radius:16px;}
.services-item .body{padding-bottom:36%;}
.services-item .title{font-size:22px;line-height:30px;}
.services-item .title span{color:#296bef;margin:0 5px;}
.services-item .desc{line-height:26px;margin-top:20px;color:#666;}
.services-item .price{position:absolute;bottom:30px;left:40px;color:#999;}
.services-item .price span{color:#333;font-size:36px;display:inline-block;margin-right:10px;}
.services-biz .price span{color:#296bef;}
.services-item:hover{background:#296bef;border-color:#296bef;}
.services-item:hover .title{color:#fff;}
.services-item:hover .title span{color:#fff;}
.services-item:hover .desc{color:#fff;}
.services-item:hover .price{color:#fff;}
.services-item:hover .price span{color:#fff;}
.services.red .services-item:hover{background:#FA563A;border-color:#FA563A;}


.outart{max-width:96%;background:#fff;margin:40px auto;}
.outart-wrap{display:flex;flex-wrap:wrap;margin:40px 0 20px -2%;}
.outart-item{width: 23%;margin:0 0 2% 2%;background:#fff;border:1px solid #f3f3f3;box-shadow:0 0 30px rgba(83,115,252,0.13);border-radius:0 0 16px 16px;}
.outart-item .title{padding:15px 30px;background: #FF5722;color:#fff;font-size:22px;}
.outart-item .list{background:#fff;padding:20px 30px 0 30px;}
.outart-item .list ul{list-style:none;}
.outart-item .list ul li{border-bottom:1px solid #f3f3f3;margin-bottom:15px;padding-bottom:10px;transition:all 0.5s ease;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.outart-item .list ul li i{color:#098df9;margin-right:10px;}
.outart-item .list ul li span{background:#cdcdcd;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:50%;margin-right:15px;font-size:14px;}


.outart-item .list ul li:hover{transform:translateX(10px);}
.outart-item .list ul li:nth-child(1) span{background: #E91E63;}
.outart-item .list ul li:nth-child(2) span{background: #FF5722;}
.outart-item .list ul li:nth-child(3) span{background:#FFC11A;}
.outart-item .more{margin:30px 20px;}
.outart-item .more a{display:block;text-align:center;border: 1px solid #296bef;background:#fff;color: #296bef;padding:10px 0;border-radius:40px;}
.outart-item .more a i{color:#296bef;}
.outart-item .more a:hover{background:#296bef;border-color:#296bef;color:#fff;}
.outart-item .more a:hover i{color:#fff;}



.zixun_list{display:flex;flex-wrap:wrap;margin:0 -14px;}
.zixun_list_item{/* width:33.33%; */margin:0 0 28px 0;position:relative;padding:0 14px;}
.zixun_list_item_body{background:#fff;padding:15px 20px;border:0.8px solid #f3f3f3;border-radius:8px;}
.zixun_list_item_body:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.zixun_list_item .ui-ring{right:10px;}
.zixun_list_wrap{display:flex;flex-wrap:wrap;padding:10px 10px 10px 0;}
.zixun_list_icon{width: 350px;height: 200px;margin-right:20px;}
.zixun_list_icon img{width:100%;height:100%;border-radius:5px;border:1px solid #eaeaea;padding:3px;}
.zixun_list_body{flex:1;overflow:hidden;}
.zixun_list_body .name{font-size:16px;font-weight:bold;padding-top:5px;}
.zixun_list_body .intro{font-size:14px;line-height:24px;margin-top:8px;color:#a1abc2;}
.zixun_list_foot{border-top:1px solid #f3f3f3;margin-top:10px;padding-top:15px;display:flex;justify-content:space-between;align-items:center}
.zixun_list_foot .price{color:#296bef;font-size:14px;}
.zixun_list_foot .free{color:#999;font-size:14px;}
.zixun_list_foot .user{vertical-align:middle;}
.zixun_list_foot .user a{color:#b5b5b5;}
.zixun_list_foot .user a:hover{color:#296bef;}
.zixun_list_foot .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}


.why { border-top: 1px solid #efefef; margin: 0 0 20px 0; }
.why .ui-row {/*border-bottom:1px solid #efefef;*/ padding: 30px 0 10px 0; }
.why .ui-col-3 {font-size: 18px;color: #666;text-align: center;}
.why .ui-col-3 i { font-size: 40px; color: #1890FF; margin-right: 10px; }





.inner_wrap{background: url(http://kjfile.maimaia.net/upfile/2024/08/17243366647163.jpg);}
.inner_banner{max-width:1480px;padding: 20px 20px;margin:0 auto;display:flex;align-items:center;/* height:460px; */}
.inner_banner .text{flex: 0 0 100%;padding-right: 10%;text-align: center;}
.inner_banner .text h2{font-size: 30px;font-weight:bold;color: #f3f3f3;/* margin-top:-20px; */letter-spacing:2px;}
.inner_banner .text h2:after{content:'';display:block;/* background:#296bef; */width:75px;height:6px;border-radius:3px;margin:24px 0 22px}
.inner_banner .text h2 em{font-size:24px;color:#999;display:inline-block;margin-left:20px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-weight:normal;letter-spacing:0;}
.inner_banner .text p{font-size:16px;line-height:30px;color: #fefefe;text-align: center;}
.inner_banner .text .ui-form-group{margin-top:30px;}
.inner_banner .text .before{background:#296bef;border-color:#E9EEFB;color:#fff;padding:0 20px;}
.inner_banner .text .ui-form-ip{border-color:#E9EEFB;/* max-width:320px; */font-family:verdana;}
.inner_banner .text .ui-form-ip span{color:#999;margin:0 10px;}
.inner_banner .text .after{background:#296bef;border-color:#E9EEFB;color:#fff;padding: 0 50px;}
.inner_banner .text .after i{font-size:24px;}
.inner_banner .image{flex:0 0 50%;max-width:50%;text-align:right;padding-right:40px;}
.inner_banner .image img{max-width:100%;max-height:400px;vertical-align:middle;}

.inner_wrap.red{}
.inner_wrap.red .inner_banner .text h2{color:#296bef}
.inner_wrap.red .inner_banner .text h2:after{background:#296bef}
.inner_wrap.red .inner_banner .text .before{background:#296bef;border-color:#296bef;}



.ask_list{display:flex;flex-wrap:wrap;margin:0 -14px;}
.ask_list_item{/* width:33.33%; */margin:0 0 28px 0;position:relative;padding:0 14px;}
.ask_list_item_body{background:#fff;padding:15px 20px;border:0.8px solid #f3f3f3;border-radius:8px;}
.ask_list_item_body:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.ask_list_item .ui-ring{right:10px;}
.ask_list_wrap{display:flex;flex-wrap:wrap;padding:10px 10px 10px 0;}
.ask_list_icon{width:66px;height:66px;margin-right:20px;}
.ask_list_icon img{width:100%;height:100%;border-radius:5px;border:1px solid #eaeaea;padding:3px;}
.ask_list_body{flex:1;overflow:hidden;}
.ask_list_body .name{font-size:16px;font-weight:bold;padding-top:5px;}
.ask_list_body .intro{font-size:14px;line-height:24px;margin-top:8px;color:#a1abc2;}
.ask_list_foot{border-top:1px solid #f3f3f3;margin-top:10px;padding-top:15px;display:flex;justify-content:space-between;align-items:center}
.ask_list_foot .price{color:#296bef;font-size:14px;}
.ask_list_foot .free{color:#999;font-size:14px;}
.ask_list_foot .user{vertical-align:middle;}
.ask_list_foot .user a{color:#b5b5b5;}
.ask_list_foot .user a:hover{color:#296bef;}
.ask_list_foot .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}





.hotfaq{max-width:1480px;background:#fff;margin:20px auto;padding:0 20px;}
.hotfaq_list{display:flex;flex-wrap:wrap;margin:40px 0 20px -2%;}
.hotfaq_list_item{width:31.33%;margin:0 0 2% 2%;}
.hotfaq_list_item_body{margin:5px;padding:35px 40px;box-shadow:0px 2px 32px 0px rgba(0,0,0,0.1);border-radius:10px;transition:all 0.36s ease;background:#fff;}
.hotfaq_list_item_body .text{margin-bottom:10px;}
.hotfaq_list_item_body .text h4{font-size:20px;}
.hotfaq_list_item_body a{font-size:16px;font-family:Verdana, Geneva, sans-serif;display:block;line-height:60px;border-bottom:1px solid #f3f3f3;}
.hotfaq_list_item_body a span{background:#CDCDCD;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:50%;margin-right:15px;font-size:14px;}
.hotfaq_list_item_body a:nth-child(1) span{background:#296bef;}
.hotfaq_list_item_body a:nth-child(2) span{background:#296bef;}


.help{max-width:1480px;background:#fff;margin:50px auto;padding:0 20px;}
.help-wrap{display:flex;flex-wrap:wrap;margin:40px 0 20px -2%;}
.help-item{width:31.33%;margin:0 0 2% 2%;background:#fff;border:1px solid #f3f3f3;box-shadow:0 0 30px rgba(83,115,252,0.13);border-radius:16px;}
.help-item .title{padding:18px 35px;border-bottom:1px solid #e0eaff;font-size:22px;background:#296BEF;color:#fff;position:relative;}
.help-item .body{padding:10px 20px 30px 20px;}
.help-item .body li span{background:#CDCDCD;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:50%;margin-right:15px;font-size:14px;}
.help-item .body li:nth-child(1) span{background:#FD754D;}
.help-item .body li:nth-child(2) span{background:#FF9F26;}
.help-item .body li:nth-child(3) span{background:#FFC11A;}
.help-item .more{margin:20px 20px 0 20px;}
.help-item .more a{display:block;text-align:center;border:1px solid #296BEF;background:#fff;color:#296BEF;padding:10px 0;border-radius:40px;}
.help-item .more a i{color:#296BEF;}
.help-item .more a:hover{background:#098df9;border-color:#098df9;color:#fff;}
.help-item .more a:hover i{color:#fff;}




.article-list {width: 100%;padding: 1.5em;position: relative;border-radius: 10px;}
.article-list:hover {box-shadow: 0 6px 12px rgba(26,26,26,.1);-webkit-transition: all ease .4s;-moz-transition: all ease .4s;-ms-transition: all ease .4s;-o-transition: all ease .4s;transition: all ease .4s}
.article-list .istop {color: #296bef;padding: 0 3px;border: 2px solid #296bef;border-radius: 4px;font-size: 14px;vertical-align: middle;display: inline-block;margin-right: 5px;font-weight: 700}
.article-list .figure {width: 240px;height: 160px;overflow: hidden;margin-right: 20px;}
.article-list .thumbnail {display: block;overflow: hidden}
.article-list .figure img {height: 160px;width: 100%}
.article-list .content {color: #888}
.article-list .content-no-img {margin-left: 0!important}
.article-list .content .title {font-size: 20px;font-weight: 400;font-weight: bold;}
.article-list .content i {padding-right: 5px;color: #666;font-size: 14px;}
.article-list .content span {padding-left: 20px;}
.article-list .intro {padding: 1em 0}
.article-list .tag {max-width: 22em}
.article-list .tag a {color: #666;padding-right: 8px}
.article-list .tag a:hover {color: #333;text-decoration: underline}





.wenda-list{margin:0;min-height:300px;}
.wenda-list-wrap{margin:0 -14px;display:flex;flex-wrap:wrap;padding:5px 0;}
.wenda-list-item{width:100%;padding:0 14px;margin-bottom:28px;position:relative;}
.wenda-list-item .ui-ring{right:12px;}
.wenda-list-item .ui-ring.left{left:10px;}

.wenda-list-box{background: var(--el-fill-color-light);border-radius:8px;border:0.8px solid transparent;}
.wenda-list-box:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.wenda-list-box .item-image{position:relative;overflow:hidden;padding-bottom:56.2%;background:#F8FBFF;border-radius:8px 8px 0 0;}
.wenda-list-box .item-image img{width:100%;min-height:100%;height:auto;position:absolute;z-index:1;/*object-fit:cover;*/border-radius:8px 8px 0 0;}
.wenda-list-box .item-image svg{width:100%;height:100%;text-anchor:middle;border-radius:8px 8px 0 0;font-size:20px;position:absolute;}
.wenda-list-box .item-text{padding:20px 20px;}
.wenda-list-box .item-text a{font-size:18px;font-weight:bold;line-height:40px;height:50px;display:block;}
.wenda-list-box .item-text p{color:#a1abc2;line-height:24px;height:50px;font-size:14px;overflow:hidden;}
.wenda-list-box .item-footer{padding:0 20px 20px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 8px 8px;min-height:55px;}
.wenda-list-box .item-footer .user{vertical-align:middle;}
.wenda-list-box .item-footer .user a{color:#b5b5b5;}
.wenda-list-box .item-footer .user a:hover{color:#296bef;}
.wenda-list-box .item-footer .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.wenda-list-box .item-footer .info{text-align:right;}
.wenda-list-box .item-footer .info em{border:1px solid #296bef;color:#296bef;padding:6px;font-size:14px;border-radius:4px;background:#fff;}
.wenda-list-box .item-footer .price{color:#296bef;font-size:16px;}
.wenda-list-box .item-footer .price del{color:#999;font-size:12px;margin-left:5px;}
.wenda-list-box .item-footer .price span{color:#999;font-size:15px;margin-left:5px;}



.fuwu-list{margin:0;min-height:300px;}
.fuwu-list-wrap{margin:0 -14px;display:flex;flex-wrap:wrap;padding:5px 0;}
.fuwu-list-item{width:20%;padding:0 14px;margin-bottom:28px;position:relative;}
.fuwu-list-item .ui-ring{right:12px;}
.fuwu-list-item .ui-ring.left{left:10px;}

.fuwu-list-box{background:#fff;border-radius:8px;border:0.8px solid transparent;}
.fuwu-list-box:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.fuwu-list-box .item-image{position:relative;overflow:hidden;padding-bottom:56.2%;background:#F8FBFF;border-radius:8px 8px 0 0;}
.fuwu-list-box .item-image img{width:100%;min-height:100%;height:auto;position:absolute;z-index:1;/*object-fit:cover;*/border-radius:8px 8px 0 0;}
.fuwu-list-box .item-image svg{width:100%;height:100%;text-anchor:middle;border-radius:8px 8px 0 0;font-size:20px;position:absolute;}
.fuwu-list-box .item-text{padding:20px 20px;}
.fuwu-list-box .item-text a{font-size:18px;font-weight:bold;line-height:40px;height:50px;display:block;}
.fuwu-list-box .item-text p{color:#a1abc2;line-height:24px;height:50px;font-size:14px;overflow:hidden;}
.fuwu-list-box .item-footer{padding:0 20px 20px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 8px 8px;min-height:55px;}
.fuwu-list-box .item-footer .user{vertical-align:middle;}
.fuwu-list-box .item-footer .user a{color:#b5b5b5;}
.fuwu-list-box .item-footer .user a:hover{color:#296bef;}
.fuwu-list-box .item-footer .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.fuwu-list-box .item-footer .info{text-align:right;}
.fuwu-list-box .item-footer .info em{border:1px solid #296bef;color:#296bef;padding:6px;font-size:14px;border-radius:4px;background:#fff;}
.fuwu-list-box .item-footer .price{color:#296bef;font-size:16px;}
.fuwu-list-box .item-footer .price del{color:#999;font-size:12px;margin-left:5px;}
.fuwu-list-box .item-footer .price span{color:#999;font-size:15px;margin-left:5px;}


.down_tips{border-top:1px solid #eaeaea;padding-top:15px;}
.down_tips .group-wrap{display:flex;flex-wrap:wrap;width:100%;}
.down_tips .group{font-size:14px;color:#555;line-height:26px;text-align:left;flex:50%;}
.down_tips .group span{color:#06f;margin-right:5px;}
.down_tips .group em{color:#333;margin:0 5px 0 10px;border:1px solid #FFEFE7;background:#fff;color:#296bef;font-size:13px;padding:1px 2px;border-radius:4px;}


.ring{position:absolute;top:-5px;right:-5px;width:110px;height:110px;overflow:hidden;z-index:10;}
.ring span{position:absolute;color:#fff;font-size:15px;line-height:40px;background:#296bef;transform:rotate(45deg);text-align:center;right:-36px;width:150px;top:18px;}
.ring span:before{content:"";position:absolute;top:100%;left:0;width:5px;height:5px;color:#fff;border:3px solid transparent;border-left-color:#296bef;border-top-color:#296bef;}
.ring span:after{content:"";position:absolute;top:100%;right:0;width:5px;height:5px;color:#fff;border:3px solid transparent;border-right-color:#296bef;border-top-color:#296bef;}
.ring span a{color:#fff;}
.ring-blue span{background:#296bef;}
.ring-blue span:before{border-left-color:#296BEF;border-top-color:#296BEF;}
.ring-blue span:after{border-right-color:#296BEF;border-top-color:#296BEF;}

.ring-green span{background:#46B12C;}
.ring-green span:before{border-left-color:#0A904B;border-top-color:#0A904B;}
.ring-green span:after{border-right-color:#0A904B;border-top-color:#0A904B;}
.ring-left{right:auto;left:-5px;}
.ring-left span{transform:rotate(-45deg);right:auto;left:-36px;}



.activity{background:#fbf0dc;height:50px;line-height:50px;padding:0 20px;position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;z-index:79;}
.activity .lefter img{margin-right:10px;position:relative;top:-3px;}
.activity .lefter a span{color:#296bef;min-width:230px;display:inline-block;}
.activity .lefter a span:last-child{color:#296bef;margin-left:15px;min-width:auto;}



.biz-warp{background:#fff;border-top:1px solid #e0eaff;border-bottom:1px solid #e0eaff;box-shadow:0 3px 16px rgba(0,116,255,.05);line-height:70px;height:70px;overflow:hidden;}
.biz-news{max-width:96%;margin:0 auto;display:flex;}
.biz-news i{color:rgba(0,116,255,1);margin-right:20px;}
.biz-news ul{list-style:none;overflow:hidden;}
.biz-news ul li{display:inline-block;margin-right:20px;}
.biz-news ul li span{color:#999;display:inline-block;margin-left:15px;}

.subject{text-align:center;}
.subject h2{font-size:24px;color:#0c0c0c;margin:30px 0;position:relative;padding-bottom:18px;margin-bottom:24px;}
.subject h2:after{content:'';display:inline-block;position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:6px;width:40px;background:#ffa601;border-radius:3px}
.subject h4{font-size:30px;line-height:45px;font-weight:bold;letter-spacing:0.5px;color:#161c2d;}
.subject p{font-size:16px;line-height:26px;font-weight:400;color:#8492a6;padding:0 10px;}
.subject .ui-scroll{margin:15px 0;}
.subject .ui-scroll li b{font-weight:normal;display:inline-block;margin-right:15px;}
.subject .ui-scroll li span{color:#296bef;display:inline-block;margin-left:10px;}

.ourpro{max-width:96%;margin:40px auto;}
.ourpro-wrap{display:flex;flex-wrap:wrap;margin:40px 0 20px -2%;}
.ourpro-item{width:23%;margin:0 0 2% 2%;box-shadow:rgba(60,72,88,0.2) 0px 0px 3px 0px;background:#fff;padding:20px 25px;border-radius:4px;transition:all .5s;position:relative;}
.ourpro-item:hover{box-shadow:0 5px 20px 0 rgba(0,0,0,.2);transform:translateY(-10px);}
.ourpro-item-header{display:flex;border-bottom:1px solid #f3f3f3;padding-bottom:10px;margin-bottom:10px;}
.ourpro-item-header .icon{text-align:center;}
.ourpro-item-header .icon i{font-size:40px;color:#087FEC;}
.ourpro-item-header .body{margin-left:10px;}
.ourpro-item-header .body .name{font-size:20px;color:#161c2d;font-weight:bold;margin:10px 0 0px 0;}
.ourpro-item-header .body .desc{tfont-size:16px;line-height:30px;color:#8492a6;}
.ourpro-item-body{margin:20px 0;display:none;}
.ourpro-item-body ul{list-style:none;}
.ourpro-item-body ul li{line-height:30px;color:#666;font-size:15px;}
.ourpro-item-body ul li i{color:#2469F6;margin-right:10px;}
.ourpro-item-footer{text-align:center;margin:30px 0 10px -10px;display:flex;}
.ourpro-item-footer a{display:block;border:1px solid #e3e3e3;color:#666;flex:1;padding:10px 4px;font-size:15px;border-radius:2px;margin-left:10px;}
.ourpro-item-footer a.active{border-color:#2469F6;color:#2469F6;}
.ourpro-item-footer a:hover{border-color:#2469F6;color:#2469F6;}

.ourtemp{background:linear-gradient(180deg,#F1F8FE 1%,#F9FBFF 100%);padding:40px 30px;}
.ourcase{background:#fff;padding:40px 30px;}
.ourcase .ourtemp-item{overflow:hidden;}
.ourtemp-wrap{display:flex;flex-wrap:wrap;margin:40px 0 0 -2%;}
.ourtemp-item{width:23%;margin:0 0 2% 2%;box-shadow:0 0 12px rgba(0, 60, 179, .12);background:#fff;position:relative;border-radius:12px;transition:all .6s cubic-bezier(.215,.61,.355,1) 0s;padding:12px;}
.ourtemp-item .image{position:relative;overflow:hidden;padding-bottom:75%;}
.ourtemp-item .image img{width:100%;position:absolute;}
.ourtemp-item .preview{position:absolute;left:0;right:0;bottom:-200%;display:flex;align-items:center;text-align:center;background:rgba(0,0,0,.6);justify-content:center;z-index:1;transition:all .6s ease 0s;opacity:0;}
.ourtemp-item .preview a{display:block;padding:10px 40px;text-align:center;border:1px solid #fff;color:#fff;border-radius:30px;}
.ourtemp-item .info{padding:10px 10px 15px 10px;border-top:0px solid #f3f3f3;}
.ourtemp-item .info .name{height:30px;line-height:30px;color:#333;font-size:16px;}
.ourtemp-item .info .desc{height:30px;line-height:30px;color:#6b7799;font-size:14px;position:relative;}
.ourtemp-item .info .desc em{position:absolute;right:0;bottom:0px;background:#fff;border:1px solid #eaeaea;padding:0 6px;font-size:14px;color:#333;border-radius:4px;}
.ourtemp-item .info .desc em.blue{border-color:#2469F6;color:#2469F6;}
.ourtemp-item .info .desc em.green{border-color:#19BE6B;color:#19BE6B;}
.ourtemp-item .info .desc em.red{border-color:#296bef;color:#296bef;}
.ourtemp-item .info .desc em.yellow{border-color:#F37B1D;color:#F37B1D;}
.ourtemp-item:hover{box-shadow:0 5px 20px 0 rgba(0,0,0,.2);transform:translateY(-10px);}
.ourtemp-item:hover .preview{top:0;bottom:0;opacity:1;}

.outart{max-width:96%;background:#fff;margin:40px auto;}
.outart-wrap{display:flex;flex-wrap:wrap;margin:40px 0 20px -2%;}
.outart-item{width:23%;margin:0 0 2% 2%;background:#fff;border:1px solid #f3f3f3;box-shadow:0 0 30px rgba(83,115,252,0.13);border-radius:0 0 16px 16px;}
.outart-item .title{padding:15px 30px;background:#296BEF;color:#fff;font-size:22px;}
.outart-item .list{background:#fff;padding:20px 30px 0 30px;}
.outart-item .list ul{list-style:none;}
.outart-item .list ul li{border-bottom:1px solid #f3f3f3;margin-bottom:15px;padding-bottom:10px;transition:all 0.5s ease;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.outart-item .list ul li i{color:#098df9;margin-right:10px;}
.outart-item .list ul li span{background:#cdcdcd;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:50%;margin-right:15px;font-size:14px;}


.outart-item .list ul li:hover{transform:translateX(10px);}
.outart-item .list ul li:nth-child(1) span{background:#FD754D;}
.outart-item .list ul li:nth-child(2) span{background:#FF9F26;}
.outart-item .list ul li:nth-child(3) span{background:#FFC11A;}
.outart-item .more{margin:30px 20px;}
.outart-item .more a{display:block;text-align:center;border:1px solid #296BEF;background:#fff;color:#296BEF;padding:10px 0;border-radius:40px;}
.outart-item .more a i{color:#296BEF;}
.outart-item .more a:hover{background:#098df9;border-color:#098df9;color:#fff;}
.outart-item .more a:hover i{color:#fff;}





.subnav_warp{background:#fff;border-top:1px solid #e0eaff;border-bottom:1px solid #e0eaff;box-shadow:0 3px 16px rgba(0,116,255,.05);text-align:center;}
.subnav{max-width:1480px;margin:0 auto;}
.subnav a{display:inline-block;padding:25px 20px;font-size:18px;position:relative;}
.subnav a.active{color:#296bef;font-weight:bold;}
.subnav a.active:after{content:'';display:block;background:#296bef;width:50px;height:6px;border-radius:3px;position:absolute;bottom:0;left:50%;transform:translateX(-50%);}

.subnav.red a.active{color:#FA563A;}
.subnav.red a.active:after{background:#FA563A}

.page_warp{background:#fff;padding:30px 0;}
.page_body{max-width:1480px;margin:0 auto;padding:0 20px;}
.page_body .title{text-align:center;}
.page_body .title h1{font-size:24px;color:#0c0c0c;margin:10px 0 30px 0;}
.page_body .info{background:#fff;border:1px solid #e0eaff;box-shadow:0 3px 16px rgba(0,116,255,.05);text-align:center;padding:15px 0;margin-bottom:30px;}
.page_body .info span{color:#999;}
.page_body h2{font-size:24px;color:#0c0c0c;margin:30px 0;position:relative;margin-bottom:15px;}
.page_body h3{margin:30px 24px 20px 24px;border-bottom:1px solid #f3f3f3;padding-bottom:15px;font-weight:500;}
.page_body h3:hover{border-bottom-color:#eee;font-weight:bold;}
.page_body p{font-size:16px;line-height:2;margin-bottom:20px;color:#666;}
.page_body p img{max-width:100%;}


.main-pro{display:flex;margin:40px 0 0 -2%;flex-wrap:wrap;}
.main-pro-item{width:48%;margin:0 0 2% 2%;box-shadow:rgba(60,72,88,0.25) 0px 0px 3px 0px;background:#fff;padding:35px 40px;border-radius:4px;transition:all 0.5s ease;}
.main-pro-header{display:flex;align-items:center;}
.main-pro-header .icon{text-align:center;width:70px;line-height:70px;height:70px;background:#888;border-radius:50%;margin-left:10px;}
.main-pro-header .icon i{font-size:40px;color:#fff;}
.main-pro-header .body{margin-left:30px;}
.main-pro-header .body .name{font-size:22px;line-height:40px;color:#161c2d;font-weight:bold;margin:0;}
.main-pro-header .body .desc{tfont-size:16px;color:#8492a6;}
.main-pro-footer{margin:30px 0 10px 0;display:block;}
.main-pro-footer div{display:flex;align-items:center;margin:0 0 0 2%;}
.main-pro-footer a{display:block;border:1px solid #e3e3e3;color:#555;flex:1;margin-right:2%;padding:12px 0;text-align:center;border-radius:4px;}
.main-pro-footer a.active{border-color:#098df9;}
.main-pro-footer a:hover{border-color:#2469F6;color:#2469F6;}
.main-pro-item:hover{box-shadow:0 5px 20px 0 rgba(0,0,0,.2);transform:translateY(-10px);}
.main-pro-item:hover .icon i:before{animation:zoomOut .5s ease-in both;}
.main-pro-item.bg01 .icon{background:#098df9;}
.main-pro-item.bg01 .main-pro-footer a:hover{border-color:#098df9;color:#098df9;}
.main-pro-item.bg01 .main-pro-footer a.active{border-color:#098df9;color:#098df9;}
.main-pro-item.bg02 .icon{background:#FA563A}
.main-pro-item.bg02 .main-pro-footer a:hover{border-color:#FA563A;color:#FA563A;}
.main-pro-item.bg02 .main-pro-footer a.active{border-color:#FA563A;color:#FA563A;}
.main-pro-item.bg03 .icon{background:#07C160;}
.main-pro-item.bg03 .main-pro-footer a:hover{border-color:#07C160;color:#07C160;}
.main-pro-item.bg03 .main-pro-footer a.active{border-color:#07C160;color:#07C160;}
.main-pro-item.bg04 .icon{background:#F37B1D;}
.main-pro-item.bg04 .main-pro-footer a:hover{border-color:#F37B1D;color:#F37B1D;}
.main-pro-item.bg04 .main-pro-footer a.active{border-color:#F37B1D;color:#F37B1D;}

.contact-box{display:flex;margin:40px 0 0 -2%;flex-wrap:wrap;}
.contact-item{width:23%;margin:0 0 2% 2%;box-shadow:0 1px 10px rgba(51,51,51,0.05);border:1px solid #F0F5FC;background:#fff;display:block;padding:60px 0;border-radius:10px;position:relative;overflow:hidden;text-align:center;}
.contact-item .tiptext{position:absolute;bottom:-50px;left:0;right:0;text-align:center;line-height:50px;height:50px;transition:all 0.3s ease;font-size:16px;background:rgba(83,115,252,0.05);}
.contact-item:hover{box-shadow:0 0 10px rgba(83,115,252,0.13);}
.contact-item:hover .tiptext{bottom:0px;}
.contact-item a{text-align:center;color:#333;font-size:16px;transition:all .3s ease 0s;line-height:30px;display:block;}
.contact-item:hover a{transform:translate3d(0,-10px,0);}
.contact-item a span{display:block;width:80px;line-height:80px;border-radius:50%;text-align:center;background:#f3f3f3;font-size:36px;margin-bottom:10px;margin:0 auto 10px auto;}
.contact-item a span.blue{background:#E7F7FE;color:#2469F6;}
.contact-item a span.red{background:#FFF1F8;color:#296bef;}
.contact-item a span.green{background:#E6F8E6;color:#19BE6B;}
.contact-item a span.yellow{background:#FFF3EA;color:#F37B1D;}
.contact-item a em{color:#999;}

.pay-way{display:flex;margin:40px 0 0 -2%;flex-wrap:wrap;}
.pay-way-item{width:31.33%;margin:0 0 2% 2%;box-shadow:rgba(60,72,88,0.3) 0px 0px 3px 0px;background:#fff;border-radius:10px;transition:all 0.5s ease;position:relative;}
.pay-way-item:hover{box-shadow:0 30px 60px 0 rgba(0,0,0,.12);transform:translateY(-10px);}
.pay-way-header{padding:30px 40px;/*overflow:hidden;*/position:relative;}
.pay-way-header .name{font-size:24px;line-height:60px;}
.pay-way-header .desc{font-size:16px;color:#666;line-height:30px;height:50px;}
.pay-way-header .ring{top:-4px;right:-4px;}
.pay-way-header .ring span{background:#F93;}
.pay-way-image{padding:40px 30px 30px 30px;text-align:center;}
.pay-way-image img{width:100%;border-radius:16px;border:1px solid #eaeaea;}
.pay-way-item.alipay{background:#00A0E8;}
.pay-way-item.alipay .name{color:#fff;}
.pay-way-item.alipay .desc{color:#fff;}
.pay-way-item.weixin{background:#22AB39;}
.pay-way-item.weixin .name{color:#fff;}
.pay-way-item.weixin .desc{color:#fff;}
.pay-way-blank{padding:30px 40px;line-height:30px;border-top:1px solid #F2F2F4;border-bottom:1px solid #F2F2F4;margin:30px 0;}
.pay-way-blank span{display:block;min-width:80px;color:#333;font-weight:bold;}
.pay-way-item .tips{position:absolute;top:135px;left:0;right:-6px;text-align:center;background:rgba(255,255,255,0.95);color:#333;padding:15px 20px;border-right:6px solid #22AB39;border-top:1px solid #f9f9f9;border-bottom:1px solid #f9f9f9;}
.pay-way-item .tips span{color:#296bef;margin:0 5px;}
.pay-way-remark{padding:0 30px;padding-bottom:30px;}
.pay-way-remark strong{color:#296bef;}

.faq .ui-collapse-menu-title{background:#F5F9FF;border-bottom:0;border-radius:6px;padding:6px 15px 6px 30px;margin-top:15px;border:1px solid #E9EEFB;}
.faq .ui-collapse-menu-title i{color:#999;}
.faq .ui-collapse-menu-title a{color:#333;}
.faq .ui-collapse-menu-title.active{background:#F5F9FF;border-radius:6px 6px 0 0;}
.faq .ui-collapse-menu-title.active a{color:#296BEF;font-weight:bold;}
.faq .ui-collapse-menu-title.active i{color:#296BEF;}
.faq .ui-collapse-menu-body{background:#fff;border-radius:0 0 6px 6px;padding:20px 30px;border:1px solid #E9EEFB;border-top:0;}
.faq .ui-collapse-menu-body .ui-row{justify-content:space-between;}
.faq .ui-collapse-menu-body .tips{margin:3px 15px 0 0;}
.faq .ui-collapse-menu-body .tips span{background:#296BEF;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:50%;}
.faq .ui-collapse-menu-body .ans{flex:1;overflow:hidden;line-height:30px;}
.faq .ui-collapse-menu-body .ans span{color:#999}
.faq .ui-collapse-menu-body .ans a{color:#296bef}
.faq .ui-collapse-menu-body .ans a:hover{text-decoration:underline;}

.news-list{max-width:100%;margin:40px auto;padding:0 0px;min-height:300px;}
.news-list-item{display:flex;align-items:center;border-bottom:1px solid #f3f3f3;padding:30px 200px 40px 200px;background-color:transparent;}
.news-list-item .left{min-width:60px;text-align:right;font-size:16px;color:#929292;padding-right:60px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;font-family:verdana;}
.news-list-item .left span{font-size:60px;display:block;color:#aaa;line-height:normal;font-family:Politica;}
.news-list-item .center{flex:1;overflow:hidden;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
.news-list-item .center .title{font-size:20px;font-weight:bold;line-height:50px;}
.news-list-item .center .desc{font-size:15px;color:#6a6a6a;line-height:25px;height:50px;}
.news-list-item .right{min-width:60px;padding-left:20px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;opacity:0;padding-top:30px}
.news-list-item .right i{font-size:30px;}
.news-list-item:hover{background:#00C0FF;pacity:1;}
.news-list-item:hover .left{transform:translateX(-50px);color:#fff;}
.news-list-item:hover .left span{color:#fff;}
.news-list-item:hover .center{transform:translateX(-50px);}
.news-list-item:hover .center .title{color:#fff;}
.news-list-item:hover .center .desc{color:#fff;}
.news-list-item:hover .right{transform:translateX(10px);opacity:1;}
.news-list-item:hover .right i{color:#fff;}

.services{max-width:1480px;margin:40px auto;padding:0 20px;}
.services-wrap{display:flex;flex-wrap:wrap;margin:1px 0 0 1px;}
.services-item{width:25%;margin:-1px 0 0 -1px;border:1px solid #eaeaea;position:relative;padding:30px 40px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
.services-item:nth-child(1){border-top-left-radius:16px;}
.services-item:nth-child(4){border-top-right-radius:16px;}
.services-item:nth-child(5){border-bottom-left-radius:16px;}
.services-item:last-child{border-bottom-right-radius:16px;}
.services-biz .services-item:nth-child(1){border-bottom-left-radius:16px;}
.services-item .body{padding-bottom:36%;}
.services-item .title{font-size:22px;line-height:30px;}
.services-item .title span{color:#296bef;margin:0 5px;}
.services-item .desc{line-height:26px;margin-top:20px;color:#666;}
.services-item .price{position:absolute;bottom:30px;left:40px;color:#999;}
.services-item .price span{color:#333;font-size:36px;display:inline-block;margin-right:10px;}
.services-biz .price span{color:#296bef;}
.services-item:hover{background:#296bef;border-color:#296bef;}
.services-item:hover .title{color:#fff;}
.services-item:hover .title span{color:#fff;}
.services-item:hover .desc{color:#fff;}
.services-item:hover .price{color:#fff;}
.services-item:hover .price span{color:#fff;}
.services.red .services-item:hover{background:#FA563A;border-color:#FA563A;}

.service .huodong-list-box .item-image{padding-bottom:56.2%;}


.hotfaq{max-width:1480px;background:#fff;margin:20px auto;padding:0 20px;}
.hotfaq_list{display:flex;flex-wrap:wrap;margin:40px 0 20px -2%;}
.hotfaq_list_item{width:31.33%;margin:0 0 2% 2%;}
.hotfaq_list_item_body{margin:5px;padding:35px 40px;box-shadow:0px 2px 32px 0px rgba(0,0,0,0.1);border-radius:10px;transition:all 0.36s ease;background:#fff;}
.hotfaq_list_item_body .text{margin-bottom:10px;}
.hotfaq_list_item_body .text h4{font-size:20px;}
.hotfaq_list_item_body a{font-size:16px;font-family:Verdana, Geneva, sans-serif;display:block;line-height:60px;border-bottom:1px solid #f3f3f3;}
.hotfaq_list_item_body a span{background:#CDCDCD;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:50%;margin-right:15px;font-size:14px;}
.hotfaq_list_item_body a:nth-child(1) span{background:#FD754D;}
.hotfaq_list_item_body a:nth-child(2) span{background:#FF9F26;}


.help{max-width:1480px;background:#fff;margin:50px auto;padding:0 20px;}
.help-wrap{display:flex;flex-wrap:wrap;margin:40px 0 20px -2%;}
.help-item{width:31.33%;margin:0 0 2% 2%;background:#fff;border:1px solid #f3f3f3;box-shadow:0 0 30px rgba(83,115,252,0.13);border-radius:16px;}
.help-item .title{padding:18px 35px;border-bottom:1px solid #e0eaff;font-size:22px;background:#296BEF;color:#fff;position:relative;}
.help-item .body{padding:10px 20px 30px 20px;}
.help-item .body li span{background:#CDCDCD;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:50%;margin-right:15px;font-size:14px;}
.help-item .body li:nth-child(1) span{background:#FD754D;}
.help-item .body li:nth-child(2) span{background:#FF9F26;}
.help-item .body li:nth-child(3) span{background:#FFC11A;}
.help-item .more{margin:20px 20px 0 20px;}
.help-item .more a{display:block;text-align:center;border:1px solid #296BEF;background:#fff;color:#296BEF;padding:10px 0;border-radius:40px;}
.help-item .more a i{color:#296BEF;}
.help-item .more a:hover{background:#098df9;border-color:#098df9;color:#fff;}
.help-item .more a:hover i{color:#fff;}


.toutiao_list{display:flex;flex-wrap:wrap;margin:0 -14px;}
.toutiao_list_item{/* width:33.33%; */margin:0 0 28px 0;position:relative;padding:0 14px;}
.toutiao_list_item_body{background:#fff;padding:15px 20px;border:0.8px solid #f3f3f3;border-radius:8px;}
.toutiao_list_item_body:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.toutiao_list_item .ui-ring{right:10px;}
.toutiao_list_wrap{display:flex;flex-wrap:wrap;padding:10px 10px 10px 0;}
.toutiao_list_icon{width:66px;height:66px;margin-right:20px;}
.toutiao_list_icon img{width:100%;height:100%;border-radius:5px;border:1px solid #eaeaea;padding:3px;}
.toutiao_list_body{flex:1;overflow:hidden;}
.toutiao_list_body .name{font-size:16px;padding-top:5px;}
.toutiao_list_body .intro{font-size:14px;line-height:24px;margin-top:8px;color:#a1abc2;}
.toutiao_list_foot{border-top:1px solid #f3f3f3;margin-top:10px;padding-top:15px;display:flex;justify-content:space-between;align-items:center}
.toutiao_list_foot .price{color:#296bef;font-size:14px;}
.toutiao_list_foot .free{color:#999;font-size:14px;}
.toutiao_list_foot .user{vertical-align:middle;}
.toutiao_list_foot .user a{color:#b5b5b5;}
.toutiao_list_foot .user a:hover{color:#296bef;}
.toutiao_list_foot .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}



.huodong-list{margin:0;min-height:300px;}
.huodong-list-wrap{margin:0 -14px;display:flex;flex-wrap:wrap;padding:5px 0;}
.huodong-list-item{width: 33%;padding:0 14px;margin-bottom:28px;position:relative;}
.huodong-list-item .ui-ring{right:12px;}
.huodong-list-item .ui-ring.left{left:10px;}

.huodong-list-box{background: var(--el-menu-item-hover-fill);border-radius:8px;border:0.8px solid transparent;}
.huodong-list-box:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.huodong-list-box .item-image{position:relative;overflow:hidden;padding-bottom:56.2%;background:#F8FBFF;border-radius:8px 8px 0 0;}
.huodong-list-box .item-image img{width:100%;min-height:100%;height:auto;position:absolute;z-index:1;object-fit:cover;border-radius:8px 8px 0 0;}
.huodong-list-box .item-image svg{width:100%;height:100%;text-anchor:middle;border-radius:8px 8px 0 0;font-size:20px;position:absolute;}
.huodong-list-box .item-text{padding:20px 20px;}
.huodong-list-box .item-text a{font-size:18px;font-weight:bold;line-height:40px;height:50px;display:block;}
.huodong-list-box .item-text p{color:#a1abc2;line-height:24px;height:50px;font-size:14px;overflow:hidden;}
.huodong-list-box .item-footer{padding:0 20px 20px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 8px 8px;min-height:55px;}
.huodong-list-box .item-footer .user{vertical-align:middle;}
.huodong-list-box .item-footer .user a{color:#b5b5b5;}
.huodong-list-box .item-footer .user a:hover{color:#296bef;}
.huodong-list-box .item-footer .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.huodong-list-box .item-footer .info{text-align:right;}
.huodong-list-box .item-footer .info em{border:1px solid #296bef;color:#296bef;padding:6px;font-size:14px;border-radius:4px;background:#fff;}
.huodong-list-box .item-footer .price{color:#296bef;font-size:16px;}
.huodong-list-box .item-footer .price del{color:#999;font-size:12px;margin-left:5px;}
.huodong-list-box .item-footer .price span{color:#999;font-size:15px;margin-left:5px;}

.pro-list .huodong-list-box .item-image{padding-bottom:100%;}



.container{display:flex;flex-wrap:wrap;justify-content:space-between;}
.container .container-left{width:1075px;}
.container .container-right{width:345px;margin-left:20px;}
.box{padding:20px 25px;box-shadow:0px 0px 30px rgba(28,31,33,0.1);background:#fff;border-radius:14px;position:relative;}





.activity-list{margin:0;min-height:300px;}
.activity-list-wrap{margin:0 -14px;display:flex;flex-wrap:wrap;padding:5px 0;}
.activity-list-item{width:33.33%;padding:0 14px;margin-bottom:28px;position:relative;}
.activity-list-item .ui-ring{right:12px;}
.activity-list-item .ui-ring.left{left:10px;}

.activity-list-box{background:#fff;border-radius:8px;border:0.8px solid transparent;}
.activity-list-box:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.activity-list-box .item-image{position:relative;overflow:hidden;padding-bottom:56.2%;background:#F8FBFF;border-radius:8px 8px 0 0;}
.activity-list-box .item-image img{width:100%;min-height:100%;height:auto;position:absolute;z-index:1;/*object-fit:cover;*/border-radius:8px 8px 0 0;}
.activity-list-box .item-image svg{width:100%;height:100%;text-anchor:middle;border-radius:8px 8px 0 0;font-size:20px;position:absolute;}
.activity-list-box .item-text{padding:20px 20px;}
.activity-list-box .item-text a{font-size:18px;font-weight:bold;line-height:40px;height:50px;display:block;}
.activity-list-box .item-text p{color:#a1abc2;line-height:24px;height:50px;font-size:14px;overflow:hidden;}
.activity-list-box .item-footer{padding:0 20px 20px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 8px 8px;min-height:55px;}
.activity-list-box .item-footer .user{vertical-align:middle;}
.activity-list-box .item-footer .user a{color:#b5b5b5;}
.activity-list-box .item-footer .user a:hover{color:#296bef;}
.activity-list-box .item-footer .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.activity-list-box .item-footer .info{text-align:right;}
.activity-list-box .item-footer .info em{border:1px solid #296bef;color:#296bef;padding:6px;font-size:14px;border-radius:4px;background:#fff;}
.activity-list-box .item-footer .price{color:#296bef;font-size:16px;}
.activity-list-box .item-footer .price del{color:#999;font-size:12px;margin-left:5px;}
.activity-list-box .item-footer .price span{color:#999;font-size:15px;margin-left:5px;}

.pro-list .activity-list-box .item-image{padding-bottom:100%;}

.service .activity-list-box .item-image{padding-bottom:56.2%;}



.wuliu-list{margin:0;min-height:300px;}
.wuliu-list-wrap{margin:0 -14px;display:flex;flex-wrap:wrap;padding:5px 0;}
.wuliu-list-item{width:25%;padding:0 14px;margin-bottom:28px;position:relative;}
.wuliu-list-item .ui-ring{right:12px;}
.wuliu-list-item .ui-ring.left{left:10px;}

.wuliu-list-box{background:#fff;border-radius:8px;border:0.8px solid transparent;padding:4px;border:1px solid #eee;}
.wuliu-list-box:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.wuliu-list-box .item-image{position:relative;overflow:hidden;padding-bottom:56.2%;background:#F8FBFF;border-radius:8px 8px 0 0;}
.wuliu-list-box .item-image img{width:100%;min-height:100%;height:auto;position:absolute;z-index:1;/*object-fit:cover;*/border-radius:8px 8px 0 0;}
.wuliu-list-box .item-image svg{width:100%;height:100%;text-anchor:middle;border-radius:8px 8px 0 0;font-size:20px;position:absolute;}
.wuliu-list-box .item-text{padding:20px 20px;}
.wuliu-list-box .item-text a{font-size:18px;font-weight:bold;line-height:40px;height:50px;display:block;}
.wuliu-list-box .item-text p{color:#a1abc2;line-height:24px;height:50px;font-size:14px;overflow:hidden;}
.wuliu-list-box .item-footer{padding:0 20px 20px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 8px 8px;min-height:55px;}
.wuliu-list-box .item-footer .user{vertical-align:middle;}
.wuliu-list-box .item-footer .user a{color:#b5b5b5;}
.wuliu-list-box .item-footer .user a:hover{color:#FF6000;}
.wuliu-list-box .item-footer .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.wuliu-list-box .item-footer .info{text-align:right;}
.wuliu-list-box .item-footer .info em{border:1px solid #ED4014;color:#ed4014;padding:6px;font-size:14px;border-radius:4px;background:#fff;}
.wuliu-list-box .item-footer .price{color:#f30;font-size:16px;}
.wuliu-list-box .item-footer .price del{color:#999;font-size:12px;margin-left:5px;}
.wuliu-list-box .item-footer .price span{color:#999;font-size:15px;margin-left:5px;}

.pro-list .wuliu-list-box .item-image{padding-bottom:100%;}
.service .wuliu-list-box .item-image{padding-bottom:69%;}

.wuliushow{display:flex;justify-content:space-between;position:relative;}
.wuliushow-left{flex:1;padding-right:30px;}
.wuliushow-right{width:300px;}
.wuliubox{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);min-height:300px;background:#fff;border-radius:10px;}

.wuliushow-head{margin:0;}
.wuliu-action-left{line-height:50px;display:flex;}


.wuliu-box{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);background:#fff;border-radius:10px;padding:25px 30px;position:relative;}
.lastbox{position:sticky;top:80px;}
.wuliu-name{font-size:20px;color:#000;margin-bottom:10px;border-bottom:1px solid #eee;padding-bottom:20px;position:relative;overflow:hidden;}
.wuliu-name:after{content:'';display:block;bottom:0;width:60px;height:2px;background:#FF525F;position:absolute;}
.wuliu-name a{float:right;font-size:15px;margin-top:10px;}
.wuliu-name a span{color:#f30;margin-right:5px;}
.wuliu-author{display:flex;align-items:center;margin-top:20px;}
.wuliu-author .face{width:70px;margin-right:20px;}
.wuliu-author .face img{width:100%;height:100%;border-radius:50%;}
.wuliu-author .body{}
.wuliu-author .body .name{font-size:16px;}
.wuliu-author .body .star{color:#F90;}

.pro-list .wuliu-list-box .item-image{padding-bottom:100%;}
.service .wuliu-list-box .item-image{padding-bottom:69%;}





.ziliao-list{margin:0;min-height:300px;}
.ziliao-list-wrap{margin:0 -14px;display:flex;flex-wrap:wrap;padding:5px 0;}
.ziliao-list-item{width:25%;padding:0 14px;margin-bottom:28px;position:relative;}
.ziliao-list-item .ui-ring{right:12px;}
.ziliao-list-item .ui-ring.left{left:10px;}

.ziliao-list-box{background: var(--el-menu-item-hover-fill);border-radius:8px;border:0.8px solid transparent;}
.ziliao-list-box:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.ziliao-list-box .item-image{position:relative;overflow:hidden;padding-bottom:56.2%;background: var(--el-fill-color-light);border-radius:8px 8px 0 0;}
.ziliao-list-box .item-image img{width:100%;min-height:100%;height:auto;position:absolute;z-index:1;/*object-fit:cover;*/border-radius:8px 8px 0 0;}
.ziliao-list-box .item-image svg{width:100%;height:100%;text-anchor:middle;border-radius:8px 8px 0 0;font-size:20px;position:absolute;}
.ziliao-list-box .item-text{padding:20px 20px;}
.ziliao-list-box .item-text a{font-size:18px;font-weight:bold;line-height:40px;height:50px;display:block;}
.ziliao-list-box .item-text p{color:#a1abc2;line-height:24px;height:50px;font-size:14px;overflow:hidden;}
.ziliao-list-box .item-footer{padding:0 20px 20px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 8px 8px;min-height:55px;}
.ziliao-list-box .item-footer .user{vertical-align:middle;}
.ziliao-list-box .item-footer .user a{color:#b5b5b5;}
.ziliao-list-box .item-footer .user a:hover{color:#296bef;}
.ziliao-list-box .item-footer .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.ziliao-list-box .item-footer .info{text-align:right;}
.ziliao-list-box .item-footer .info em{border:1px solid #296bef;color:#296bef;padding:6px;font-size:14px;border-radius:4px;background:#fff;}
.ziliao-list-box .item-footer .price{color:#296bef;font-size:16px;}
.ziliao-list-box .item-footer .price del{color:#999;font-size:12px;margin-left:5px;}
.ziliao-list-box .item-footer .price span{color:#999;font-size:15px;margin-left:5px;}

.pro-list .ziliao-list-box .item-image{padding-bottom:100%;}
.service .ziliao-list-box .item-image{padding-bottom:56.2%;}










.bbs{max-width:100%;background:#fff;margin:40px auto;display:flex;background:#fff;}
.bbs_show{max-width:1480px;/* padding:0 20px; */}
.bbs_left{width:250px;padding:20px 0;border-right:0;border-radius:16px 0 0 16px;border:1px solid #e0eaff;box-shadow:rgba(0,116,255,.15) 0 0 3px 0;background:#F9FBFF;}
.bbs_left .title{font-size:18px;font-weight:bold;padding-left:30px;}
.bbs_left ul{list-style:none;margin:20px 0;}
.bbs_left ul li{line-height:50px;margin-bottom:1px;}
.bbs_left ul li a{color:#76838f;display:block;font-weight:500;padding-left:30px;border:1px solid transparent;border-left:0;border-right:0;position:relative;}
.bbs_left ul li a i{font-size:22px;margin-right:15px;}
.bbs_left ul li a i:before{top:-1px;position:relative;}
.bbs_left ul li a:hover{color:#2469F6;}
.bbs_left ul li a:hover i{color:#2469F6;}
.bbs_left ul li.active a{color:#2469F6;background:#fff;border-color:#e0eaff;}
.bbs_left ul li.active a:after{position:absolute;content:"";width:2px;right:-2px;top:0;bottom:0;background:#fff;}
.bbs_left ul li.active a:hover i{color:#2469F6;}
.bbs_mid{flex:1;overflow:hidden;padding:25px 40px;border:1px solid #f3f3f3;border-right:0;border-left:0;border-radius:0 0 0 0;box-shadow:rgba(60,72,88,0.15) 0px 0px 3px 0px;}
.bbs_mid .ui-tabs-nav li a{padding:0 15px 10px 15px;}
.bbs_mid .ui-tabs-nav li.active a{color:#2469F6;}
.bbs_mid .ui-tabs-nav li.active{border-bottom:2px solid #2469F6;margin-bottom:-1px;}
.bbs .temp_show_right{width:320px;}
.bbs .temp_show_right:after{display:none;}
.bbs .temp_show_intro .after{background:#2469F6;border-color:#2469F6;color:#fff;padding:0 15px;}
.bbs .temp_show_intro ul{margin-bottom:30px;}
.bbs .temp_show_intro ul li{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:6px 0;}
.bbs .temp_show_intro ul li span{background:#cdcdcd;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:50%;margin-right:15px;font-size:14px;}
.bbs .temp_show_intro ul li:nth-child(1) span{background:#FD754D;}
.bbs .temp_show_intro ul li:nth-child(2) span{background:#FF9F26;}
.bbs .temp_show_intro ul li:nth-child(3) span{background:#FFC11A;}

.bbs-topic{margin:0;}
.bbs-topic-item{display:flex;justify-content:space-between;padding:20px 0px;border-bottom:1px solid #f3f3f3;}
.bbs-topic-item .face{width:50px;height:50px;margin-top:5px;}
.bbs-topic-item .face img{width:100%;height:100%;border-radius:100%;}
.bbs-topic-item .body{flex:1;overflow:hidden;padding:0 20px;}
.bbs-topic-item .body .title{line-height:30px;padding-bottom:6px;}
.bbs-topic-item .body em{border:1px solid #ED4014;color:#ED4014;border-radius:4px;padding:2px 4px;margin-left:8px;font-style:normal;}
.bbs-topic-item .body span{border:1px solid #1889FF;color:#1889FF;border-radius:4px;padding:2px 4px;margin-left:8px;font-style:normal;}
.bbs-topic-item .body span.bg-01{border-color:#2DB7F5;color:#2DB7F5;}
.bbs-topic-item .body span.bg-03{border-color:#19BE6B;color:#19BE6B;}
.bbs-topic-item .body a{color:#666;}
.bbs-topic-item .body a:hover{color:#333;}
.bbs-topic-item .body .desc{color:#a3afb7;}
.bbs-topic-item .other{min-width:100px;padding-left:20px;font-size:12px;color:#333;}
.bbs-topic-item .other i{color:#ccc;margin-right:5px;}
.bbs-topic-item:hover{background:#F9FBFF;}

blockquote{background:#F7FAFF;/* padding:25px 30px; *//* border:1px solid #E0EAFF; */border-left:5px solid #1890FF;/* margin:30px 0; */font-size: 10px;}
blockquote .title{font-size:24px;font-weight:bold;margin-bottom:15px;color:#1890FF;}
blockquote .desc{font-size:16px;}





.temp_show{max-width:1480px;background:#fff;margin:40px auto;display:flex;background:#fff;}
.temp_show_left{flex:1;/*overflow:hidden;*/padding:30px 40px;border:1px solid #f3f3f3;border-right:0;border-radius:16px 0 0 16px;box-shadow:rgba(60,72,88,0.15) 0px 0px 3px 0px;}
.temp_show_left .title{border-bottom:1px solid #f3f3f3;padding-bottom:25px;margin-bottom:30px;display:flex;}
.temp_show_left .title h1{font-size:24px;display:block;flex:1;overflow:hidden;padding-right:10px;}
.temp_show_left .title .state{min-width:80px;text-align:right;}
.temp_show_left .info{text-align:left;padding:15px 0;margin-bottom:30px;background:#F5F9FF;position:relative;color:#2469F6;}
.temp_show_left .info:before{display:block;content:"";position:absolute;left:-46px;top:0;bottom:0;width:46px;border-left:6px solid #2469F6;background:#F5F9FF}
.temp_show_left .info span{color:#999;}
.temp_show_left .body{line-height:24px;}
.temp_show_left .body p{margin-bottom:20px;line-height:30px;}
.temp_show_left .body p:last-child{margin-bottom:0;}
.temp_show_left .body img{max-width:100%;}
.temp_show_left .body a{color:#2469F6;}
.temp_show_left .body a:hover{color:#f30;}
.temp_show_left .body h2{font-size:24px;color:#0c0c0c;margin:30px 0 25px 0;position:relative;}
.temp_show_left hr{margin-bottom:30px;}

.temp_show_right{width:380px;border:1px solid #e0eaff;box-shadow:rgba(0,116,255,.15) 0 0 3px 0;position:relative;background:#F9FBFF;border-radius:0 16px 16px 0;}
.temp_show_right .title{font-size:18px;}
.temp_show_right:after{position:absolute;content:"";left:-11px;top:90px;transform:rotate(-45deg);position:absolute;display:inline-block;overflow:hidden;width:20px;height:20px;background:#F9FBFF;border:1px solid #e0eaff;border-right:0;border-bottom:0;}
.temp_show_base{border-bottom:1px solid #e0eaff;padding:30px 20px;}
.temp_show_base .face{text-align:center;}
.temp_show_base .face img{width:100px;height:100px;border-radius:50%;border:1px solid #e0eaff;padding:4px;}
.temp_show_base .name{text-align:center;font-size:18px;margin:15px;}
.temp_show_base .name a{color:#06F}
.temp_show_base .name a:hover{color:#f30}
.temp_show_base ul{list-style:none;display:flex;margin:20px 0;}
.temp_show_base ul li{flex:1;text-align:center;color:#909399;position:relative;}
.temp_show_base ul li a{color:#909399;}
.temp_show_base ul li a:hover{color:#f30;}
.temp_show_base ul li em{display:block;color:#303133;font-size:20px;}
.temp_show_base ul li:before{position:absolute;content:"";right:0;top:50%;transform:translateY(-50%);height:40px;width:1px;border-left:1px solid #e0eaff;}
.temp_show_base ul li:last-child:before{display:none;}
.temp_show_intro{padding:25px 25px 0 25px;}
.temp_show_intro .title{font-size:18px;font-weight:bold;margin-bottom:20px;}
.temp_show_intro .title.red{color:#f30;}
.temp_show_intro ul{list-style:none;}
.temp_show_intro ul li{color:#303133;line-height:34px;}
.temp_show_intro ul li span{display:inline-block;color:#909399;}
.temp_show_intro ul li em{color:#f30;font-size:18px;}
.temp_show_intro .desc{line-height:30px;padding-bottom:30px;}
.temp_show_intro:last-child{margin-bottom:30px;}

.temp_show_nav ul{list-style:none;margin:20px 0;}
.temp_show_nav ul li{line-height:50px;margin-bottom:1px;}
.temp_show_nav ul li a{color:#76838f;display:block;font-weight:500;padding-left:30px;border:1px solid transparent;border-left:0;border-right:0;position:relative;}
.temp_show_nav ul li a i{font-size:22px;margin-right:15px;}
.temp_show_nav ul li a i:before{top:-1px;position:relative;}
.temp_show_nav ul li a:hover{color:#2469F6;}
.temp_show_nav ul li a:hover i{color:#2469F6;}
.temp_show_nav ul li.active a{color:#2469F6;background:#fff;border-color:#e0eaff;}
.temp_show_nav ul li.active a:after{position:absolute;content:"";width:2px;left:-2px;top:0;bottom:0;background:#fff;}
.temp_show_nav ul li.active a:hover i{color:#2469F6;}




.baogao_list{display:flex;flex-wrap:wrap;margin:0 -14px;}
.baogao_list_item{/* width:33.33%; */margin:0 0 28px 0;position:relative;/* padding:0 14px; */}
.baogao_list_item_body{background:#fff;padding:15px 20px;border:0.8px solid #f3f3f3;border-radius:8px;}
.baogao_list_item_body:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.baogao_list_item .ui-ring{right:10px;}
.baogao_list_wrap{display:flex;flex-wrap:wrap;padding:10px 10px 10px 0;}
.baogao_list_icon{width: 350px;height: 200px;margin-right:20px;}
.baogao_list_icon img{width:100%;height:100%;border-radius:5px;border:1px solid #eaeaea;padding:3px;}
.baogao_list_body{flex:1;overflow:hidden;}
.baogao_list_body .name{font-size:16px;font-weight:bold;padding-top:5px;}
.baogao_list_body .intro{font-size:14px;line-height:24px;margin-top:8px;color:#a1abc2;}
.baogao_list_foot{border-top:1px solid #f3f3f3;margin-top:10px;padding-top:15px;display:flex;justify-content:space-between;align-items:center}
.baogao_list_foot .price{color:#f30;font-size:14px;}
.baogao_list_foot .free{color:#999;font-size:14px;}
.baogao_list_foot .user{vertical-align:middle;}
.baogao_list_foot .user a{color:#b5b5b5;}
.baogao_list_foot .user a:hover{color:#FF6000;}
.baogao_list_foot .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}






.huopan-list{margin:0;min-height:300px;}
.huopan-list-wrap{margin:0 -14px;display:flex;flex-wrap:wrap;padding:5px 0;}
.huopan-list-item{width:25%;padding:0 14px;margin-bottom:28px;position:relative;}
.huopan-list-item .ui-ring{right:12px;}
.huopan-list-item .ui-ring.left{left:10px;}

.huopan-list-box{background:#fff;border-radius:8px;border:0.8px solid transparent;}
.huopan-list-box:hover{box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-color:#e1e6f0;}
.huopan-list-box .item-image{position:relative;overflow:hidden;padding-bottom:100%;background:#F8FBFF;border-radius:8px 8px 0 0;}
.huopan-list-box .item-image img{width:100%;min-height:100%;height:auto;position:absolute;z-index:1;/*object-fit:cover;*/border-radius:8px 8px 0 0;}
.huopan-list-box .item-image svg{width:100%;height:100%;text-anchor:middle;border-radius:8px 8px 0 0;font-size:20px;position:absolute;}
.huopan-list-box .item-text{padding:20px 20px;}
.huopan-list-box .item-text a{font-size:18px;font-weight:bold;line-height:40px;height:50px;display:block;}
.huopan-list-box .item-text p{color:#a1abc2;line-height:24px;height:50px;font-size:14px;overflow:hidden;}
.huopan-list-box .item-footer{padding:0 20px 20px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 8px 8px;min-height:55px;}
.huopan-list-box .item-footer .user{vertical-align:middle;}
.huopan-list-box .item-footer .user a{color:#b5b5b5;}
.huopan-list-box .item-footer .user a:hover{color:#296bef;}
.huopan-list-box .item-footer .user img{width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.huopan-list-box .item-footer .info{text-align:right;}
.huopan-list-box .item-footer .info em{border:1px solid #296bef;color:#296bef;padding:6px;font-size:14px;border-radius:4px;background:#fff;}
.huopan-list-box .item-footer .price{color:#296bef;font-size:16px;}
.huopan-list-box .item-footer .price del{color:#999;font-size:12px;margin-left:5px;}
.huopan-list-box .item-footer .price span{color:#999;font-size:15px;margin-left:5px;}

.huopan-list .huopan-list-box .item-image{padding-bottom:100%;}


.huopanshow{display:flex;margin:30px 0;box-shadow:0 0 .8px rgba(38,45,61,.08),0 .8px 3.2px rgba(38,45,61,.04),0 4.8px 9.6px rgba(38,45,61,.14);border-radius:10px;background:#fff;padding:30px;position:relative;}
.huopanshow-left{width:400px;margin-right:30px;}
.huopanshow-left img{width:100%;}
.huopanshow-right{flex:1;overflow:hidden;}
.huopan-name{font-size:24px;color:#262d3d;font-weight:bold;}
.huopan-intro{color:#a1abc2;padding:15px 0;}
.huopan-price{display:flex;align-items:center;justify-content:space-between;background:#F8F8F8;padding:15px 30px;margin-bottom:20px;}
.huopan-price .price{color:#296bef;font-size:24px;}
.huopan-price .price del{color:#777;font-size:15px;margin-left:10px;}
.huopan-price em{border:1px solid #2E95FF;color:#2E95FF;padding:4px;border-radius:4px;}

.huopan-ul{list-style:none;padding:0 10px;clear:both;}
.huopan-ul li{display:flex;padding:6px 0;align-items:center;}
.huopan-ul li em{color:#a1abc2;width:80px;display:block;font-size:15px;}

.huopan-action{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.huopan-action-left{padding-left:65px;line-height:40px;display:flex;}
.huopan-action-left button{display:block;padding:0 15px;color:#2E95FF;text-align:center;border:0;overflow:hidden;font-size:15px;margin-right:15px;border-radius:4px;}
.huopan-action-left button.red{background:#ff4837;color:#fff;}
.huopan-action-left button.blue{background:#2E95FF;color:#fff;}
.huopan-action-left button.yellow{background:#ff8037;color:#fff;}
.huopan-action-left button.green{background:#19BE6B;color:#fff;}

.huopan-action-url{line-height:40px;display:flex;}
.huopan-action-url a{display:block;padding:0 15px;color:#2E95FF;text-align:center;border:0;overflow:hidden;font-size:15px;margin-right:15px;border-radius:4px;}
.huopan-action-url a.red{background:#ff4837;color:#fff;}
.huopan-action-url a.blue{background:#2E95FF;color:#fff;}
.huopan-action-url a.yellow{background:#ff8037;color:#fff;}
.huopan-action-url a.green{background:#19BE6B;color:#fff;}
.huopan-action-right{text-align:right;}


.like-news{background:#fff;border-radius:10px;position:relative;border:1px solid #E6E8EB;box-shadow:0px 2px 10px rgba(0,0,0,0.08)}
.like-news .name{padding:15px 20px 0 20px;}
.like-news .name h2{font-size:20px;font-weight:bold;position:relative;}
.like-news .name h2:before{position:absolute;bottom:-10px;left:0;width:40px;height:6px;background:#296bef;border-radius:3px;opacity:.85;content:"";display:block;}
.like-news .list{padding:5px 15px 25px 15px;}
.like-news .list a em{background:#999;color:#fff;height:26px;line-height:26px;width:26px;border-radius:50%;font-family:verdana;margin-right:10px;font-size:12px;display:inline-block;text-align:center;}
.like-news .list li:nth-child(1) a em{background:#1C65F6;}




.ui-show-title{padding:15px 20px;}
.ui-show-title h1{font-size:32px;color:#1c1f21;line-height:40px;margin:8px 0;}
.ui-show-title div{font-size:14px;color:#999;margin:10px 0;}
.ui-show-image .ui-col-3{flex:0 0 241px;max-width:241px;margin:0 20px 20px 0;}
.ui-show-image .ui-col-3:nth-child(4n){margin-right:0;}
.ui-show-image .ui-card{border:0;border-radius:8px;}
.ui-show-image .ui-card-image{height:220px;overflow:hidden;border-radius:8px;}
.ui-show-image .ui-card-image img{border-radius:8px;height:100%;transition:all .5s;}
.ui-show-image .ui-card-image:hover img{transform:scale(1.4);}
.ui-show-body{padding:15px 20px;line-height:36px;font-size:16px;word-break:break-all;}
.ui-show-body *{max-width:100%;}
.ui-show-body p{font-size:16px;line-height:30px;margin:0 0 20px 0;}
.ui-show-tags{}
.ui-show-tags a{padding:0 10px;line-height:35px;}
.ui-show-share{text-align:right;color:#999;}
.ui-show-share a{display:inline-block;width:40px;line-height:35px;height:40px;border-radius:50%;border:1px solid #eaeaea;margin-left:10px;text-align:center;}
.ui-show-share a i{font-size:22px;}
.ui-show-share a:nth-child(1){color:#1890FF;}
.ui-show-share a:hover:nth-child(1){border-color:#1890FF;}
.ui-show-share a:nth-child(2){color:#ED4014;}
.ui-show-share a:hover:nth-child(2){border-color:#ED4014;}
.ui-show-share a:nth-child(3){color:#19BE6B;}
.ui-show-share a:hover:nth-child(3){border-color:#19BE6B;}




.price-wrap{display:flex;margin:60px 0 0 0;flex-wrap:wrap;width:102%;}
.price-item{width:23%;margin:0 2% 2% 0;box-shadow:rgba(60,72,88,0.2) 0px 0px 3px 0px;background:#fff;padding:30px;border-radius:10px;transition:all 0.5s ease;position:relative;}
.price-item .name{text-align:left;}
.price-item .name span{background:#f5f9ff;border:1px solid #e0eaff;padding:10px 30px;display:inline-block;color:#2F55D4;border-radius:40px;}
.price-item .price{color:#999;padding:15px 0;}
.price-item .price span{font-size:36px;color:#333;}
.price-item .price del{color:#f30;margin-left:15px;}
.price-item .desc{color:#333;line-height:24px;}
.price-item ul{margin:40px 0 80px 0;list-style:none;border-top:1px solid #E9ECEF;padding-top:30px;}
.price-item ul li{line-height:40px;height:40px;color:#8492a6;}
.price-item ul li i{color:#2F55D4;margin-right:10px;font-size:24px;}
.price-item a.action{margin:25px 0 0 0;border:1px solid #2f55d4;background:#2f55d4;position:absolute;bottom:30px;right:30px;left:30px;color:#fff;text-align:center;padding:13px 0;border-radius:6px;box-shadow:rgba(47,85,212,0.3) 0px 3px 5px 0px}
.price-item a.action:hover{background:#2443AC;border-color:#2443AC;}
.price-item:hover{transform:scale(1.06);box-shadow:0 5px 13px rgba(60,72,88,0.2)}
.price-item:hover .price span{color:#f30;}
.price-item .link{text-align:center;margin:40px 0 0 -10px;display:flex;}
.price-item .link a{display:block;border:1px solid #e3e3e3;color:#666;flex:1;padding:10px 0;font-size:15px;border-radius:2px;margin-left:10px;}
.price-item .link a.active{border-color:#2469F6;color:#2469F6;}
.price-item .link a:hover{border-color:#2469F6;color:#2469F6;}
.price-item .close{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;text-align:center;background:rgba(0,0,0,.6);justify-content:center;z-index:1;border-radius:10px;}
.price-item .close em{display:block;padding:10px 40px;text-align:center;border:1px solid #fff;color:#fff;border-radius:30px;}

.price-wrap.red .price-item .name span{background:#FFF9F9;border-color:#FFD8D1;color:#FA563A;}
.price-wrap.red .price-item ul li i{color:#FA563A;}
.price-wrap.red .price-item a.action{border:1px solid #FA563A;background:#FA563A;box-shadow:rgba(250,86,58,0.3) 0px 3px 5px 0px}
.price-wrap.red .price-item a.action:hover{background:#EF4225;border-color:#EF4225;}
.price-wrap.green .price-item .name span{background:#F4FDF8;border-color:#C2F1D8;color:#07C160;}
.price-wrap.green .price-item ul li i{color:#07C160;}
.price-wrap.green .price-item a.action{border:1px solid #07C160;background:#07C160;box-shadow:rgba(7,193,96,0.3) 0px 3px 5px 0px}
.price-wrap.green .price-item a.action:hover{background:#02AC53;border-color:#02AC53;}
.price-wrap.red .link a.active{border-color:#EF4225;color:#EF4225;}
.price-wrap.red .link a:hover{border-color:#EF4225;color:#EF4225;}
.price-wrap.green .link a.active{border-color:#02AC53;color:#02AC53;}
.price-wrap.green .link a:hover{border-color:#02AC53;color:#02AC53;}






/* ===== 社区问答 - 现代 UI 设计系统 ===== */
:root {
    --bbs-primary: #4f46e5;
    --bbs-primary-hover: #4338ca;
    --bbs-primary-light: #eef2ff;
    --bbs-accent: #06b6d4;
    --bbs-success: #10b981;
    --bbs-success-light: #ecfdf5;
    --bbs-warning: #f59e0b;
    --bbs-danger: #ef4444;
    --bbs-text: #1e293b;
    --bbs-text-secondary: #64748b;
    --bbs-text-muted: #94a3b8;
    --bbs-border: #e2e8f0;
    --bbs-bg: #f8fafc;
    --bbs-card: #ffffff;
    --bbs-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --bbs-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --bbs-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --bbs-radius: 12px;
    --bbs-radius-sm: 8px;
    --bbs-max-width: 1100px;
    --bbs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--bbs-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--bbs-text);
    background: var(--el-color-white);
    -webkit-font-smoothing: antialiased;
}



.bbs-page { min-height: 100vh; display: flex; flex-direction: column; }
.bbs-main { flex: 1; }

/* ===== Header ===== */
.bbs-header {
    background: var(--bbs-card);
    border-bottom: 1px solid var(--bbs-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.92);
}

.bbs-header__inner {
    max-width: var(--bbs-max-width);
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.bbs-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bbs-text);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}
.bbs-logo:hover { color: var(--bbs-primary); }
.bbs-logo__icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--bbs-primary), var(--bbs-accent));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.bbs-logo__icon svg { width: 20px; height: 20px; }
.bbs-logo__img {
    width: auto;
    height: 36px;
    max-width: 160px;
    object-fit: contain;
    flex-shrink: 0;
}

.bbs-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    overflow: visible;
}
.bbs-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: var(--bbs-radius-sm);
    color: var(--bbs-text-secondary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
}
.bbs-nav__link:hover { background: var(--bbs-primary-light); color: var(--bbs-primary); }
.bbs-nav__link.is-active { background: var(--bbs-primary-light); color: var(--bbs-primary); }

/* 带子栏目的导航项 */
.bbs-nav__item {
    position: relative;
}
.bbs-nav__item > .bbs-nav__link { cursor: pointer; }
.bbs-nav__item.is-active > .bbs-nav__link,
.bbs-nav__item:hover > .bbs-nav__link {
    background: var(--bbs-primary-light);
    color: var(--bbs-primary);
}
.bbs-nav__arrow {
    width: 14px;
    height: 14px;
    opacity: 0.5;
    transition: transform 0.2s;
}
.bbs-nav__item:hover .bbs-nav__arrow { transform: rotate(180deg); opacity: 1; }

.bbs-nav__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    padding: 6px;
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius-sm);
    box-shadow: var(--bbs-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s;
    z-index: 200;
}
.bbs-nav__item:hover .bbs-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bbs-nav__sub-link {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--bbs-text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}
.bbs-nav__sub-link:hover {
    background: var(--bbs-primary-light);
    color: var(--bbs-primary);
}
.bbs-nav__sub-link.is-active {
    background: var(--bbs-primary-light);
    color: var(--bbs-primary);
    font-weight: 600;
}

/* 顶部工具栏：搜索 + 用户 + 提问 */
.bbs-header__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

/* 搜索框 */
.bbs-search-form {
    position: relative;
    display: flex;
    align-items: center;
}
.bbs-search-form__icon {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    color: var(--bbs-text-muted);
    pointer-events: none;
}
.bbs-search-form__input {
    width: 180px;
    padding: 7px 12px 7px 32px;
    border: 1px solid var(--bbs-border);
    border-radius: 20px;
    font-size: 13px;
    background: var(--bbs-bg);
    color: var(--bbs-text);
    outline: none;
    transition: all 0.2s;
}
.bbs-search-form__input:focus {
    width: 220px;
    border-color: var(--bbs-primary);
    background: var(--bbs-card);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.bbs-search-form__input::placeholder { color: var(--bbs-text-muted); }

/* 用户区域 */
.bbs-user { flex-shrink: 0; }
.bbs-user__guest {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bbs-user__link {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbs-text-secondary);
    border-radius: var(--bbs-radius-sm);
    transition: all 0.2s;
}
.bbs-user__link:hover { color: var(--bbs-primary); background: var(--bbs-primary-light); }
.bbs-user__link--primary {
    background: var(--bbs-primary-light);
    color: var(--bbs-primary);
}
.bbs-user__link--primary:hover { background: var(--bbs-primary); color: #fff; }

.bbs-user__login {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}
.bbs-user__login:hover { background: var(--bbs-bg); }
.bbs-user__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--bbs-text);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bbs-user__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 120px;
    padding: 6px;
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius-sm);
    box-shadow: var(--bbs-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s;
    z-index: 200;
}
.bbs-user__login:hover .bbs-user__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bbs-user__dropdown a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--bbs-text-secondary);
}
.bbs-user__dropdown a:hover {
    background: var(--bbs-primary-light);
    color: var(--bbs-primary);
}

.bbs-header__post { flex-shrink: 0; }

/* 移动端搜索与用户 */
.bbs-mobile-search {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bbs-border);
}
.bbs-mobile-search__input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius-sm);
    font-size: 14px;
}
.bbs-mobile-user {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bbs-border);
}

/* 搜索页 */
.bbs-search-page__head { margin-bottom: 20px; }
.bbs-search-page__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px;
}
.bbs-search-page__count {
    font-size: 14px;
    color: var(--bbs-text-muted);
    margin: 0;
}
.bbs-search-page__count strong { color: var(--bbs-primary); }
.bbs-search-page__form { margin-bottom: 28px; }
.bbs-search-page__input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 16px;
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius);
    box-shadow: var(--bbs-shadow);
}
.bbs-search-page__input-wrap svg {
    width: 20px;
    height: 20px;
    color: var(--bbs-text-muted);
    flex-shrink: 0;
}
.bbs-search-page__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
    color: var(--bbs-text);
}
.bbs-search-page__input::placeholder { color: var(--bbs-text-muted); }

.bbs-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius-sm);
    cursor: pointer;
}
.bbs-menu-toggle span {
    display: block;
    height: 2px;
    background: var(--bbs-text);
    border-radius: 1px;
    transition: all 0.3s;
}
.bbs-menu-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.bbs-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.bbs-menu-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.bbs-mobile-nav {
    display: none;
    flex-direction: column;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--bbs-border);
    background: var(--bbs-card);
}
.bbs-mobile-nav.is-open { display: flex; }
.bbs-mobile-nav__link {
    padding: 12px 0;
    color: var(--bbs-text-secondary);
    font-size: 15px;
    border-bottom: 1px solid var(--bbs-border);
}
.bbs-mobile-nav__link--accent { color: var(--bbs-primary); font-weight: 600; }

.bbs-mobile-nav__group { border-bottom: 1px solid var(--bbs-border); }
.bbs-mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bbs-mobile-nav__head .bbs-mobile-nav__link {
    flex: 1;
    border-bottom: none;
}
.bbs-mobile-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    color: var(--bbs-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.bbs-mobile-nav__toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}
.bbs-mobile-nav__group.is-open .bbs-mobile-nav__toggle svg { transform: rotate(180deg); }
.bbs-mobile-nav__sub {
    display: none;
    padding: 0 0 8px 16px;
    background: var(--bbs-bg);
}
.bbs-mobile-nav__group.is-open .bbs-mobile-nav__sub { display: block; }
.bbs-mobile-nav__sublink {
    display: block;
    padding: 10px 12px;
    color: var(--bbs-text-secondary);
    font-size: 14px;
    border-radius: var(--bbs-radius-sm);
}
.bbs-mobile-nav__sublink.is-active,
.bbs-mobile-nav__sublink:hover {
    color: var(--bbs-primary);
    background: var(--bbs-primary-light);
}
.bbs-mobile-nav__link.is-active { color: var(--bbs-primary); font-weight: 600; }

/* ===== Buttons ===== */
.bbs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--bbs-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    line-height: 1.4;
}
.bbs-btn svg { width: 16px; height: 16px; }
.bbs-btn--primary {
    background: linear-gradient(135deg, var(--bbs-primary), #6366f1);
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}
.bbs-btn--primary:hover {
    background: linear-gradient(135deg, var(--bbs-primary-hover), #4f46e5);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}
.bbs-btn--outline {
    background: var(--bbs-card);
    color: var(--bbs-text-secondary);
    border: 1px solid var(--bbs-border);
}
.bbs-btn--outline:hover { border-color: var(--bbs-primary); color: var(--bbs-primary); background: var(--bbs-primary-light); }
.bbs-btn--sm { padding: 8px 16px; font-size: 13px; }
.bbs-btn--lg { padding: 14px 28px; font-size: 15px; }

/* ===== Layout ===== */
.bbs-container {
    max-width: var(--bbs-max-width);
    margin: 0 auto;
    padding: 24px 20px 48px;
}

.bbs-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}
.bbs-layout__main { min-width: 0; }
.bbs-layout__side { position: sticky; top: 88px; }

/* ===== Hero ===== */
.bbs-hero {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
    border-radius: var(--bbs-radius);
    padding: 48px 40px;
    margin-bottom: 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.bbs-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.bbs-hero__content { position: relative; z-index: 1; max-width: 560px; }
.bbs-hero__title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.bbs-hero__desc {
    font-size: 16px;
    opacity: 0.9;
    margin: 0 0 28px;
    line-height: 1.7;
}
.bbs-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bbs-hero .bbs-btn--primary {
    background: #fff;
    color: var(--bbs-primary);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.bbs-hero .bbs-btn--primary:hover { background: #f8fafc; color: var(--bbs-primary-hover); transform: translateY(-2px); }
.bbs-hero .bbs-btn--outline {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
    backdrop-filter: blur(4px);
}
.bbs-hero .bbs-btn--outline:hover { background: rgba(255,255,255,0.25); color: #fff; border-color: #fff; }

/* ===== Section ===== */
.bbs-section { margin-bottom: 24px; }
.bbs-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.bbs-section__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--bbs-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.bbs-section__title::before {
    content: '';
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, var(--bbs-primary), var(--bbs-accent));
    border-radius: 2px;
}

/* ===== Category Tags ===== */
.bbs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bbs-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: 20px;
    color: var(--bbs-text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.bbs-tag:hover {
    background: var(--bbs-primary-light);
    border-color: var(--bbs-primary);
    color: var(--bbs-primary);
    transform: translateY(-1px);
    box-shadow: var(--bbs-shadow);
}
.bbs-tag.is-active {
    background: var(--bbs-primary);
    border-color: var(--bbs-primary);
    color: #fff;
}

/* ===== Topic Card ===== */
.bbs-card {
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius);
    box-shadow: var(--bbs-shadow);
    overflow: hidden;
}
.bbs-topic-list { display: flex; flex-direction: column; gap: 12px; }

.bbs-topic-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius);
    transition: all 0.25s;
    cursor: pointer;
}
.bbs-topic-card:hover {
    border-color: #c7d2fe;
    box-shadow: var(--bbs-shadow-md);
    transform: translateY(-2px);
}
.bbs-topic-card__stats {
    flex-shrink: 0;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 8px;
    background: var(--bbs-bg);
    border-radius: var(--bbs-radius-sm);
    text-align: center;
}
.bbs-topic-card__stats-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--bbs-primary);
    line-height: 1;
}
.bbs-topic-card__stats-label {
    font-size: 11px;
    color: var(--bbs-text-muted);
    font-weight: 500;
}
.bbs-topic-card__body { flex: 1; min-width: 0; }
.bbs-topic-card__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.5;
}
.bbs-topic-card__title a {
    color: var(--bbs-text);
    text-decoration: none;
}
.bbs-topic-card__title a:hover { color: var(--bbs-primary); }
.bbs-topic-card__excerpt {
    font-size: 14px;
    color: var(--bbs-text-secondary);
    margin: 0 0 12px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bbs-topic-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--bbs-text-muted);
}
.bbs-topic-card__author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--bbs-text-secondary);
}
.bbs-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bbs-primary), var(--bbs-accent));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bbs-avatar--lg { width: 40px; height: 40px; font-size: 16px; }

.bbs-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.bbs-badge--success { background: var(--bbs-success-light); color: var(--bbs-success); }
.bbs-badge--cat { background: var(--bbs-primary-light); color: var(--bbs-primary); }

/* ===== Sidebar Widget ===== */
.bbs-widget {
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--bbs-shadow);
}
.bbs-widget__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--bbs-text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bbs-border);
}
.bbs-widget__list { list-style: none; margin: 0; padding: 0; }
.bbs-widget__list li { margin-bottom: 4px; }
.bbs-widget__list a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--bbs-radius-sm);
    color: var(--bbs-text-secondary);
    font-size: 14px;
    transition: all 0.2s;
}
.bbs-widget__list a:hover { background: var(--bbs-primary-light); color: var(--bbs-primary); }

.bbs-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.bbs-stat-item {
    text-align: center;
    padding: 14px 8px;
    background: var(--bbs-bg);
    border-radius: var(--bbs-radius-sm);
}
.bbs-stat-item__num {
    font-size: 24px;
    font-weight: 800;
    color: var(--bbs-primary);
    line-height: 1;
}
.bbs-stat-item__label {
    font-size: 12px;
    color: var(--bbs-text-muted);
    margin-top: 4px;
}

/* ===== Breadcrumb ===== */
.bbs-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--bbs-text-muted);
    margin-bottom: 20px;
}
.bbs-breadcrumb a { color: var(--bbs-text-secondary); }
.bbs-breadcrumb a:hover { color: var(--bbs-primary); }
.bbs-breadcrumb__sep { color: var(--bbs-border); }

/* ===== Page Header ===== */
.bbs-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}
.bbs-page-header__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: var(--bbs-text);
}

/* ===== Question Detail ===== */
.bbs-question {
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius);
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: var(--bbs-shadow);
}
.bbs-question__head {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.bbs-question__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.4;
    color: var(--bbs-text);
    letter-spacing: -0.01em;
}
.bbs-question__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--bbs-text-muted);
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bbs-border);
}
.bbs-question__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bbs-question__meta-item svg { width: 14px; height: 14px; opacity: 0.6; }
.bbs-question__admin {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.bbs-topic-edit,
.bbs-topic-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: transparent;
    border: 1px solid var(--bbs-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--bbs-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.bbs-topic-edit:hover {
    border-color: var(--bbs-primary);
    color: var(--bbs-primary);
    background: var(--bbs-primary-light);
}
.bbs-topic-status:hover {
    border-color: var(--bbs-warning);
    color: var(--bbs-warning);
    background: #fffbeb;
}
.bbs-badge--closed {
    background: #fef3c7;
    color: #b45309;
}
.bbs-topic-edit-panel {
    margin-top: 16px;
    padding: 16px;
    background: var(--bbs-bg);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius-sm);
}
.bbs-topic-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.bbs-topic-edit-save,
.bbs-topic-edit-cancel {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid var(--bbs-border);
    background: var(--bbs-card);
    color: var(--bbs-text-secondary);
}
.bbs-topic-edit-save {
    background: var(--bbs-primary);
    border-color: var(--bbs-primary);
    color: #fff;
}
.bbs-topic-edit-save:hover { background: var(--bbs-primary-hover); }
.bbs-topic-edit-cancel:hover {
    border-color: var(--bbs-text-muted);
    color: var(--bbs-text);
}
.bbs-topic-closed-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--bbs-text-muted);
    font-size: 15px;
}
.bbs-topic-closed-tip svg {
    width: 22px;
    height: 22px;
    color: var(--bbs-warning);
    flex-shrink: 0;
}
.bbs-form-panel--closed {
    background: var(--bbs-bg);
    border-style: dashed;
}
.bbs-form-panel--login {
    background: var(--bbs-bg);
    border-style: dashed;
}
.bbs-form-panel--login .bbs-form-actions {
    padding-top: 16px;
}
.bbs-question__content {
    font-size: 15px;
    line-height: 1.85;
    color: var(--bbs-text);
    overflow-x: auto;
}
.bbs-question__content img { max-width: 100%; border-radius: var(--bbs-radius-sm); }
.bbs-question__content p { margin: 0 0 12px; }

/* ===== Rich content (editor output) ===== */
.bbs-question__content ul,
.bbs-question__content ol,
.bbs-reply-card__content ul,
.bbs-reply-card__content ol {
    padding-left: 2em;
    margin: 12px 0;
}
.bbs-question__content li,
.bbs-reply-card__content li {
    margin: 4px 0;
}
.bbs-question__content table,
.bbs-reply-card__content table {
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--bbs-card);
}
.bbs-question__content table.table,
.bbs-reply-card__content table.table,
.bbs-question__content table.table-bordered,
.bbs-reply-card__content table.table-bordered {
    border: 1px solid var(--bbs-border);
}
.bbs-question__content table td,
.bbs-question__content table th,
.bbs-reply-card__content table td,
.bbs-reply-card__content table th {
    border: 1px solid var(--bbs-border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}
.bbs-question__content table th,
.bbs-reply-card__content table th {
    background: var(--bbs-bg);
    font-weight: 600;
    color: var(--bbs-text);
}
.bbs-question__content table tbody tr:nth-child(even),
.bbs-reply-card__content table tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.6);
}
.bbs-question__content blockquote,
.bbs-reply-card__content blockquote {
    margin: 12px 0;
    padding: 10px 16px;
    border-left: 4px solid var(--bbs-primary);
    background: var(--bbs-bg);
    color: var(--bbs-text-secondary);
}
.bbs-question__content pre,
.bbs-reply-card__content pre {
    margin: 12px 0;
    padding: 12px;
    background: var(--bbs-bg);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius-sm);
    overflow-x: auto;
    line-height: 1.6;
    font-size: 13px;
}
.bbs-question__content hr,
.bbs-reply-card__content hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid var(--bbs-border);
}

/* ===== Replies ===== */
.bbs-replies { margin-bottom: 24px; }
.bbs-replies__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.bbs-replies__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.bbs-replies__count {
    font-size: 14px;
    color: var(--bbs-text-muted);
    font-weight: 400;
}

.bbs-reply-list { display: flex; flex-direction: column; gap: 12px; }
.bbs-reply-card {
    display: flex;
    gap: 14px;
    padding: 20px;
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius);
    position: relative;
    transition: box-shadow 0.2s;
}
.bbs-reply-card:hover { box-shadow: var(--bbs-shadow); }
.bbs-reply-card.is-best {
    border-color: #6ee7b7;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
}
.bbs-reply-card__best {
    position: absolute;
    top: 0;
    right: 16px;
    background: var(--bbs-success);
    color: #fff;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 0 0 8px 8px;
    letter-spacing: 0.5px;
}
.bbs-reply-card__side { flex-shrink: 0; }
.bbs-reply-card__body { flex: 1; min-width: 0; }
.bbs-reply-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.bbs-reply-card__floor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    background: var(--bbs-primary-light);
    color: var(--bbs-primary);
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
}
.bbs-reply-card__author { font-weight: 600; font-size: 14px; color: var(--bbs-text); }
.bbs-reply-card__time { font-size: 12px; color: var(--bbs-text-muted); }
.bbs-reply-card__city {
    font-size: 12px;
    color: var(--bbs-text-muted);
    padding: 2px 8px;
    background: var(--bbs-bg);
    border-radius: 4px;
}
.bbs-reply-card__city::before { content: '来自 '; }
.bbs-reply-card__actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--bbs-border);
}
.bbs-reply-to {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--bbs-border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--bbs-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.bbs-reply-to:hover {
    border-color: var(--bbs-primary);
    color: var(--bbs-primary);
    background: var(--bbs-primary-light);
}
.bbs-reply-best,
.bbs-reply-edit,
.bbs-reply-del {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--bbs-border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--bbs-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 6px;
}
.bbs-reply-best:hover {
    border-color: var(--bbs-success);
    color: var(--bbs-success);
    background: var(--bbs-success-light);
}
.bbs-reply-edit:hover {
    border-color: var(--bbs-primary);
    color: var(--bbs-primary);
    background: var(--bbs-primary-light);
}
.bbs-reply-del:hover {
    border-color: var(--bbs-danger);
    color: var(--bbs-danger);
    background: #fef2f2;
}
.bbs-reply-edit-panel {
    margin-top: 10px;
    padding: 12px;
    background: var(--bbs-bg);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius-sm);
}
.bbs-reply-edit-input {
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius-sm);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    color: var(--bbs-text);
    background: var(--bbs-card);
}
.bbs-reply-edit-input:focus {
    outline: none;
    border-color: var(--bbs-primary);
    box-shadow: 0 0 0 3px var(--bbs-primary-light);
}
.bbs-reply-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.bbs-reply-edit-save,
.bbs-reply-edit-cancel {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid var(--bbs-border);
    background: var(--bbs-card);
    color: var(--bbs-text-secondary);
}
.bbs-reply-edit-save {
    background: var(--bbs-primary);
    border-color: var(--bbs-primary);
    color: #fff;
}
.bbs-reply-edit-save:hover { background: var(--bbs-primary-hover); }
.bbs-reply-edit-cancel:hover {
    border-color: var(--bbs-text-muted);
    color: var(--bbs-text);
}
.bbs-reply-children {
    margin: 8px 0 0 52px;
    padding-left: 16px;
    border-left: 2px solid var(--bbs-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bbs-reply-card--child {
    padding: 14px 16px;
    background: var(--bbs-bg);
    border-style: dashed;
}
.bbs-reply-target {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--bbs-primary-light);
    border: 1px solid #c7d2fe;
    border-radius: var(--bbs-radius-sm);
    font-size: 14px;
    color: var(--bbs-text-secondary);
}
.bbs-reply-target strong { color: var(--bbs-primary); }
.bbs-reply-target__cancel {
    margin-left: auto;
    padding: 2px 10px;
    background: transparent;
    border: 1px solid var(--bbs-border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--bbs-text-muted);
    cursor: pointer;
}
.bbs-reply-target__cancel:hover {
    border-color: var(--bbs-danger);
    color: var(--bbs-danger);
}
.bbs-reply-card__content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--bbs-text-secondary);
    overflow-x: auto;
    overflow-wrap: break-word;
    word-break: break-word;
}
.bbs-reply-card__content p { margin: 0 0 8px; }
.bbs-reply-card__content img,
.bbs-reply-card__content video,
.bbs-reply-card__content iframe {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--bbs-radius-sm);
}
.bbs-reply-card__content img {
    display: block;
    margin: 8px 0;
}

.bbs-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--bbs-card);
    border: 1px dashed var(--bbs-border);
    border-radius: var(--bbs-radius);
    color: var(--bbs-text-muted);
}
.bbs-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--bbs-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bbs-text-muted);
}
.bbs-empty__icon svg { width: 28px; height: 28px; }
.bbs-empty__text { font-size: 15px; margin: 0; }

/* ===== Forms ===== */
.bbs-form-panel {
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius);
    padding: 28px;
    box-shadow: var(--bbs-shadow);
}
.bbs-form-panel__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
}
.bbs-form-panel__desc {
    font-size: 14px;
    color: var(--bbs-text-muted);
    margin: 0 0 24px;
}
.bbs-form-group { margin-bottom: 20px; }
.bbs-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbs-text);
}
.bbs-form-group .required { color: var(--bbs-danger); }
.bbs-input, .bbs-select, .bbs-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--bbs-text);
    background: var(--bbs-card);
    transition: all 0.2s;
    outline: none;
}
.bbs-input:focus, .bbs-select:focus, .bbs-textarea:focus {
    border-color: var(--bbs-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.bbs-input::placeholder, .bbs-textarea::placeholder { color: var(--bbs-text-muted); }
.bbs-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.bbs-form-group--editor .note-editor {
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius);
    overflow: hidden;
}
.bbs-form-group--editor .note-toolbar {
    background: var(--bbs-bg-soft);
    border-bottom: 1px solid var(--bbs-border);
}
.bbs-form-group--editor .note-editable {
    min-height: 200px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--bbs-text);
}
.bbs-form-group--editor .dr_ueditor { display: none; }
.bbs-form-actions { display: flex; gap: 12px; align-items: center; padding-top: 4px; }

.bbs-login-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bbs-primary-light);
    border: 1px solid #c7d2fe;
    border-radius: var(--bbs-radius-sm);
    font-size: 14px;
    color: var(--bbs-text);
}
.bbs-login-tip {
    font-size: 12px;
    color: var(--bbs-text-muted);
    margin-left: auto;
}

/* ===== Pagination ===== */
.bbs-pagination {
    display: flex;
    justify-content: center;
    padding: 28px 0 8px;
}
.bbs-pagination .pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
}
.bbs-pagination .pagination > li {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none;
}
.bbs-pagination .pagination > li > a,
.bbs-pagination .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    margin: 0;
    border-radius: var(--bbs-radius-sm);
    font-size: 14px;
    color: var(--bbs-text-secondary);
    border: 1px solid var(--bbs-border);
    background: var(--bbs-card);
    text-decoration: none;
    float: none;
    position: static;
    line-height: 1;
    box-sizing: border-box;
    transition: all 0.2s;
    white-space: nowrap;
}
.bbs-pagination .pagination > li > a:hover,
.bbs-pagination .pagination > li > a:focus {
    z-index: 1;
    border-color: var(--bbs-primary);
    color: var(--bbs-primary);
    background: var(--bbs-primary-light);
}
.bbs-pagination .pagination > .active > a,
.bbs-pagination .pagination > li.active > a,
.bbs-pagination .pagination > .page-active > a,
.bbs-pagination .pagination > li.page-active > a {
    background: var(--bbs-primary);
    border-color: var(--bbs-primary);
    color: #fff !important;
    cursor: default;
    font-weight: 600;
}
.bbs-pagination .pagination > .active > a:hover,
.bbs-pagination .pagination > li.active > a:hover,
.bbs-pagination .pagination > .page-active > a:hover,
.bbs-pagination .pagination > li.page-active > a:hover {
    background: var(--bbs-primary);
    border-color: var(--bbs-primary);
    color: #fff !important;
}
.bbs-pagination .pagination > .disabled > a,
.bbs-pagination .pagination > li.disabled > a,
.bbs-pagination .pagination > .disabled > span,
.bbs-pagination .pagination > li.disabled > span {
    color: var(--bbs-text-muted);
    background: var(--bbs-bg);
    border-color: var(--bbs-border);
    cursor: not-allowed;
    opacity: 0.65;
}
.bbs-pagination .pagination > .disabled > a:hover,
.bbs-pagination .pagination > li.disabled > a:hover {
    color: var(--bbs-text-muted);
    background: var(--bbs-bg);
    border-color: var(--bbs-border);
}

/* ===== Footer ===== */
.bbs-footer {
    background: var(--bbs-card);
    border-top: 1px solid var(--bbs-border);
    margin-top: auto;
}
.bbs-footer__inner {
    max-width: var(--bbs-max-width);
    margin: 0 auto;
    padding: 32px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}
.bbs-footer__brand strong { font-size: 16px; color: var(--bbs-text); }
.bbs-footer__brand p { font-size: 13px; color: var(--bbs-text-muted); margin: 6px 0 0; }
.bbs-footer__links { display: flex; gap: 20px; }
.bbs-footer__links a { font-size: 13px; color: var(--bbs-text-secondary); }
.bbs-footer__links a:hover { color: var(--bbs-primary); }
.bbs-footer__copy {
    text-align: center;
    padding: 16px 20px;
    font-size: 12px;
    color: var(--bbs-text-muted);
    border-top: 1px solid var(--bbs-border);
}

/* ===== Back to top ===== */
.bbs-back-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--bbs-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--bbs-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.3s;
    z-index: 90;
}
.bbs-back-top svg { width: 20px; height: 20px; }
.bbs-back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.bbs-back-top:hover { background: var(--bbs-primary-hover); transform: translateY(-2px); }

/* ===== Toast ===== */
.bbs-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    padding: 12px 24px;
    border-radius: var(--bbs-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: var(--bbs-success);
    box-shadow: var(--bbs-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 200;
    pointer-events: none;
}
.bbs-toast.is-show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.bbs-toast.is-error { background: var(--bbs-danger); }

/* ===== Category Page Banner ===== */
.bbs-cat-banner {
    background: var(--bbs-card);
    border: 1px solid var(--bbs-border);
    border-radius: var(--bbs-radius);
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--bbs-shadow);
}
.bbs-cat-banner__title {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
}
.bbs-cat-banner__desc {
    font-size: 14px;
    color: var(--bbs-text-muted);
    margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .bbs-layout { grid-template-columns: 1fr; }
    .bbs-layout__side { position: static; }
    .bbs-nav { display: none; }
    .bbs-search-form { display: none; }
    .bbs-user { display: none; }
    .bbs-header__post { display: none; }
    .bbs-menu-toggle { display: flex; }
    .bbs-hero { padding: 32px 24px; }
    .bbs-hero__title { font-size: 24px; }
}

@media (max-width: 640px) {
    .bbs-container { padding: 16px 14px 32px; }
    .bbs-topic-card { flex-direction: column; gap: 12px; padding: 16px; }
    .bbs-topic-card__stats {
        flex-direction: row;
        width: auto;
        gap: 16px;
        padding: 8px 12px;
        align-self: flex-start;
    }
    .bbs-question { padding: 20px 16px; }
    .bbs-question__title { font-size: 20px; }
    .bbs-reply-card { flex-direction: column; gap: 10px; }
    .bbs-reply-children { margin-left: 24px; padding-left: 12px; }
    .bbs-form-panel { padding: 20px 16px; }
    .bbs-page-header { flex-direction: column; align-items: flex-start; }
    .bbs-footer__inner { flex-direction: column; }
}







:root {
    --dh-side-w: 220px;
    --dh-bg: #f2f3f5;
    --dh-card: #ffffff;
    --dh-ink: #2c2e33;
    --dh-muted: #8a919f;
    --dh-line: #e6e8eb;
    --dh-accent: #296bef;
    --dh-accent-2: #296bef;
    --dh-blue: #296bef;
    --dh-shadow: 0 4px 16px rgba(36, 41, 51, 0.06);
    --dh-radius: 10px;
    --dh-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body.dh-body {
    margin: 0;
    min-height: 100vh;
    color: var(--dh-ink);
    font-family: var(--dh-font);
    background: var(--dh-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* 左侧栏 */
.dh-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--dh-side-w);
    z-index: 100;
    background: #fff;
    border-right: 1px solid var(--dh-line);
    display: flex;
    flex-direction: column;
    overflow: auto;
    transition: transform .25s ease;
}
.dh-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--dh-line);
    text-decoration: none;
}
.dh-logo img {
    max-width: 100%;
    max-height: 42px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.dh-side-nav {
    padding: 12px 10px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dh-side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #5c636b;
    font-size: 14px;
    font-weight: 500;
    transition: background .18s, color .18s;
}
.dh-side-link i {
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: #9aa1ab;
}
.dh-side-link:hover {
    background: #f5f6f8;
    color: var(--dh-ink);
}
.dh-side-link.is-active {
    background: rgba(241, 64, 75, 0.08);
    color: var(--dh-accent);
}
.dh-side-link.is-active i { color: var(--dh-accent); }

.dh-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 32, 0.35);
    z-index: 90;
}
.dh-overlay.is-open { display: block; }

/* 主区域 */
.dh-shell {
    margin-left: var(--dh-side-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.dh-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: rgba(242, 243, 245, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
}
.dh-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--dh-ink);
    box-shadow: var(--dh-shadow);
    cursor: pointer;
    font-size: 16px;
}
.dh-search {
    flex: 1;
    display: flex;
    align-items: center;
    max-width: 640px;
    height: 44px;
    padding: 0 6px 0 14px;
    background: #fff;
    border: 1px solid var(--dh-line);
    border-radius: 999px;
    box-shadow: var(--dh-shadow);
    transition: border-color .18s, box-shadow .18s;
}
.dh-search:focus-within {
    border-color: rgba(78, 110, 242, 0.45);
    box-shadow: 0 0 0 3px rgba(78, 110, 242, 0.12);
}
.dh-search > i {
    color: #a0a6b1;
    margin-right: 8px;
}
.dh-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--dh-ink);
}
.dh-search button {
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--dh-accent), var(--dh-accent-2));
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .18s, transform .18s;
}
.dh-search button:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.dh-top-home {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: var(--dh-accent);
    text-decoration: none;
    box-shadow: var(--dh-shadow);
}

.dh-main {
    flex: 1;
    padding: 8px 24px 28px;
}

/* 面板与卡片 */
.dh-panel {
    margin-bottom: 18px;
    padding: 18px 18px 8px;
    background: var(--dh-card);
    border-radius: 12px;
    box-shadow: var(--dh-shadow);
    animation: dh-fade 0.45s ease both;
}
@keyframes dh-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.dh-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--dh-line);
}
.dh-panel-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dh-panel-head h2 i { color: var(--dh-accent); }
.dh-panel-head h2 small {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dh-muted);
}
.dh-count { color: var(--dh-muted); font-size: 13px; padding-top: 4px; }
.dh-more {
    color: var(--dh-muted);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}
.dh-more:hover { color: var(--dh-accent); }

.dh-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--dh-muted);
}
.dh-crumb a { text-decoration: none; color: var(--dh-blue); }
.dh-crumb i { font-size: 12px; }

.dh-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 14px;
}
.dh-tabs a {
    text-decoration: none;
    font-size: 13px;
    color: #6b7280;
    background: #f5f6f8;
    border-radius: 999px;
    padding: 5px 12px;
    transition: all .18s;
}
.dh-tabs a:hover,
.dh-tabs a.is-active {
    color: #fff;
    background: var(--dh-accent);
}

.dh-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 10px;
}
.dh-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 14px;
    border-radius: var(--dh-radius);
    background: #f8f9fb;
    text-decoration: none;
    overflow: hidden;
    transition: background .18s, transform .18s, box-shadow .18s;
}
.dh-card:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(36, 41, 51, 0.08);
}
.dh-card-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--dh-line);
}
.dh-card-ico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dh-card-ico.is-letter {
    background: linear-gradient(135deg, #ffe8ea, #fff1f0);
    border-color: transparent;
}
.dh-card-ico em {
    font-style: normal;
    font-weight: 700;
    color: var(--dh-accent);
    font-size: 16px;
}
.dh-card-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dh-card-main strong {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dh-card-main > span {
    font-size: 12px;
    color: var(--dh-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dh-tags { color: #b0b6c0 !important; }
.dh-card-go {
    position: absolute;
    right: 10px;
    top: 10px;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--dh-accent);
    border-radius: 999px;
    padding: 2px 8px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s, transform .18s;
}
.dh-card:hover .dh-card-go {
    opacity: 1;
    transform: none;
}

.dh-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--dh-muted);
}
.dh-empty i {
    display: block;
    font-size: 32px;
    margin-bottom: 12px;
    color: #c5cad3;
}
.dh-btn {
    display: inline-flex;
    margin-top: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--dh-accent);
    color: #fff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

/* 分页 */
.dh-pager { margin: 8px 0 16px; }
.dh-pager ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.dh-pager a,
.dh-pager span {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    background: #f5f6f8;
    color: var(--dh-ink);
}
.dh-pager .active span,
.dh-pager a:hover {
    background: var(--dh-accent);
    color: #fff;
}

/* 页脚 */
.dh-footer {
    padding: 24px;
    text-align: center;
    color: var(--dh-muted);
    font-size: 13px;
}
.dh-footer p { margin: 0 0 6px; }
.dh-footer-logo {
    height: 22px;
    width: auto;
    vertical-align: middle;
    margin-right: 8px;
}
.dh-footer-desc { max-width: 520px; margin-left: auto !important; margin-right: auto !important; }
.dh-footer-copy { opacity: 0.8; }

@media (max-width: 1200px) {
    .dh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dh-sidebar { transform: translateX(-105%); }
    .dh-sidebar.is-open { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.12); }
    .dh-shell { margin-left: 0; }
    .dh-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
    .dh-main { padding: 8px 14px 24px; }
    .dh-topbar { padding: 12px 14px; }
}
@media (max-width: 560px) {
    .dh-grid { grid-template-columns: 1fr; }
    .dh-card-go { display: none; }
    .dh-top-home { display: none; }
}





.side-sec-group {
    margin: 8px 0;  /* 组与组上下加大间距，原来4px改成8px */
}
.dh-sec-toggle {
    display:flex;
    align-items:center;
    padding: 12px 12px; /* 二级栏目上下padding加大，原来8px→12px，变宽松 */
    border-radius: 6px;
}
.dh-sec-toggle.bg-active {
    background-color:#eef2f9;
}
.dh-sec-toggle a {
    flex:1;
    color:inherit;
    text-decoration:none;
}
.dh-arrow-icon {
    width:20px;
    margin-right:6px; /* 箭头和文字拉开一点距离 */
    transition: transform 0.2s;
}
.side-third-wrap {
    display: none;
}
.side-third-wrap.open {
    display:block;
}
.dh-third-link {
    padding:10px 12px 10px 36px !important; /* 三级：上下内边距加大，左边缩进再多一点 */
    opacity:0.9;
}


.side-sec-group {
    margin: 8px 0;
}
.dh-sec-toggle {
    display:flex;
    align-items:center;
    padding: 12px 12px;
    border-radius: 6px;
    cursor:pointer;
}
/* 二级高亮背景 */
.dh-sec-toggle.bg-active {
    background-color:#eef2f9 !important;
}
.dh-sec-toggle a {
    flex:1;
    color:inherit;
    text-decoration:none;
}
.dh-arrow-icon {
    width:20px;
    margin-right:6px;
    transition: transform 0.2s;
}
.side-third-wrap {
    display: none;
}
.side-third-wrap.open {
    display:block;
}
.dh-third-link {
    display:block;
    padding:10px 12px 10px 36px !important;
    opacity:0.9;
    border-radius:6px;
    text-decoration:none;
}
/* 三级选中高亮 */
.dh-third-link.active {
    background:#dce5f3 !important;
    opacity:1;
}
/* 首页选中 */
.dh-side-link.is-active{
    background:#eef2f9;
    display:block;
    padding:10px 12px;
    border-radius:6px;
    text-decoration:none;
}









/* Video CMS — cinematic modern theme */
:root {
  --vd-brand: #296bef;
  --vd-brand-deep: #312e81;
  --vd-accent: #ec4899;
  --vd-bg: #f0f2f8;
  --vd-surface: #ffffff;
  --vd-ink: #0f172a;
  --vd-muted: #64748b;
  --vd-player-bg: #0b0b10;
  --vd-header-h: 72px;
  --vd-container: 1200px;
  --vd-line: rgba(15, 23, 42, 0.08);
  --vd-primary: #296bef;
  --vd-primary-hover: #296bef;
  --vd-accent-soft: rgba(236, 72, 153, 0.12);
  --vd-brand-soft: rgba(79, 70, 229, 0.1);
  --vd-text: var(--vd-ink);
  --vd-text-muted: var(--vd-muted);
  --vd-border: var(--vd-line);
  --vd-radius: 12px;
  --vd-radius-sm: 8px;
  --vd-radius-lg: 16px;
  --vd-radius-xl: 20px;
  --vd-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  --vd-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --vd-shadow-glow: 0 8px 32px rgba(79, 70, 229, 0.22);
  --vd-font: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  --vd-font-display: "PingFang SC", "Microsoft YaHei", sans-serif;
  --vd-ratio-video: 16 / 9;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.vd-body {
  margin: 0;
  font-family: var(--vd-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--vd-text);
  background: var(--vd-bg);
  -webkit-font-smoothing: antialiased;
}


.vd-container {
  width: 100%;
  max-width: var(--vd-container);
  margin: 0 auto;
  padding: 0 20px;
}

.vd-main {
  padding: 28px 0 48px;
  min-height: calc(100vh - var(--vd-header-h) - 120px);
}

/* ========== Header ========== */
.vd-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.vd-header__bar {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border-bottom: 1px solid var(--vd-border);
}

.vd-header.is-scrolled .vd-header__bar {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

.vd-header__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 20px;
  min-height: var(--vd-header-h);
}

.vd-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.vd-logo img {
  height: 42px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.vd-nav {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: 2px;
  min-width: 0;
  justify-content: flex-end;
  margin-left: auto;
  padding: 0;
}

.vd-nav__home,
.vd-nav__solo {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vd-text-muted);
  white-space: nowrap;
  border-radius: var(--vd-radius-sm);
  transition: color 0.2s, background 0.2s;
}

.vd-nav__home:hover,
.vd-nav__solo:hover {
  color: var(--vd-primary);
  background: var(--vd-brand-soft);
}

.vd-nav__home.is-active,
.vd-nav__solo.is-active {
  color: var(--vd-primary);
  background: rgba(79, 70, 229, 0.14);
}

.vd-nav__item {
  position: relative;
}

.vd-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vd-text-muted);
  white-space: nowrap;
  border-radius: var(--vd-radius-sm);
  transition: color 0.2s, background 0.2s;
}

.vd-nav__trigger i {
  font-size: 12px;
  opacity: 0.65;
  transition: transform 0.25s ease;
}

.vd-nav__item:hover .vd-nav__trigger,
.vd-nav__item.is-active .vd-nav__trigger {
  color: var(--vd-primary);
  background: var(--vd-brand-soft);
}

.vd-nav__item:hover .vd-nav__trigger i {
  transform: rotate(180deg);
}

.vd-nav__item.is-active .vd-nav__trigger {
  background: rgba(79, 70, 229, 0.14);
}

.vd-nav__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 1100;
}

.vd-nav__item:hover .vd-nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.vd-nav__panel-inner {
  min-width: 340px;
  max-width: 440px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

.vd-nav__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(236, 72, 153, 0.06));
  border-bottom: 1px solid var(--vd-border);
  color: var(--vd-text);
  font-size: 14px;
}

.vd-nav__panel-head:hover {
  color: var(--vd-primary);
}

.vd-nav__panel-head strong {
  font-weight: 600;
}

.vd-nav__panel-head span {
  font-size: 12px;
  color: var(--vd-text-muted);
}

.vd-nav__children {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 10px;
  max-height: 320px;
  overflow-y: auto;
}

.vd-nav__child {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--vd-text);
  font-size: 13px;
  transition: background 0.15s ease;
}

.vd-nav__child:hover {
  background: var(--vd-bg);
  color: var(--vd-primary);
}

.vd-nav__child.is-active {
  background: var(--vd-brand-soft);
  color: var(--vd-primary);
  font-weight: 600;
}

.vd-nav__child-thumb {
  flex-shrink: 0;
  width: 48px;
  height: 27px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--vd-player-bg);
}

.vd-nav__child-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vd-nav__child-name {
  line-height: 1.35;
}

.vd-header__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.vd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--vd-bg);
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  padding: 0 6px 0 14px;
  width: 240px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.vd-search:focus-within {
  border-color: var(--vd-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}

.vd-search__icon {
  color: var(--vd-text-muted);
  font-size: 14px;
  flex-shrink: 0;
}

.vd-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  min-width: 0;
  height: 40px;
  color: var(--vd-text);
}

.vd-search__btn {
  border: none;
  background: linear-gradient(135deg, var(--vd-brand), var(--vd-brand-deep));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
  height: 32px;
  border-radius: var(--vd-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s, transform 0.15s;
}

.vd-search__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.vd-header__icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--vd-text-muted);
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
}

.vd-header__icon-btn:hover {
  background: var(--vd-bg);
  color: var(--vd-primary);
}

.vd-header__icon-label {
  font-size: 10px;
  font-weight: 500;
}

.vd-user__guest {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vd-user__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 38px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  white-space: nowrap;
}

.vd-user__btn:hover {
  transform: translateY(-1px);
}

.vd-user__btn--ghost {
  background: transparent;
  color: var(--vd-text);
  border: 1px solid var(--vd-border);
}

.vd-user__btn--ghost:hover {
  border-color: var(--vd-primary);
  color: var(--vd-primary);
}

.vd-user__btn--primary {
  background: linear-gradient(135deg, var(--vd-brand), var(--vd-brand-deep));
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.vd-user__btn--primary:hover {
  color: #fff;
}

.vd-user__btn--block {
  width: 100%;
  margin-bottom: 8px;
}

.vd-user__logged {
  position: relative;
}

.vd-user__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--vd-border);
  border-radius: 999px;
  background: var(--vd-surface);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.vd-user__trigger:hover,
.vd-user__trigger[aria-expanded="true"] {
  border-color: var(--vd-primary);
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.14);
}

.vd-user__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.vd-user__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vd-user__caret {
  font-size: 14px;
  color: var(--vd-text-muted);
  transition: transform 0.2s ease;
}

.vd-user__trigger[aria-expanded="true"] .vd-user__caret {
  transform: rotate(180deg);
}

.vd-user__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: var(--vd-surface);
  border-radius: 14px;
  border: 1px solid var(--vd-border);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 1100;
  overflow: hidden;
}

.vd-user__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vd-user__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(236, 72, 153, 0.08));
  border-bottom: 1px solid var(--vd-border);
}

.vd-user__card img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vd-user__card strong {
  display: block;
  font-size: 15px;
  color: var(--vd-text);
}

.vd-user__card span {
  font-size: 12px;
  color: var(--vd-text-muted);
}

.vd-user__menu {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.vd-user__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--vd-text);
  border-radius: var(--vd-radius-sm);
  transition: background 0.15s;
}

.vd-user__menu a i {
  width: 18px;
  text-align: center;
  color: var(--vd-text-muted);
}

.vd-user__menu a:hover {
  background: var(--vd-bg);
  color: var(--vd-primary);
}

.vd-user__menu a.is-danger {
  color: #dc2626;
}

.vd-user__menu a.is-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.vd-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  background: var(--vd-surface);
  cursor: pointer;
}

.vd-header__burger span {
  display: block;
  height: 2px;
  background: var(--vd-text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.vd-header__drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.vd-header__drawer.is-open {
  pointer-events: auto;
}

.vd-header__drawer-mask {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 16, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vd-header__drawer.is-open .vd-header__drawer-mask {
  opacity: 1;
}

.vd-header__drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 88vw);
  height: 100%;
  background: var(--vd-surface);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.vd-header__drawer.is-open .vd-header__drawer-panel {
  transform: translateX(0);
}

.vd-header__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--vd-border);
}

.vd-drawer-logo img {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.vd-header__drawer-head button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--vd-radius-sm);
  background: var(--vd-bg);
  cursor: pointer;
  font-size: 18px;
  color: var(--vd-text-muted);
}

.vd-header__drawer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px;
  padding: 0 6px 0 12px;
  background: var(--vd-bg);
  border: 1px solid var(--vd-border);
  border-radius: 10px;
}

.vd-header__drawer-search i {
  color: var(--vd-text-muted);
  font-size: 14px;
}

.vd-header__drawer-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  height: 42px;
  font-size: 14px;
  min-width: 0;
}

.vd-header__drawer-search button {
  border: none;
  background: var(--vd-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
  height: 34px;
  border-radius: var(--vd-radius-sm);
  cursor: pointer;
}

.vd-header__drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px;
}

.vd-drawer-home,
.vd-drawer-solo {
  display: block;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--vd-text);
  border-radius: 10px;
}

.vd-drawer-home:hover,
.vd-drawer-solo:hover,
.vd-drawer-solo.is-active {
  background: var(--vd-bg);
  color: var(--vd-primary);
}

.vd-drawer-group {
  border-bottom: 1px solid var(--vd-border);
}

.vd-drawer-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--vd-text);
  cursor: pointer;
  text-align: left;
}

.vd-drawer-group__toggle i {
  transition: transform 0.25s ease;
  color: var(--vd-text-muted);
}

.vd-drawer-group.is-open .vd-drawer-group__toggle i {
  transform: rotate(180deg);
}

.vd-drawer-group__body {
  display: none;
  padding: 0 8px 12px 16px;
}

.vd-drawer-group.is-open .vd-drawer-group__body {
  display: block;
}

.vd-drawer-group__body a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--vd-text-muted);
  border-radius: var(--vd-radius-sm);
  border-left: 2px solid transparent;
}

.vd-drawer-group__body a:hover,
.vd-drawer-group__body a.is-active {
  color: var(--vd-primary);
  background: var(--vd-brand-soft);
  border-left-color: var(--vd-accent);
}

.vd-drawer-group__all {
  font-weight: 600;
  color: var(--vd-text) !important;
  margin-bottom: 4px;
}

.vd-header__drawer-member {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--vd-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vd-header__drawer-member > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--vd-text);
  border-radius: 10px;
}

.vd-header__drawer-member > a:hover {
  background: var(--vd-bg);
}

.vd-header__drawer-member > a.is-danger {
  color: #dc2626;
}

.vd-user__card--drawer {
  margin-bottom: 12px;
  border-radius: var(--vd-radius);
  border: none;
}

body.vd-drawer-open {
  overflow: hidden;
}

@media (max-width: 1200px) {
  .vd-nav__trigger,
  .vd-nav__home,
  .vd-nav__solo {
    padding: 8px 10px;
    font-size: 13px;
  }

  .vd-search {
    width: 200px;
  }
}

@media (max-width: 992px) {
  .vd-nav {
    display: none;
    margin-left: 0;
  }

  .vd-header__tools {
    margin-left: auto;
  }

  .vd-header__burger {
    display: flex;
  }

  .vd-search {
    width: 180px;
  }

  .vd-search__btn {
    padding: 0 10px;
    font-size: 0;
    width: 32px;
    overflow: hidden;
  }

  .vd-search__btn::before {
    content: "\f002";
    font-family: FontAwesome;
    font-size: 13px;
  }

  .vd-user__name {
    display: none;
  }

  .vd-header__icon-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .vd-search {
    display: none;
  }

  .vd-header__icon-btn {
    display: none;
  }

  .vd-user__btn--ghost {
    display: none;
  }

  .vd-header__row {
    gap: 12px;
  }
}

/* ========== Footer ========== */
.vd-footer {
  background: linear-gradient(180deg, #12121a 0%, var(--vd-player-bg) 100%);
  color: #94a3b8;
  padding: 44px 0 28px;
  margin-top: auto;
}

.vd-footer__inner {
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
}

.vd-footer a {
  color: #cbd5e1;
}

.vd-footer a:hover {
  color: #fff;
}

.vd-back-top {
  position: fixed;
  right: 24px;
  bottom: 90px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  box-shadow: var(--vd-shadow-lg);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  color: var(--vd-text-muted);
  transition: transform 0.2s, color 0.2s, border-color 0.2s;
}

.vd-back-top:hover {
  color: var(--vd-primary);
  border-color: rgba(79, 70, 229, 0.3);
  transform: translateY(-2px);
}

.vd-back-top.is-visible {
  display: flex;
}

/* ========== Breadcrumb ========== */
.vd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--vd-text-muted);
  margin-bottom: 16px;
}

.vd-breadcrumb a {
  color: var(--vd-text-muted);
}

.vd-breadcrumb a:hover {
  color: var(--vd-primary);
}

.vd-breadcrumb__sep {
  opacity: 0.4;
}

/* ========== Buttons ========== */
.vd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}

.vd-btn:hover {
  transform: translateY(-1px);
}

.vd-btn--primary {
  background: linear-gradient(135deg, var(--vd-brand), var(--vd-brand-deep));
  color: #fff;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
}

.vd-btn--primary:hover {
  color: #fff;
}

.vd-btn--accent {
  background: linear-gradient(135deg, var(--vd-accent), #db2777);
  color: #fff;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.35);
}

.vd-btn--accent:hover {
  color: #fff;
}

.vd-btn--outline {
  background: transparent;
  border: 1.5px solid var(--vd-border);
  color: var(--vd-text);
}

.vd-btn--outline:hover {
  border-color: var(--vd-primary);
  color: var(--vd-primary);
}

.vd-btn--sm {
  padding: 6px 14px;
  font-size: 13px;
}

/* ========== Home page ========== */
.vd-page-home .vd-main {
  padding: 0;
  min-height: auto;
}

.vd-home-hero {
  padding: 20px 0 8px;
  background: var(--vd-bg);
}

.vd-home-hero__shell {
  position: relative;
  border-radius: var(--vd-radius-xl);
  overflow: hidden;
  min-height: 480px;
  background: linear-gradient(135deg, #0f0f18 0%, #1a1a2e 50%, #16213e 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 24px 60px rgba(49, 46, 129, 0.25);
}

.vd-home-hero__blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.vd-home-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
}

.vd-home-hero__blob--1 {
  width: 320px;
  height: 320px;
  background: var(--vd-brand);
  top: -100px;
  right: 5%;
}

.vd-home-hero__blob--2 {
  width: 240px;
  height: 240px;
  background: var(--vd-accent);
  bottom: -60px;
  left: 8%;
}

.vd-home-hero__blob--3 {
  width: 180px;
  height: 180px;
  background: #6366f1;
  top: 35%;
  left: 42%;
}

.vd-home-hero__track {
  position: relative;
  min-height: 480px;
}

.vd-home-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.65s ease, visibility 0.65s;
  pointer-events: none;
}

.vd-home-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vd-home-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  transform: scale(1.04);
  filter: blur(2px);
}

.vd-home-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 11, 16, 0.92) 0%,
    rgba(11, 11, 16, 0.65) 45%,
    rgba(11, 11, 16, 0.25) 100%
  );
}

.vd-home-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: 40px;
  align-items: center;
  min-height: 480px;
  padding: 40px 48px 96px;
}

.vd-home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  margin-bottom: 18px;
}

.vd-home-hero__eyebrow i {
  color: var(--vd-accent);
}

.vd-home-hero__title {
  margin: 0 0 14px;
  font-family: var(--vd-font-display);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.01em;
}

.vd-home-hero__desc {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.75;
  color: #94a3b8;
  max-width: 520px;
}

.vd-home-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 26px;
}

.vd-home-hero__meta i {
  margin-right: 6px;
  color: var(--vd-accent);
}

.vd-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vd-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--vd-radius);
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
  text-decoration: none;
}

.vd-home-btn:hover {
  transform: translateY(-2px);
}

.vd-home-btn--primary {
  background: linear-gradient(135deg, var(--vd-brand), var(--vd-brand-deep));
  color: #fff;
  box-shadow: 0 8px 28px rgba(79, 70, 229, 0.35);
}

.vd-home-btn--primary:hover {
  color: #fff;
  box-shadow: 0 12px 36px rgba(79, 70, 229, 0.45);
}

.vd-home-btn--primary i.fa-play {
  font-size: 12px;
}

.vd-home-btn--outline {
  background: #fff;
  color: var(--vd-brand);
  border: 1.5px solid rgba(79, 70, 229, 0.28);
}

.vd-home-btn--outline:hover {
  border-color: var(--vd-brand);
  background: var(--vd-brand-soft);
  color: var(--vd-brand-deep);
}

/* Hero 深色背景上的描边按钮 */
.vd-home-hero .vd-home-btn--outline {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
}

.vd-home-hero .vd-home-btn--outline:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Hero 主按钮保持粉色强调 */
.vd-home-hero .vd-home-btn--primary {
  background: linear-gradient(135deg, var(--vd-accent), #db2777);
  box-shadow: 0 8px 28px rgba(236, 72, 153, 0.4);
}

.vd-home-hero .vd-home-btn--primary:hover {
  box-shadow: 0 12px 36px rgba(236, 72, 153, 0.5);
}

.vd-home-btn--light {
  background: #fff;
  color: var(--vd-brand-deep);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.vd-home-btn--light:hover {
  color: var(--vd-brand-deep);
}

.vd-home-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vd-home-hero__cover {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: var(--vd-radius-lg);
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.vd-home-hero__slide.is-active .vd-home-hero__cover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 32px 72px rgba(236, 72, 153, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.vd-home-hero__cover img {
  display: block;
  width: 100%;
  aspect-ratio: var(--vd-ratio-video);
  object-fit: cover;
}

.vd-home-hero__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 11, 16, 0.5) 100%);
  pointer-events: none;
}

.vd-home-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(236, 72, 153, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.5);
  transition: transform 0.25s, box-shadow 0.25s;
  pointer-events: none;
}

.vd-home-hero__slide.is-active .vd-home-hero__cover:hover .vd-home-hero__play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 12px 40px rgba(236, 72, 153, 0.6);
}

.vd-home-hero__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px 24px;
}

.vd-home-hero__progress {
  display: flex;
  gap: 8px;
}

.vd-home-hero__dot {
  width: 32px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: width 0.3s, background 0.3s;
}

.vd-home-hero__dot.is-active {
  width: 48px;
  background: var(--vd-accent);
}

.vd-home-hero__arrows {
  display: flex;
  gap: 8px;
}

.vd-home-hero__arrow {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--vd-radius);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
}

.vd-home-hero__arrow:hover {
  background: var(--vd-accent);
  border-color: var(--vd-accent);
  color: #fff;
}

/* ========== Home channel ========== */
.vd-home-channel {
  margin-top: 32px;
  padding-bottom: 56px;
}

.vd-home-channel__head {
  text-align: center;
  margin-bottom: 28px;
}

.vd-home-channel__head h2 {
  margin: 0 0 6px;
  font-family: var(--vd-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--vd-ink);
}

.vd-home-channel__head p {
  margin: 0;
  color: var(--vd-muted);
  font-size: 15px;
}

.vd-home-channel__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.vd-home-channel__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--vd-surface);
  border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow);
  border: 1px solid var(--vd-border);
  color: var(--vd-ink);
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  position: relative;
  overflow: hidden;
}

.vd-home-channel__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgba(79, 70, 229, 0.08));
  opacity: 0;
  transition: opacity 0.25s;
}

.vd-home-channel__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--vd-shadow-lg);
  border-color: rgba(79, 70, 229, 0.25);
  color: var(--vd-ink);
}

.vd-home-channel__card:hover::after {
  opacity: 1;
}

.vd-home-channel__thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--vd-brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--vd-brand);
}

.vd-home-channel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vd-home-channel__name {
  font-size: 15px;
  font-weight: 600;
}

.vd-home-channel__arrow {
  font-size: 12px;
  color: var(--vd-muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.2s;
}

.vd-home-channel__card:hover .vd-home-channel__arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--vd-accent);
}

/* ========== Home rank ========== */
.vd-home-rank {
  padding: 16px 0 56px;
}

.vd-home-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vd-accent);
  margin-bottom: 6px;
}

.vd-home-rank__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}

.vd-home-rank__head h2 {
  margin: 0;
  font-family: var(--vd-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--vd-ink);
}

.vd-home-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--vd-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vd-home-link:hover {
  color: var(--vd-brand);
}

.vd-home-rank__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 4px 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--vd-brand) transparent;
}

.vd-home-rank__scroll::-webkit-scrollbar {
  height: 6px;
}

.vd-home-rank__scroll::-webkit-scrollbar-thumb {
  background: var(--vd-brand);
  border-radius: 3px;
}

.vd-home-rank__item {
  flex: 0 0 300px;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 36px 120px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--vd-surface);
  border-radius: var(--vd-radius-lg);
  border: 1px solid var(--vd-border);
  color: var(--vd-ink);
  transition: box-shadow 0.25s, transform 0.25s;
}

.vd-home-rank__item:hover {
  box-shadow: var(--vd-shadow-lg);
  transform: translateY(-2px);
  color: var(--vd-ink);
}

.vd-home-rank__num {
  font-family: var(--vd-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--vd-border);
  line-height: 1;
}

.vd-home-rank__item:nth-child(1) .vd-home-rank__num { color: #f59e0b; }
.vd-home-rank__item:nth-child(2) .vd-home-rank__num { color: #94a3b8; }
.vd-home-rank__item:nth-child(3) .vd-home-rank__num { color: #d97706; }

.vd-home-rank__cover {
  border-radius: var(--vd-radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  aspect-ratio: var(--vd-ratio-video);
}

.vd-home-rank__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vd-home-rank__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vd-home-rank__info strong {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vd-home-rank__info em {
  font-style: normal;
  font-size: 13px;
  color: var(--vd-muted);
}

.vd-home-rank__info small {
  font-size: 12px;
  color: var(--vd-muted);
}

/* ========== Home block ========== */
.vd-home-block {
  padding: 48px 0;
  border-top: 1px solid var(--vd-border);
}

.vd-home-block:nth-child(even) {
  background: rgba(255, 255, 255, 0.55);
}

.vd-home-block__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: end;
  margin-bottom: 20px;
}

.vd-home-block__index {
  font-family: var(--vd-font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 1px var(--vd-brand);
  color: transparent;
}

.vd-home-block__titles h2 {
  margin: 0 0 4px;
  font-family: var(--vd-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--vd-ink);
}

.vd-home-block__titles p {
  margin: 0;
  font-size: 14px;
  color: var(--vd-muted);
}

.vd-home-block__tabs-wrap {
  position: relative;
  margin-bottom: 24px;
}

.vd-home-block__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vd-home-block__tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 8px 16px;
  min-height: 38px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  color: var(--vd-muted);
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
}

.vd-home-block__tabs a:hover {
  border-color: var(--vd-brand);
  color: var(--vd-brand);
  background: var(--vd-brand-soft);
}

.vd-home-block__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

/* ========== Home card (16:9) ========== */
.vd-home-card {
  background: var(--vd-surface);
  border-radius: var(--vd-radius-lg);
  overflow: hidden;
  border: 1px solid var(--vd-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vd-home-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--vd-shadow-lg);
}

.vd-home-card__cover {
  position: relative;
  display: block;
  aspect-ratio: var(--vd-ratio-video);
  overflow: hidden;
  background: var(--vd-player-bg);
}

.vd-home-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.vd-home-card:hover .vd-home-card__cover img {
  transform: scale(1.06);
}

.vd-home-card__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.vd-home-card:hover .vd-home-card__shine {
  transform: translateX(100%);
}

.vd-home-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #296bef;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 6px 24px #296bef;
}

.vd-home-card:hover .vd-home-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.vd-home-card__status {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(11, 11, 16, 0.78);
  color: #fff;
  backdrop-filter: blur(4px);
}

.vd-home-card__status.is-end {
  background: rgba(22, 163, 74, 0.9);
}

.vd-home-card__duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: rgba(11, 11, 16, 0.78);
  color: #fff;
}

.vd-home-card__body {
  padding: 16px 18px 18px;
}

.vd-home-card__body h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vd-home-card__body h3 a {
  color: var(--vd-ink);
}

.vd-home-card__body h3 a:hover {
  color: var(--vd-brand);
}

.vd-home-card__cat {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--vd-brand);
  font-weight: 500;
}

.vd-home-card__desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vd-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vd-home-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--vd-muted);
  padding-top: 12px;
  border-top: 1px solid var(--vd-border);
}

.vd-home-card__watch {
  font-size: 13px;
  font-weight: 600;
  color: var(--el-color-white);
  padding: 4px 12px;
  border-radius: 999px;
  background: #296bef;
}

.vd-home-card__watch:hover {
  background: var(--vd-brand);
  color: #fff;
}

/* ========== Home CTA ========== */
.vd-home-cta {
  padding: 64px 0 80px;
}

.vd-home-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px 56px;
  border-radius: var(--vd-radius-xl);
  background: linear-gradient(135deg, var(--vd-brand-deep) 0%, var(--vd-brand) 55%, #6366f1 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.vd-home-cta__inner::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -100px;
  top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 70%);
}

.vd-home-cta__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.vd-home-cta__text {
  position: relative;
  z-index: 1;
}

.vd-home-cta__text h2 {
  margin: 0 0 8px;
  font-family: var(--vd-font-display);
  font-size: 28px;
  font-weight: 700;
}

.vd-home-cta__text p {
  margin: 0;
  opacity: 0.88;
  font-size: 16px;
}

.vd-home-cta .vd-home-btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.vd-footer--home {
  margin-top: 0;
}

/* ========== Detail page ========== */
.vd-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

.vd-detail {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  background: var(--vd-surface);
  border-radius: var(--vd-radius-lg);
  padding: 32px;
  box-shadow: var(--vd-shadow);
  margin-bottom: 24px;
}

.vd-detail__cover {
  border-radius: var(--vd-radius);
  overflow: hidden;
  box-shadow: var(--vd-shadow-glow);
  aspect-ratio: var(--vd-ratio-video);
  position: relative;
}

.vd-detail__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vd-detail__cover .vd-home-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.vd-detail__title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vd-ink);
}

.vd-detail__cat {
  font-size: 15px;
  color: var(--vd-muted);
  margin-bottom: 16px;
}

.vd-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--vd-muted);
  margin-bottom: 20px;
}

.vd-detail__meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vd-detail__meta i {
  color: var(--vd-brand);
}

.vd-detail__desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--vd-muted);
  margin-bottom: 24px;
}

.vd-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ========== Panel ========== */
.vd-panel {
  background: var(--vd-surface);
  border-radius: var(--vd-radius-lg);
  border: 1px solid var(--vd-border);
  box-shadow: var(--vd-shadow);
  margin-bottom: 24px;
  overflow: hidden;
}

.vd-panel__head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--vd-border);
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--vd-ink);
}

.vd-panel__head .vd-home-label {
  margin-bottom: 0;
}

.vd-panel__body {
  padding: 20px 24px;
}

.vd-panel__body--muted {
  font-size: 13px;
  color: var(--vd-muted);
  line-height: 1.8;
}

.vd-panel--filters {
  margin-bottom: 20px;
}

.vd-panel--filters .vd-panel__body,
.vd-panel--filters .vd-filters {
  margin: 0;
  box-shadow: none;
  background: transparent;
  padding: 18px 24px;
}

.vd-filters {
  background: var(--vd-surface);
  border-radius: var(--vd-radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--vd-shadow);
}

.vd-filter-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vd-border);
}

.vd-filter-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vd-filter-row:first-child {
  padding-top: 0;
}

.vd-filter-label {
  flex-shrink: 0;
  width: 56px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vd-muted);
  line-height: 1.4;
  padding: 0;
  white-space: nowrap;
}

.vd-filter-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vd-filter-tags a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 16px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid var(--vd-border);
  color: var(--vd-muted);
  background: var(--vd-surface);
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.vd-filter-tags a.is-active,
.vd-filter-tags a:hover {
  background: var(--vd-brand);
  border-color: var(--vd-brand);
  color: #fff;
}

/* ========== Episode grid ========== */
.vd-episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}

.vd-episode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--vd-radius-sm);
  border: 1px solid var(--vd-border);
  background: var(--vd-bg);
  color: var(--vd-text);
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.vd-episode-btn:hover {
  border-color: var(--vd-brand);
  color: var(--vd-brand);
  background: var(--vd-brand-soft);
}

.vd-episode-btn.is-active {
  background: linear-gradient(135deg, var(--vd-brand), var(--vd-brand-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.vd-episode-btn.is-vip {
  border-color: rgba(236, 72, 153, 0.35);
}

.vd-episode-btn.is-vip:hover {
  border-color: var(--vd-accent);
  color: var(--vd-accent);
  background: var(--vd-accent-soft);
}

.vd-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.vd-tag--vip {
  background: #fce7f3;
  color: #be185d;
}

.vd-tag--free {
  background: #dcfce7;
  color: #15803d;
}

/* ========== Sidebar list ========== */
.vd-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vd-side-list li {
  border-bottom: 1px solid var(--vd-border);
}

.vd-side-list li:last-child {
  border-bottom: none;
}

.vd-side-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--vd-text);
  font-size: 14px;
}

.vd-side-list a:hover {
  color: var(--vd-brand);
}

.vd-side-list__num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--vd-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--vd-muted);
  flex-shrink: 0;
}

.vd-side-list li:nth-child(-n+3) .vd-side-list__num {
  background: var(--vd-brand);
  color: #fff;
}

/* ========== Player page ========== */
body.vd-play-body {
  background: var(--vd-player-bg);
  min-height: 100vh;
}

body.vd-play-body .vd-main {
  padding: 0;
  min-height: auto;
}

body.vd-play-body .vd-header__bar {
  background: rgba(11, 11, 16, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.vd-play-body .vd-header .vd-nav__home,
body.vd-play-body .vd-header .vd-nav__solo,
body.vd-play-body .vd-header .vd-nav__trigger {
  color: #94a3b8;
}

body.vd-play-body .vd-header .vd-nav__home:hover,
body.vd-play-body .vd-header .vd-nav__solo:hover,
body.vd-play-body .vd-header .vd-nav__trigger:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

body.vd-play-body .vd-logo img {
  filter: brightness(1.1);
}

.vd-play-wrap {
  background: var(--vd-player-bg);
  padding: 0 0 32px;
}

.vd-play-stage {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  max-width: var(--vd-container);
  margin: 0 auto;
  padding: 0 20px;
}

.vd-play-main {
  min-width: 0;
}

.vd-play-box {
  position: relative;
  background: #000;
  border-radius: var(--vd-radius-lg) var(--vd-radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: var(--vd-ratio-video);
}

.vd-play-box iframe,
.vd-play-box video,
.vd-play-box .embed-responsive {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.vd-play-tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 13px;
}

.vd-play-tips__close {
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.vd-play-tips__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.vd-play-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 0 var(--vd-radius-lg) var(--vd-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: none;
}

.vd-play-toolbar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  border-radius: var(--vd-radius-sm);
  transition: background 0.2s, color 0.2s;
}

.vd-play-toolbar a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.vd-play-toolbar a.is-active {
  color: var(--vd-accent);
}

.vd-play-sidebar {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: none;
  border-radius: 0 var(--vd-radius-lg) var(--vd-radius-lg) 0;
  max-height: calc(100vw * 9 / 16 + 80px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 70, 229, 0.5) transparent;
}

.vd-play-sidebar::-webkit-scrollbar {
  width: 6px;
}

.vd-play-sidebar::-webkit-scrollbar-thumb {
  background: rgba(79, 70, 229, 0.5);
  border-radius: 3px;
}

.vd-play-sidebar__head {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 15px;
  font-weight: 600;
  color: #e2e8f0;
  position: sticky;
  top: 0;
  background: rgba(11, 11, 16, 0.95);
  backdrop-filter: blur(8px);
  z-index: 2;
}

.vd-play-sidebar__group {
  padding: 12px 12px 4px;
}

.vd-play-sidebar__group-title {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
  padding: 0 4px;
}

.vd-play-sidebar .vd-episode-grid {
  padding: 0 0 8px;
}

.vd-play-sidebar .vd-episode-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 12px;
  min-height: 36px;
}

.vd-play-sidebar .vd-episode-btn:hover {
  background: rgba(79, 70, 229, 0.2);
  border-color: rgba(79, 70, 229, 0.4);
  color: #fff;
}

.vd-play-sidebar .vd-episode-btn.is-active {
  background: var(--vd-accent);
  border-color: var(--vd-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35);
}

.vd-play-vip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(11, 11, 16, 0.92);
  color: #e2e8f0;
  text-align: center;
  padding: 32px;
  z-index: 5;
}

.vd-play-vip h3 {
  margin: 0;
  font-size: 20px;
}

.vd-play-vip p {
  margin: 0;
  color: #94a3b8;
  font-size: 14px;
}

.vd-play-below {
  max-width: var(--vd-container);
  margin: 24px auto 0;
  padding: 0 20px;
}

body.vd-play-body .vd-footer {
  margin-top: 32px;
}

/* ========== Page hero & filters ========== */
.vd-page-hero {
  padding: 32px 36px;
  margin-bottom: 28px;
  border-radius: var(--vd-radius-lg);
  background: linear-gradient(135deg, #ffffff 0%, #eef0ff 42%, #f8f0ff 100%);
  border: 1px solid var(--vd-border);
  box-shadow: var(--vd-shadow);
}

.vd-page-hero h1 {
  margin: 8px 0 10px;
  font-family: var(--vd-font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--vd-ink);
}

.vd-page-hero p {
  margin: 0;
  color: var(--vd-muted);
  font-size: 15px;
}

.vd-page-hero--compact {
  padding: 24px 28px;
  margin-bottom: 24px;
}

.vd-page-hero--detail.vd-detail {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  margin-bottom: 24px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  box-shadow: var(--vd-shadow);
}

.vd-filter-tags a.is-active,
.vd-filter-tags a:hover {
  background: var(--vd-brand);
  border-color: var(--vd-brand);
  color: #fff;
}

.vd-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 28px;
  padding: 0 2px;
}

.vd-sort a {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vd-muted);
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.vd-sort a:hover {
  color: var(--vd-brand);
  border-color: rgba(79, 70, 229, 0.25);
}

.vd-sort a.is-active {
  background: #296bef;
  color: var(--el-color-white);
  border-color: rgba(79, 70, 229, 0.2);
}

.vd-home-block--inner {
  padding: 8px 0 48px;
  border-top: none;
  background: transparent;
}

.vd-home-block--inner:nth-child(even) {
  background: transparent;
}

.vd-home-block__grid--page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  gap: 24px 20px;
  margin-bottom: 32px;
}

.vd-home-block__grid--page .vd-home-card {
  height: 100%;
}

.vd-home-block__grid--page .vd-home-card__body {
  padding: 14px 16px 16px;
}

/* ========== Empty state ========== */
.vd-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--vd-muted);
}

.vd-empty i {
  font-size: 48px;
  opacity: 0.3;
  display: block;
  margin-bottom: 16px;
}

.vd-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--vd-ink);
}

.vd-empty p {
  margin: 0;
  font-size: 14px;
}

/* ========== Pagination ========== */
.vd-pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.vd-pagination .pagination {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.vd-pagination .pagination > li > a,
.vd-pagination .pagination > li > span {
  display: block;
  padding: 8px 14px;
  border-radius: var(--vd-radius-sm);
  border: 1px solid var(--vd-border);
  color: var(--vd-muted);
  background: var(--vd-surface);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.vd-pagination .pagination > .active > a,
.vd-pagination .pagination > .active > span,
.vd-pagination .pagination > li > a:hover {
  background: var(--vd-brand);
  border-color: var(--vd-brand);
  color: #fff;
}

.vd-pagination .pagination > .disabled > a,
.vd-pagination .pagination > .disabled > span {
  opacity: 0.45;
  cursor: not-allowed;
}

.vd-pagination .pagination > .disabled > a:hover {
  background: var(--vd-surface);
  border-color: var(--vd-border);
  color: var(--vd-muted);
}

/* ========== Responsive — 992px ========== */
@media (max-width: 992px) {
  .vd-layout {
    grid-template-columns: 1fr;
  }

  .vd-detail {
    grid-template-columns: 280px 1fr;
    gap: 24px;
    padding: 24px;
  }

  .vd-page-hero--detail.vd-detail {
    grid-template-columns: 280px 1fr;
  }

  .vd-play-stage {
    grid-template-columns: 1fr;
  }

  .vd-play-box {
    border-radius: var(--vd-radius-lg);
  }

  .vd-play-toolbar {
    border-radius: 0 0 var(--vd-radius-lg) var(--vd-radius-lg);
  }

  .vd-play-sidebar {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--vd-radius-lg);
    margin-top: 16px;
    max-height: 360px;
  }

  .vd-home-channel__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .vd-home-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 32px 28px 96px;
    min-height: auto;
  }

  .vd-home-hero__shell,
  .vd-home-hero__track {
    min-height: auto;
  }

  .vd-home-hero__desc {
    margin-left: auto;
    margin-right: auto;
  }

  .vd-home-hero__actions,
  .vd-home-hero__meta {
    justify-content: center;
  }

  .vd-home-hero__visual {
    order: -1;
  }

  .vd-home-hero__cover {
    max-width: 100%;
  }

  .vd-home-hero__footer {
    padding: 0 28px 20px;
  }
}

/* ========== Responsive — 768px ========== */
@media (max-width: 768px) {
  :root {
    --vd-header-h: 60px;
  }

  .vd-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .vd-main {
    padding: 16px 0 36px;
    min-height: calc(100vh - var(--vd-header-h) - 100px);
  }

  .vd-breadcrumb {
    font-size: 12px;
    gap: 6px;
    margin-bottom: 16px;
  }

  .vd-page-hero {
    padding: 22px 18px;
    margin-bottom: 20px;
    border-radius: var(--vd-radius);
  }

  .vd-page-hero--compact {
    padding: 18px 16px;
    margin-bottom: 16px;
  }

  .vd-page-hero h1 {
    font-size: 22px;
    margin-top: 6px;
  }

  .vd-page-hero p {
    font-size: 14px;
  }

  .vd-detail {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 20px 16px;
  }

  .vd-detail__cover {
    max-width: 100%;
    margin: 0 auto;
  }

  .vd-detail__actions {
    justify-content: center;
  }

  .vd-detail__meta {
    justify-content: center;
  }

  .vd-detail__desc {
    text-align: left;
  }

  .vd-page-hero--detail.vd-detail {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 20px 16px;
  }

  .vd-page-hero--detail .vd-detail__cover {
    max-width: 100%;
    margin: 0 auto;
  }

  .vd-page-hero--detail .vd-detail__actions {
    justify-content: center;
  }

  .vd-detail__title {
    font-size: 22px;
  }

  .vd-detail__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .vd-detail__actions .vd-home-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .vd-panel {
    border-radius: var(--vd-radius);
    margin-bottom: 18px;
  }

  .vd-panel__head {
    padding: 14px 16px;
    font-size: 16px;
  }

  .vd-panel__body {
    padding: 16px;
  }

  .vd-filters,
  .vd-panel--filters .vd-panel__body,
  .vd-panel--filters .vd-filters {
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: var(--vd-radius);
  }

  .vd-filter-row {
    grid-template-columns: 48px 1fr;
    column-gap: 12px;
    row-gap: 8px;
    padding: 12px 0;
  }

  .vd-filter-label {
    width: 48px;
    font-size: 13px;
  }

  .vd-filter-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .vd-filter-tags::-webkit-scrollbar {
    display: none;
  }

  .vd-filter-tags a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .vd-sort {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .vd-sort::-webkit-scrollbar {
    display: none;
  }

  .vd-sort a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .vd-home-block {
    padding: 32px 0;
  }

  .vd-home-block__head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vd-home-block__index {
    font-size: 36px;
  }

  .vd-home-block__grid,
  .vd-home-block__grid--page {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .vd-home-block__grid--page .vd-home-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0;
  }

  .vd-home-block__grid--page .vd-home-card__cover {
    aspect-ratio: var(--vd-ratio-video);
    min-height: 100%;
    border-radius: var(--vd-radius) 0 0 var(--vd-radius);
  }

  .vd-home-block__grid--page .vd-home-card__body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .vd-home-block__grid--page .vd-home-card:hover {
    transform: none;
  }

  .vd-home-channel {
    margin-top: 24px;
  }

  .vd-home-channel__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .vd-home-channel__card {
    padding: 14px 12px;
  }

  .vd-home-rank__item {
    flex: 0 0 260px;
  }

  .vd-home-rank__scroll {
    margin: 0 -16px;
    padding: 0 16px 8px;
  }

  .vd-home-cta__inner {
    flex-direction: column;
    text-align: center;
    padding: 36px 28px;
  }

  .vd-home-cta__text h2 {
    font-size: 22px;
  }

  .vd-home-cta .vd-home-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .vd-home-hero {
    padding: 12px 0 4px;
  }

  .vd-home-hero__shell {
    border-radius: var(--vd-radius-lg);
  }

  .vd-home-hero__inner {
    padding: 24px 20px 88px;
    gap: 24px;
  }

  .vd-home-hero__title {
    font-size: clamp(20px, 6vw, 26px);
  }

  .vd-home-hero__desc {
    font-size: 14px;
  }

  .vd-home-hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  .vd-home-hero__actions .vd-home-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .vd-home-hero__footer {
    padding: 0 20px 16px;
  }

  .vd-home-hero__arrow {
    width: 40px;
    height: 40px;
  }

  .vd-episode-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

  .vd-play-stage {
    padding: 0 16px;
  }

  .vd-play-below {
    padding: 0 16px;
  }

  .vd-pagination {
    margin-top: 24px;
  }

  .vd-pagination .pagination > li > a,
  .vd-pagination .pagination > li > span {
    padding: 8px 12px;
    font-size: 13px;
  }

  .vd-empty {
    padding: 48px 20px;
  }

  .vd-footer {
    padding: 28px 0 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .vd-back-top {
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    width: 40px;
    height: 40px;
  }

  body.vd-page-home .vd-back-top {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  .vd-header__row {
    min-height: 56px;
  }

  .vd-logo img {
    max-height: 36px;
  }

  .vd-user__guest {
    gap: 6px;
  }

  .vd-user__btn {
    padding: 8px 12px;
    font-size: 13px;
    min-height: 36px;
  }

  .vd-home-block__grid:not(.vd-home-block__grid--page) {
    grid-template-columns: 1fr;
  }

  .vd-home-block__grid:not(.vd-home-block__grid--page) .vd-home-card {
    display: grid;
    grid-template-columns: 120px 1fr;
  }

  .vd-home-block__grid:not(.vd-home-block__grid--page) .vd-home-card__cover {
    border-radius: var(--vd-radius) 0 0 var(--vd-radius);
  }

  .vd-home-rank__item {
    flex: 0 0 240px;
  }

  .vd-home-channel__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* ========== Template supplements ========== */
.vd-detail__author {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--vd-muted);
}

.vd-detail__content {
  font-size: 15px;
  line-height: 1.85;
  color: var(--vd-text);
}

.vd-detail__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--vd-radius-sm);
}

.vd-detail__cover .vd-detail__play,
.vd-detail__cover .vd-home-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 72, 153, 0.92);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.45);
  opacity: 0.95;
}

.vd-home-block__grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.vd-home-card__watch--ghost {
  background: transparent;
  color: var(--vd-muted);
  border: 1px solid var(--vd-border);
  padding: 4px 10px;
}

.vd-home-card__watch--ghost:hover {
  color: var(--vd-brand);
  border-color: var(--vd-brand);
}

.vd-side-list__meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--vd-muted);
}

.vd-play-tips__back {
  color: #94a3b8;
  font-size: 13px;
  white-space: nowrap;
}

.vd-play-tips__back:hover {
  color: #fff;
}

.vd-play-toolbar__catalog {
  margin-left: auto;
}

.vd-play-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.vd-play-drawer.is-open {
  pointer-events: auto;
}

.vd-play-drawer__mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
}

.vd-play-drawer.is-open .vd-play-drawer__mask {
  opacity: 1;
}

.vd-play-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(360px, 92vw);
  height: 100%;
  background: #14141c;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(100%);
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}

.vd-play-drawer.is-open .vd-play-drawer__panel {
  transform: translateX(0);
}

.vd-play-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

.vd-play-drawer__head h3 {
  margin: 0;
  font-size: 16px;
}

.vd-play-drawer__head button {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
}

.vd-play-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.vd-play-box > [id^="video_"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

@media (min-width: 993px) {
  .vd-play-toolbar__catalog {
    display: none;
  }
}

@media (max-width: 992px) {
  .vd-play-sidebar {
    display: none;
  }

  .vd-play-stage {
    grid-template-columns: 1fr;
  }
}