/* 斗笠江湖前台：桌面与参考站一致，最小画布1700px、视口全高。
   不对整个页面contain缩放。手机采用独立竖版DOM和mobile.css。 */

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 16px;
}

body {
  background: #000;
  color: #fff;
}

img { border: 0; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* 原站自定义光标（桌面）。移动端不强制。 */
@media (pointer: fine) {
  html { cursor: url("../media/icon_cursor.png"), auto; }
}

/* ---------- 首页整屏结构 ---------- */
body.home { overflow: hidden; height: 100%; }
body.home .dljh-fit {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.dljh-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 1700px;
  height: 100%;
}

/* ---------- 顶部导航 ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30;
}
.site-header .logo {
  width: 143px;
  height: 68px;
  margin: 10px 0 0 100px;
  background: url("../media/logo_580c42b7.png") 100%/100% no-repeat;
}
.site-header .nav {
  height: auto;
  margin-right: 50px;
  display: flex;
  align-items: center;
  color: #fff;
}
.site-header .nav .nav-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 20px;
  font-family: cursive, "楷体";
}
.site-header .nav .nav-item a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.site-header .nav .nav-item img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.site-header .nav .nav-item span {
  width: 70px;
  height: 44px;
  line-height: 39px;
  margin-left: 10px;
  padding: 0 12px 0 5px;
  text-align: justify;
  text-align-last: justify;
  transition: background 0.3s;
}
.site-header .nav .nav-item.active span,
.site-header .nav .nav-item span:hover {
  background: url("../media/icon_active.png") no-repeat 100% / contain;
}
.site-header .nav .nav-sep { color: #fff; font-family: "Microsoft YaHei"; font-size: 16px; opacity: 1; }

/* ---------- 全屏滑动 ---------- */
.fullpage { position: absolute; inset: 0; overflow: hidden; }
.fp-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}
.fp-slide { position: relative; width: 100%; height: var(--page-height, 100vh); overflow: hidden; }
.fp-slide.slide-footer { height: auto; }

/* ---------- 首屏 hero ---------- */
.slide-hero { background: #000; overflow: hidden; }
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.slide-hero .share-group {
  position: absolute;
  bottom: 50px;
  left: 80px;
  display: flex;
  align-items: center;
}
.slide-hero .share-title { color: #ccc; font-size: 20px; }
.share-btn {
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: 0;
  background: 100%/100% no-repeat;
}
.share-btn.wx { background-image: url("../media/share_wx.png"); }
.share-btn.wb { background-image: url("../media/share_wb.png"); }
.share-btn.qywx { background-image: url("../media/share_qywx.png"); }
.share-btn.qq { background-image: url("../media/share_qq.png"); }
.share-btn.tap { background-image: url("../media/share_tap.png"); }
.share-btn.hy { background-image: url("../media/share_hy.png"); }
.share-qrcode {
  display: none;
  position: absolute;
  top: -223px;
  left: -156%;
  width: 186px;
  height: 224px;
  padding: 42px 30px 0;
  background: url("../media/share_qrcode_bg.png") 100%/100% no-repeat;
  text-align: center;
  z-index: 10;
}
.share-qrcode .title { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 20px; white-space: nowrap; }
.share-qrcode img { width: 123px; height: 123px; margin: 0 auto; }
.share-qrcode .link { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; text-decoration: none; font-size: 14px; white-space: nowrap; }
.share-btn:hover .share-qrcode { display: block; }

/* 下载区 */
.download-area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 14%;
  left: 50%;
  width: 738px;
  height: 161px;
  background: url("../media/download_area_bg.png") 100%/100% no-repeat;
  transform: translateX(-50%);
}
.download-area .qrcode {
  display: flex;
  align-items: center;
  width: 168px;
  height: 138px;
  padding: 0 0 0 35px;
  background: url("../media/download_qrcode_bg.png") 100%/100% no-repeat;
}
.download-area .qrcode img { width: 125px; height: 125px; }
.download-area .store { display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 20px; }
.download-area .store .btn { width: 211px; height: 63px; cursor: pointer; }
.download-area .store .btn.ios { margin-bottom: 10px; background: url("../media/download_ios_btn.png") 100%/100% no-repeat; }
.download-area .store .btn.android { background: url("../media/download_android_btn.png") 100%/100% no-repeat; }
.download-area .third-party { width: 121px; height: 138px; cursor: pointer; margin-left: 14px; }
.download-area .third-party.mumu { background: url("../media/download_mumu_btn.png") 100%/100% no-repeat; }
.download-area .third-party.sd { margin-left: 20px; background: url("../media/download_sd_btn.png") 100%/100% no-repeat; }

/* ---------- 资讯屏 ---------- */
.slide-news { background: url("../media/bg3.jpg?1") 100%/100% no-repeat; }
.news-box { position: absolute; right: 10%; top: 12%; width: 725px; }
.news-swiper { position: relative; width: 725px; height: 275px; border: 1px solid #fff; overflow: hidden; }
.news-swiper .swiper-wrapper { display: flex; height: 100%; }
.news-swiper .swiper-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.news-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.news-swiper .news-prev, .news-swiper .news-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 15px; height: 29px; z-index: 10; cursor: pointer;
}
.news-swiper .news-prev { left: 20px; background: url("../media/news_prev.png") 100%/100% no-repeat; }
.news-swiper .news-next { right: 20px; background: url("../media/news_next.png") 100%/100% no-repeat; }
.news-box .pagination { display: flex; flex-direction: column; height: 275px; width: 4px; position: absolute; top: 0; left: -15px; }
.news-box .pagination .swiper-pagination-bullet { width: 4px; height: 30px; margin-bottom: 5px; border-radius: 4px; background: #fff; opacity: 1; cursor: pointer; }
.news-box .pagination .swiper-pagination-bullet-active { background: #f00; }
.news-tabs { display: flex; align-items: center; width: 100%; margin-top: 15px; }
.news-tabs .news-tabs-list { display: flex; color: #fff; font-size: 24px; }
.news-tabs .news-tabs-list li { width: 60px; height: 30px; margin-right: 80px; cursor: pointer; }
.news-tabs .news-tabs-list li.active { background: url("../media/news_tab_active.png") 35% 50% / contain no-repeat; }
.news-tabs .more-news { width: 25px; height: 25px; margin-left: auto; background: url("../media/more_news_btn.png") 100%/100% no-repeat; transition: transform 0.3s; }
.news-tabs .more-news:hover { transform: rotate(180deg); }
.news-list { display: none; justify-content: space-between; flex-wrap: wrap; }
.news-list.active { display: flex; }
.news-list li { width: 354px; height: 152px; margin-top: 30px; padding: 10px 20px; background: url("../media/news_content_bg.png") 100%/100% no-repeat; transition: transform 0.3s; }
.news-list li:hover { transform: translateX(-10px); }
.news-list li h1 { margin: 0; font-size: 22px; color: #202020; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list li p { margin: 10px 0 0; font-size: 18px; color: #695029; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-list li .info { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; font-size: 16px; color: #666; }
.news-list li .line { flex: 1; height: 1px; background: #9fa1a2; margin: 0 10px; }
.news-list li .tab-name { position: relative; padding-right: 15px; color: #a20818; }
.news-list li .tab-name::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M398.499 236.5l274.256 274.256-274.256 274.256z' fill='%23a20818'/%3E%3C/svg%3E") center/contain no-repeat; }
.news-list li a { color: inherit; text-decoration: none; display: block; height: 100%; }

/* 通用装饰：下滑更多 */
.load-more {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 181px;
  height: 90px;
  background: url("../media/load_more.png") 100%/100% no-repeat;
  animation: load-more 1s infinite;
  z-index: 10;
}
@keyframes load-more {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* ---------- 职业屏 ---------- */
.slide-roles .role-swiper { position: relative; width: 1920px; height: 1080px; user-select: none; overflow: hidden; }
.role-swiper .role-title { position: absolute; top: 20%; left: 50px; object-fit: contain; z-index: 20; max-width: 400px; }
.role-swiper .role-cover { position: absolute; top: 0; left: 0; width: 1006px; height: 1080px; background: url("../media/role_cover_bg.png") 100%/100% no-repeat; z-index: 5; pointer-events: none; }
.role-swiper .role-bg { position: absolute; inset: 0; width: 1920px; height: 1080px; background-size: cover; background-position: center; z-index: 1; }
.role-swiper .swiper-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.role-swiper .swiper-slide.active { opacity: 1; pointer-events: auto; z-index: 10; }
.role-swiper .role-info { position: absolute; top: 50%; right: 70px; transform: translateY(-50%); object-fit: contain; z-index: 10; filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); max-width: 700px; }
.role-swiper .character { position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; }
.role-swiper .character img { position: absolute; top: 40px; left: 0; width: 1630px; height: 1000px; opacity: 0; transform: translateX(-100%); transition: all 0.3s ease-out; object-fit: contain; object-position: left; }
.role-swiper .character img.active { opacity: 1; transform: translateX(0); }
.role-swiper .role-detail-btn { display: block; position: absolute; bottom: 250px; left: 50px; width: 119px; height: 90px; background: url("../media/role_detail_btn.png") 100%/100% no-repeat; z-index: 20; }
.role-swiper .role-detail-btn:hover { background-image: url("../media/role_detail_btn_active.png"); }
.role-swiper .sex-switch { position: absolute; bottom: 50px; left: 50px; z-index: 20; }
.role-swiper .sex-switch div { width: 332px; height: 78px; cursor: pointer; }
.role-swiper .sex-switch .switch-man { margin-bottom: 20px; background: url("../media/switch_man.png") 0 100% / contain no-repeat; }
.role-swiper .sex-switch .switch-man.active { background-image: url("../media/switch_man_active.png"); }
.role-swiper .sex-switch .switch-woman { background: url("../media/switch_woman.png") 0 100% / contain no-repeat; }
.role-swiper .sex-switch .switch-woman.active { background-image: url("../media/switch_woman_active.png"); }
.role-swiper .play-btn { position: absolute; top: 50%; right: 26%; transform: translateY(-50%); width: 90px; height: 90px; filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)) brightness(0.85); transition: filter 0.3s, transform 0.3s; pointer-events: auto; z-index: 20; cursor: pointer; }
.role-swiper .play-btn:hover { filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)) brightness(1.3); transform: translateY(-50%) scale(1.1); }

/* 职业标签（弧线排布） */
.role-swiper .role-tabs { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); z-index: 20; width: 92px; height: 550px; }
.role-swiper .role-tabs li { position: absolute; width: 92px; height: 67px; background: 100% / contain no-repeat; transition: all 0.3s; cursor: pointer; }
.role-swiper .role-tabs li.bw { left: -120px; top: -30px; background-image: url("../media/tab_bw.png"); }
.role-swiper .role-tabs li.bq { left: -80px; top: 18%; background-image: url("../media/tab_bq.png"); }
.role-swiper .role-tabs li.yw { left: -30px; top: 38%; background-image: url("../media/tab_yw.png"); }
.role-swiper .role-tabs li.yf { left: -30px; top: 62%; background-image: url("../media/tab_yf.png"); }
.role-swiper .role-tabs li.hq { left: -80px; top: 82%; background-image: url("../media/tab_hq.png"); }
.role-swiper .role-tabs li.jg { left: -120px; top: calc(100% + 30px); background-image: url("../media/tab_jg.png"); }
.role-swiper .role-tabs li.active.bw { background-image: url("../media/tab_bw_active.png"); }
.role-swiper .role-tabs li.active.bq { background-image: url("../media/tab_bq_active.png"); }
.role-swiper .role-tabs li.active.yw { background-image: url("../media/tab_yw_active.png"); }
.role-swiper .role-tabs li.active.yf { background-image: url("../media/tab_yf_active.png"); }
.role-swiper .role-tabs li.active.hq { background-image: url("../media/tab_hq_active.png"); }
.role-swiper .role-tabs li.active.jg { background-image: url("../media/tab_jg_active.png"); }

/* ---------- 特色屏 ---------- */
.slide-features { padding: 140px 200px 0; background: url("../media/bg5.jpg?1") 100%/100% no-repeat; box-sizing: border-box; }
.feature-title-wrap { width: 989px; height: 158px; overflow: hidden; }
.feature-title { width: 989px; height: 158px; }
.feature-title .swiper-wrapper { display: flex; flex-direction: column; height: 100%; }
.feature-title .swiper-slide { flex: 0 0 100%; height: 100%; }
.feature-title .swiper-slide img { width: 100%; height: 100%; object-fit: contain; }
.feature-box { position: relative; width: 1300px; margin-top: 30px; display: flex; justify-content: space-between; align-items: center; }
.feature-swiper { width: 999px; height: 481px; overflow: hidden; }
.feature-swiper .swiper-wrapper { display: flex; flex-direction: column; height: 100%; }
.feature-swiper .swiper-slide { flex: 0 0 100%; height: 100%; }
.feature-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: fill; }
.feature-swiper-pagination { position: absolute; width: auto; bottom: -40px; left: 425px; z-index: 10; display: flex; gap: 8px; height:21px; padding:0 4px 4px; }
.feature-swiper-pagination .swiper-pagination-bullet { width: 17px; height: 17px; background: url("../media/feature_pagination_dot.png") 100%/100% no-repeat; opacity: 1; cursor: pointer; }
.feature-swiper-pagination .swiper-pagination-bullet-active { width: 18px; height: 17px; background: url("../media/feature_pagination_dot_active.png") 100%/100% no-repeat; }
.feature-thumbs { width: 270px; height: 420px; overflow: hidden; margin-left: 30px; }
.feature-thumbs .swiper-wrapper { display: flex; flex-direction: column; }
.feature-thumbs .swiper-slide { height: 118px; margin-bottom: 22px; transition: transform 0.3s, filter 0.3s; filter: brightness(0.45); cursor: pointer; }
.feature-thumbs .swiper-slide img { width: 239px; height: 118px; object-fit: fill; }
.feature-thumbs .swiper-slide.active { transform: scale(1.2); filter: brightness(1); }
.customer-service { position: absolute; right: 70px; bottom: 70px; display: flex; align-items: center; justify-content: flex-end; color: #3a3a3a; font-size: 20px; }
.customer-service .wechat, .customer-service .email { width: 70px; height: 70px; position: relative; }
.customer-service .wechat { background: url("../media/customer_service_wechat.png") 100%/100% no-repeat; }
.customer-service .email { background: url("../media/customer_service_email.png") 100%/100% no-repeat; }
.customer-service .qrcode { display: none; position: absolute; top: -180px; right: 60px; width: 171px; height: 181px; padding: 28px 30px 0; background: url("../media/share_qrcode_bg.png") 100%/100% no-repeat; text-align: center; z-index: 10; }
.customer-service .qrcode img { width: 110px; height: 110px; }
.customer-service .wechat:hover .qrcode { display: block; }
.customer-service .email .content { display: none; justify-content: center; align-items: center; position: absolute; top: -55px; right: 60px; padding-bottom: 3px; width: 300px; height: 57px; background: url("../media/email_bg.png") 100%/100% no-repeat; z-index: 10; color: #fff; }
.customer-service .email:hover .content { display: flex; }
.customer-service .tel { margin-left: 20px; }

/* ---------- 页脚屏 ---------- */
.slide-footer { background: #000; overflow: auto; }
.footer-fit { width: 1920px; }
.site-footer-inner { padding: 40px 0 20px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #000; font-size: 14px; color: #fff; }
.site-footer-inner .footer-links a { color: #fff; text-decoration: none; margin: 0 10px; }
.site-footer-inner .addr { margin: 10px 0; }
.site-footer-inner .addr a { color: #fff; text-decoration: none; margin: 0 8px; }
.site-footer-inner .p2 { margin: 4px 0; opacity: 0.85; }
.site-footer-inner .ageTips { margin-top: 10px; }
.site-footer-inner .ageTips img { width: 60px; cursor: pointer; margin: 0 auto; }

/* ---------- 侧边导航（下载） ---------- */
.side-nav { position: absolute; top: 50%; right: 0; width: 200px; height: 385px; background: url("../media/download_side_nav_bg.png") 100%/100% no-repeat; z-index: 30; transform: translateY(-50%); transition: transform 0.3s; }
.side-nav.collapse { transform: translateY(-50%) translateX(100%); }
.side-nav .side-nav-handler { position: absolute; bottom: 20px; left: -19px; width: 21px; height: 74px; background: url("../media/side_collapse.png") 100%/100% no-repeat; cursor: pointer; }
.side-nav .side-nav-handler.expand { background-image: url("../media/side_expand.png"); }
.side-nav .qrcode { display: flex; justify-content: center; position: absolute; top: 45px; left: 50%; width: 179px; height: 191px; padding-top: 10px; transform: translateX(-50%); background: url("../media/side_download_qrcode_bg.png") 100%/100% no-repeat; box-sizing: border-box; }
.side-nav .qrcode img { width: 150px; height: 150px; }
.side-nav .store { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); }
.side-nav .store .btn { display: block; width: 179px; height: 53px; }
.side-nav .store .btn.ios { background: url("../media/side_download_ios_btn.png") 100%/100% no-repeat; }
.side-nav .store .btn.android { background: url("../media/side_download_android_btn.png") 100%/100% no-repeat; margin-top: 10px; }

/* ---------- 浮层 ---------- */
.video-popup-mask { display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); z-index: 99990; }
.video-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1000px; max-width: 90vw; aspect-ratio: 1000 / 563; background: #000; z-index: 99999; }
.video-popup video { width: 100%; height: 100%; }
.video-popup-close { position: absolute; top: -50px; right: 0; width: 40px; cursor: pointer; }

.sdk-wrapper { display: none; position: fixed; inset: 0; z-index: 99980; }
.sdk-wrapper .laymark { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.parental_guard { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1000px, 92vw); height: min(800px, 88vh); background: #fff; color: #091c28; border-radius: 4px; padding: 30px 40px; overflow: auto; }
.parental_guard .user-close { position: absolute; top: 10px; right: 10px; width: 22px; cursor: pointer; }
.parental_guard .user-jump h2 { text-align: center; font-size: 22px; }
.parental_guard .user-jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.parental_guard .user-jump a { color: #c02125; cursor: pointer; }
.parental_guard .sdk-wrapes { margin-top: 16px; }
.parental_guard .sdk-wrapes h2 { font-size: 18px; }
.parental_guard .user-content { font-size: 14px; line-height: 1.75em; }
.parental_guard .user-content h4 { margin: 14px 0 4px; }
.parental_guard .user-content a { color: #c02125; }

.agetips-laymark { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99970; }
.agetips-nr { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1029px; max-width: 92vw; height: 558px; max-height: 88vh; background: url("../media/agetips_bg.png") 100%/100% no-repeat; z-index: 99971; }
.agetips-close { position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); }
.agetips-close img { width: 50px; cursor: pointer; }
.agetips-text { width: 720px; max-width: 80%; margin: 30px auto 0; height: 460px; overflow: auto; line-height: 2; color: #fff; font-size: 17px; }
.agetips-text .agetips-span { font-weight: 600; display: block; color: #f00; }

/* ---------- 子页通用 ---------- */
body.subpage { overflow-x: hidden; }
.subpage { min-height: 100vh; background: #000; }
.subpage .site-header { position: fixed; }
.site-header.subpage-header { position: fixed; }

/* 职业详情 */
.roles_content { margin: 0 auto; max-width: 1920px; }
.roles_main_bg { position: relative; display: flex; align-items: center; justify-content: center; }
.roles_main_bg > img { display: block; width: 100%; max-width: 1920px; object-fit: contain; }
.skill_list { position: absolute; bottom: 18%; left: 55%; display: flex; gap: 18px; }
.skill_item { display: flex; flex-direction: column; align-items: center; font-size: 16px; color: #9b9b9b; cursor: pointer; filter: grayscale(1); }
.skill_item.active { filter: grayscale(0); color: #c00; }
.skill_item img { width: 64px; height: 64px; object-fit: contain; }
.skill_content { display: none; position: absolute; bottom: 12%; left: 56%; width: 460px; height: 90px; overflow: hidden; color: #c0c0c0; font-size: 15px; }
.skill_content.active { display: block; }
.subpage .news_footer { margin-top: 0; }
.subpage .site-footer-inner { background: #000; }

/* 资讯列表 / 详情 */
.article_content { width: min(1200px, 92vw); margin: 0 auto; padding-top: 160px; padding-bottom: 80px; }
.article_content .title { width: 638px; max-width: 100%; height: 48px; background: url("../media/article_title.png") 100%/100% no-repeat; }
.article_tabs { display: flex; align-items: center; margin: 40px 0; color: #fff; font-size: 24px; }
.article_tabs li { width: 60px; height: 30px; margin-right: 80px; cursor: pointer; }
.article_tabs li.active { background: url("../media/news_tab_active.png") 35% 50% / contain no-repeat; }
.article_tabs li a { color: inherit; text-decoration: none; }
.article_list li { display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 182px; margin-top: 26px; padding: 16px 22px; background: url("../media/article_block_bg.png") 100%/100% no-repeat; transition: transform 0.3s; box-sizing: border-box; }
.article_list li:hover { transform: translateX(-30px); }
.article_list li a { color: inherit; text-decoration: none; display: block; }
.article_list li h1 { margin: 0; font-size: 22px; color: #202020; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article_list li p { margin: 10px 0 0; font-size: 17px; color: #695029; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.article_list li .info { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 16px; color: #666; }
.article_list li .line { flex: 1; height: 1px; background: #9fa1a2; margin: 0 10px; }
.article_list li .tab-name { position: relative; padding-right: 15px; color: #a20818; }
.article_list li .tab-name::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M398.499 236.5l274.256 274.256-274.256 274.256z' fill='%23a20818'/%3E%3C/svg%3E") center/contain no-repeat; }

.article-detail-page .detail { padding-top: 160px; }
.article-detail-page .detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.article-detail-page .back { color: #fff; text-decoration: none; border: 1px solid #fff; padding: 4px 14px; border-radius: 4px; font-size: 14px; }
.article-detail-page .cat { color: #a20818; font-size: 16px; }
.article-detail-page .detail-title { font-size: 30px; color: #fff; margin: 6px 0 14px; }
.article-detail-page .detail-meta { color: #999; font-size: 15px; margin-bottom: 20px; }
.article-detail-page .detail-body { color: #ddd; font-size: 17px; line-height: 1.9; background: url("../media/article_bg.jpg") top/100% no-repeat; padding: 20px; border-radius: 6px; }
.article-detail-page .detail-body img { max-width: 100%; height: auto; }
.article-detail-page .detail-body a { color: #6cf; }
.article-detail-page .detail-body p { margin: 0 0 14px; }

/* 客服中心 */
.service-page .middleBlock { max-width: 1200px; margin: 0 auto; padding-top: 140px; padding-bottom: 40px; }
.service-banner img { width: 100%; border-radius: 8px; }
.serviceList { display: flex; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
.serviceList li { flex: 1 1 300px; background: #111; border: 1px solid #333; border-radius: 8px; padding: 28px; text-align: center; }
.serviceList li .img { font-size: 40px; margin-bottom: 12px; color: #c02125; }
.serviceList li h2 { font-size: 20px; margin: 0 0 10px; }
.serviceList li .hint { font-size: 14px; color: #bbb; line-height: 1.7; }
.serviceList li .btn { display: inline-block; margin-top: 16px; padding: 10px 26px; background: #c02125; color: #fff; border-radius: 4px; text-decoration: none; cursor: pointer; }
.serviceList li .tel { display: none; position: absolute; }
.companyTo { margin-top: 40px; text-align: center; color: #ccc; font-size: 14px; padding: 30px 0; border-top: 1px solid #222; }
.companyTo .about a { color: #fff; text-decoration: none; margin: 0 10px; }
.companyTo .about .notice-title { margin: 0 10px; }
.companyTo .notice-links { display: inline-flex; gap: 8px; list-style: none; padding: 0; }
.companyTo .Company-IF p { margin: 6px 0; }

/* 通用页 /pages */
.page_content { width: min(1200px, 92vw); margin: 0 auto; padding-top: 160px; padding-bottom: 80px; }
.page-title { font-size: 30px; color: #fff; }
.page-body { color: #ddd; font-size: 17px; line-height: 1.9; margin-top: 20px; }
.page-body img { max-width: 100%; height: auto; }

/* 预约/下载引导页 */
.sy-page-inner { min-height: 100vh; }
.sy-banner { position: relative; min-height: 80vh; background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: center; }
.sy-download { display: flex; align-items: center; justify-content: center; margin-bottom: 8%; gap: 18px; flex-wrap: wrap; }
.sy-download .qrcode img { width: 150px; height: 150px; }
.sy-download .store { display: flex; flex-direction: column; gap: 10px; }
.sy-download .btn { width: 211px; height: 63px; display: inline-block; }
.sy-download .btn.ios { background: url("../media/download_ios_btn.png") 100%/100% no-repeat; }
.sy-download .btn.android { background: url("../media/download_android_btn.png") 100%/100% no-repeat; }
.sy-download .third-party { width: 121px; height: 138px; display: inline-block; }
.sy-download .third-party.mumu { background: url("../media/download_mumu_btn.png") 100%/100% no-repeat; }
.sy-download .third-party.sd { background: url("../media/download_sd_btn.png") 100%/100% no-repeat; }

/* 404 */
.notfound { text-align: center; padding: 200px 20px; color: #fff; }
.notfound a { color: #6cf; }

/* blocks 可视化层 */
.blocks-layer { position: absolute; inset: 0; pointer-events: none; z-index: 25; }
.blocks-layer .block { position: absolute; pointer-events: auto; }
.blocks-layer .block-natural { position: static; display: inline-block; margin: 8px; }
.blocks-layer .block img { width: 100%; height: 100%; object-fit: cover; }
.blocks-layer .block-text { color: #fff; font-size: 16px; }
.blocks-layer .block-video { width: 100%; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.blocks-layer .block-video img { width: 80px; height: 80px; }

/* 按原站尺寸纠正，不把1920画布缩小塞进视口。 */
.news-box { font-family: cursive, "KaiTi", "楷体", "Microsoft YaHei", Arial, sans-serif; }
.news-swiper { box-sizing: content-box; }
.news-tabs .more-news { margin-left: 0; }
.slide-roles .role-swiper { width: 100%; height: 100%; }
.role-swiper .role-bg { width: 1920px; height: 1080px; background-size: 1920px 1080px; background-position: 0 0; }
.role-swiper .character img { top: 0; }
.role-swiper .role-info { max-width: none; }
.role-swiper .role-title { max-width: none; }
.role-swiper .play-btn { width: auto; height: auto; }
.feature-title .swiper-wrapper, .feature-swiper .swiper-wrapper { flex-direction: row; transition: transform .3s; }
.feature-title .swiper-slide, .feature-swiper .swiper-slide { min-width: 100%; }
.feature-thumbs { width: 300px; margin-left: 50px; flex-shrink: 1; position: relative; }
.feature-thumbs .swiper-wrapper { position: relative; height: 420px; }
.feature-thumbs .swiper-slide { position: absolute; top: 153.333px; left: 0; height: 113.333px; margin: 0; width: 100%; filter: brightness(.4); }
.feature-thumbs .swiper-slide.active { filter: brightness(1); }
.customer-service { bottom: auto; margin-top: 30px; }
.customer-service .wechat, .customer-service .email { position: static; }
.customer-service .qrcode { right: 275px; }
.customer-service .email .content { right: 138px; }
.customer-service .email a { text-decoration: none; }
.footer-fit { width: 100%; }
.site-footer-inner { position: relative; padding: 20px 0; }
.site-footer-inner p { margin: 5px 0 !important; }
.site-footer-inner .footer-links a { margin: 0; text-decoration: underline; }
.site-footer-inner .addr a { margin: 0; text-decoration: underline; }
.site-footer-inner .p2 { opacity: 1; }
.site-footer-inner .ageTips { position: absolute; right: 20%; top: 50%; transform: translateY(-50%); margin: 0; }
.site-footer-inner .ageTips img { width: 76px; }
.side-nav { position: fixed; }
.site-header .nav-sep { font-size: 16px; opacity: 1; }
.share-btn:focus-within .share-qrcode, .share-btn.open .share-qrcode { display: block; }
.load-more { cursor: pointer; }
.skill_item:focus-visible, [role="button"]:focus-visible, .swiper-pagination-bullet:focus-visible { outline: 2px solid #b89e5e; outline-offset: 3px; }
@media (max-width: 768px) {
  .page_content { padding-top: 100px; }
}

/* 降低动态偏好：关闭过渡与无限动画 */
@media (prefers-reduced-motion: reduce) {
  .fp-wrapper, .load-more, .news-list li, .dljh-stage * { transition: none !important; animation: none !important; }
  .load-more { display: none; }
}