@charset "UTF-8";
@import url(./ql.css);

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
a{
  outline: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%;
}

q:before,
q:after {
  content: "";
}

fieldset,
img,
abbr,
acronym {
  border: 0;
}

/* basic */
.c:before,
.c:after {
  content: "";
  display: table;
}

.c:after {
  clear: both;
}

.c {
  zoom: 1;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.container * {
  box-sizing: border-box;
}

.hide {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sp {
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/sp.png);
}

.db {
  display: block;
  font-size: 0;
}

html,
body {
  background-color: #101010;
  position: relative;
  overflow-x: hidden;
  min-width: 1200px;
}
#_overlay_{
  right: 0;
  bottom: 0;
  height: auto !important;
}
/* 通用样式 */
.wrap * {
  box-sizing: border-box;
}

.wrap {
  min-height: 1850px;
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/bg.jpg) no-repeat 50% 0;
  padding-top: 92px;
  box-sizing: border-box;
}

.nav_bg {
  width: 100%;
  height: 62px;
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/nav_bg.png) no-repeat 50% 0/auto 100%;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.logo_box{
  width: 240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo{
  width: 104px;
  height: 42px;
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/logo.png) no-repeat 50% 0/100%;
}
.nav_box {
  width: 100%;
  height: 62px;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.logo_wallpaper {
  width: 119px;
  height: 41px;
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/logo2.png) no-repeat 50% 0/100%;
}

.btns_nav {
  display: flex;
  justify-content: center;
}

.btns_nav a {
  width: 165px;
  height: 61px;
  transition: .3s;
}

.btn_wallpaper {
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/btn_wallpaper.png) no-repeat 50% 0/100%;
}

.btn_fanwork {
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/btn_fanwork.png) no-repeat 50% 0/100%;
}

.btn_wallpaper.active {
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/btn_wallpaper_active.png) no-repeat 50% 0/100%;
}

.btn_fanwork.active {
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/btn_fanwork_active.png) no-repeat 50% 0/100%;
}

.search_box {
  width: 248px;
  height: 30px;
  background-color: #000000;
  border-radius: 15px;
  border: 1px solid rgba(123, 123, 123, .8);
  display: flex;
  align-items: center;
  padding-left: 17px;
}

.search_icon {
  background-position: -125px 0;
  width: 13px;
  height: 15px;

}

.search_box input {
  flex: 1;
  margin-left: 5px;
  background: none;
  border: none;
  font-size: 16px;
  color: rgba(255, 255, 255, .8);
  outline: none;
}

/* wallpaper */
.page_wallpaper {
  width: 1200px;
  margin: 0 auto;
}

.swiper {
  overflow: hidden;
}

.swiper_wallpaper {
  width: 1414px;
  height: 435px;
  margin-left: -107px;
  position: relative;
}

.swiper_wallpaper .swiper-container {
  height: 410px;
}

.swiper_wallpaper .swiper-slide {
  width: 729px;
  height: 410px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, .3);
  opacity: 0;
}

.swiper_wallpaper .swiper-slide img {
  width: 729px;
  height: 410px;
  object-fit: cover;
  filter: brightness(20%);
  transition: .3s;
  border-radius: 20px;
}

.swiper_wallpaper .swiper-slide-active,
.swiper_wallpaper .swiper-slide-prev,
.swiper_wallpaper .swiper-slide-next {
  opacity: 1
}
.swiper_wallpaper .swiper-slide-active img{
  filter: brightness(100%);
}
.swiper_wallpaper .swiper-slide {
  transition-property: all;
}

.sbn_wallpaper,
.sbp_wallpaper {
  background-position: 0 -22px;
  width: 49px;
  height: 56px;
  position: absolute;
  top: 165px;
  z-index: 10;
}

.sbp_wallpaper {
  left: 110px;
}

.sbn_wallpaper {
  right: 110px;
  transform: rotate(180deg);
}

.sp_wallpaper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 420px;
  left: 0;
  width: 100%;
  height: 5px;
}

.sp_wallpaper span {
  width: 30px;
  height: 3px;
  border-radius: 0;
  background: #fff;
  margin: 0 4px;
  transition: .3s;
  opacity: 1;
}

.sp_wallpaper span.swiper-pagination-bullet-active {
  width: 60px;
  height: 5px;
  border-radius: 5px;
  background-color: #ea3657;
}

/* ct_wallpaper */
.tabs_wallpaper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 17px;
  padding-right: 27px;
  margin-bottom: 14px;
}

.tabs_wallpaper a {
  text-align: center;
  margin-left: -5px;
  height: 42px;
  transition: .3s;
  padding: 10px 15px;
}

.tabs_wallpaper a span {
  background: linear-gradient(to bottom, #ed2447, #e74262);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
  padding-right: 10px;
}

.tabs_wallpaper a.active span {
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wp_tab1 {
  margin-left: 0;
}

.tabs_wallpaper a.active {
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/tab_bg3.png) no-repeat 50% 0/100% 100%;
}


.tabs_line {
  margin-top: 10px;
  width: 500px;
  height: 17px;
}

.tabs_wallpaper p {
  width: 150px;
  font-size: 18px;
  background: linear-gradient(to bottom, #ed2447, #e74262);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: auto;
  white-space: nowrap;
  margin-top: 10px;
}
.tabs_wallpaper p em{
  font-style: normal;
}
.list_wp {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 1168px;
  margin: 0 auto;
  list-style: none;
}

.list_wp li {
  /* width: 577px; */
  height: 266px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.img_box {
  position: relative;
  border: 1px solid #656565;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  cursor: pointer;
  transition: .2s;
  /* margin-bottom: 12px; */
}
.img_box::after {
  content: '';
  background-image: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/sp.png);
  background-repeat: no-repeat;
  background-position: -999em -999em;
  width: 61px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 5px;
}
.img_box.selected::after {
  background-position:  -358px 0 ;
}
.img_box.new::after{
  background-position: -226px 0;
}
.img_box.hot::after{
  background-position: -292px 0;
}
.img_box:hover {
  border: 2px solid #eb3458;
}

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

.img_box_big {
  /* width: 577px; */
  /* height: 266px; */
  grid-row: 1 / 3;
  grid-column: span 2;
}
.grid-row-right .img_box_big{
  grid-column: 3 / 5;
}
.grid-row-right .img_box_small:not(.img_box_big):nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
.grid-row-right .img_box_small:not(.img_box_big):nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}
.grid-row-right .img_box_small:not(.img_box_big):nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}
.grid-row-right .img_box_small:not(.img_box_big):nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}
.img_box_small {
  /* width: 283px; */
  /* height: 128px; */
}

.img_box:hover .img_info {
  transform: translateY(0);
}

.img_box_small .img_info {
  height: 30px;
  padding: 0 10px;
}
.img_box_small .img_info p{
  font-size: 14px;
}
.img_box_small .img_info a{
  transform: scale(0.8);
}
.img_info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 52px;
  border-top: 1px solid #eb3458;
  background: rgba(0, 0, 0, .5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  transform: translateY(100%);
  transition: .3s;
}

.img_info p {
  font-size: 18px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: center;
  padding: 0 5px;
}

.img_info a {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #bfbfc7;
}

.info_watch i {
  background-position: -143px 0;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.info_download i {
  background-position: -168px 0;
  width: 23px;
  height: 19px;
  margin-right: 5px;
}

.pagenum_box {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pages_swiper {
  /* width: 164px; */
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
  list-style: none;
}

.pages_swiper li {
  width: 41px;
  height: 32px;
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/page_bg.png) no-repeat 50% 0/100%;
  text-align: center;
  line-height: 32px;
  transition: .3s;
  font-size: 18px;
  color: #131313;
  cursor: pointer;
}

.pages_swiper li.active {
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/page_bg_active.png) no-repeat 50% 0/100%;
  font-weight: bold;
  color: #fff;
}

.btn_page {
  background-position: -196px 0;
  width: 17px;
  height: 20px;
}

.btn_page_next {
  transform: rotate(180deg);
}

.pagenum_box p {
  font-size: 18px;
  color: #ffffff;
  margin-left: 27px;
}

/* pop */
.dia_close {
  background-position: -425px 0;
  width: 34px;
  height: 34px;
  position: absolute;
  top: -30px;
  right: -47px;
}

.dia_img {
  width: 1064px;
  height: 463px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dia_img .img_border {
  width: 819px;
  height: 458px;
  border: 1px solid #ea3657;
  background: linear-gradient(to right bottom, #1c1c1c, #2a2a2a);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.dia_img .swiper-container {
  width: 100%;
  height: 100%;
}

.dia_img .img_border img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sbn_dia,
.sbp_dia {
  background-position: 0 -22px;
  width: 49px;
  height: 56px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.sbp_dia {
  left: 20px;
}

.sbn_dia {
  right: 20px;
  transform: translateY(-50%) rotate(180deg);
}

.dia_info {
  width: 235px;
  height: 463px;
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/dia_info.png) no-repeat 50% 0/100%;
  padding-top: 1px;
  box-sizing: border-box;
}
.dia_info ul{
  height: 460px;
  padding-top: 13px;
  overflow-y: auto;
  box-sizing: border-box;
}
.dia_info.fwdia_info{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 13px;
}
.dia_info.fwdia_info ul{
    height: auto;
}
.dia_info ul::-webkit-scrollbar{
  width: 2px;
}
.dia_info li {
  margin-bottom: 8px;
  padding-left: 22px;
  box-sizing: border-box;
  list-style: none;
}

.dia_info li h6 {
  padding-left: 6px;
  padding-right: 2px;
  position: relative;
  font-size: 18px;
  color: #ffffff;
  line-height: 26px;
  display: flex;
  align-items: center;
}

.dia_info li p {
  font-size: 14px;
  color: #a2a2a2;
  line-height: 20px;
  padding-left: 6px;
  margin-bottom: 7px;
}

li.dia_info_fw p {
  position: relative;
  margin-bottom: 2px;
}

.dia_info li:not(.dia_info_fw) h6::before,
li.dia_info_fw p::before {
  content: '';
  background: #ea3455;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  left: -10px;
  top: 11px;
}
.dia_info li:first-child h6::before {
  content: '';
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/sp.png) no-repeat -112px -82px;
  width: 13px;
  height: 13px;
  position: absolute;
  left: -11px;
  top: 5px;
}

.dia_info li:first-child h6::after {
  /* content: ''; */
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/sp.png) no-repeat 0 -82px;
  width: 104px;
  width: 104px;
  height: 13px;
  display: block;
  margin-left: -20px;
}

.fanword_tips {
  width: 210px;
  height: 96px;
  background: linear-gradient(to bottom right, transparent, rgba(0, 0, 0, .4));
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #7b7b7b;
  line-height: 18px;
  padding: 0 10px;
  border: 1px solid #656565;
  box-sizing: border-box;
  margin: 0 auto ;
}

.download_size {
  width: 194px;
  height: 24px;
  background: #212121;
  border-radius: 4px;
  border: 1px solid #616161;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  margin-bottom: 9px;
}

.download_size span {
  font-size: 12px;
  color: #c9c9c9;
  line-height: 20px;
  padding-left: 13px;
}

.download_size a {
  width: 44px;
  height: 100%;
  background: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.download_size a::after {
  content: '';
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/sp.png) no-repeat -529px 0;
  width: 12px;
  height: 10px;
}

.zoom_box {
  width: 111px;
  height: 33px;
  background: #000000;
  border-radius: 20px;
  position: absolute;
  bottom: 11px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
  border: 1px solid #616161;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 4px;
}

.zoom_box a {
  width: 26px;
  height: 26px;
}

.zoom_minus {
  background-position: -465px 0;
}

.zoom_plus {
  background-position: -497px 0;
}

.zoom_box p {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
}

/* 弹窗图片缩放与拖拽 */

.bigimg-wallpaper .swiper-slide img,
.bigimg-fanwork .swiper-slide img {
  transition: transform 0.2s ease;
  transform-origin: center center;
  will-change: transform;
}

.img_border.can-drag {
  cursor: grab;
}

.img_border.dragging {
  cursor: grabbing;
}

.img_border.dragging .swiper-slide-active img {
  transition: none !important;
}

/* fanwork */
.page_fanwork {
  width: 1180px;
  margin: 0 auto;
}

.contribute_box {
  width: 1180px;
  height: 76px;
  border-radius: 10px;
  background: linear-gradient(to right bottom, #1c1c1c, #2a2a2a);
  margin: 0 auto;
  border: 1px solid #656565;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 27px;
}

.contribute_box h6 {
  font-size: 18px;
  color: #e93658;
  font-weight: bold;
  line-height: 26px;
}

.contribute_box p {
  font-size: 16px;
  color: #979797;
  line-height: 22px;
}

.btn_contribute {
  background-position: -55px -27px;
  width: 162px;
  height: 42px;
  font-size: 18px;
  line-height: 32px;
  padding-top: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

/* news */
.fanswork_news {
  width: 1180px;
  margin: 9px auto 16px;
  display: flex;
  justify-content: space-between;
}

.news_box {
  width: 100%;
  height: 156px;
  border-radius: 10px;
  background: linear-gradient(to right bottom, #1c1c1c, #2a2a2a);
  border: 1px solid #656565;
  padding: 11px 30px 0;
}

.new_header {
  height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #979797;
  margin-bottom: 11px;
}

.new_header h6 {
  font-size: 18px;
  color: #979797;
  font-weight: bold;
}

.new_header a {
  font-size: 16px;
  color: #979797;
}

.list_news li {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.list_news li a {
  position: relative;
  font-size: 16px;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding-left: 4px;
  width: 820px;
}

.list_news li a p {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list_news li a::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00c6ff;
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -2px;
}
#activityAll  li a::before {
  background: #ffb400;
}
.list_news li a:hover {
  color: #ea3657;
}

.list_news li a:hover::before {
  background: #ea3657;
}

.list_news li a i {
  width: 61px;
  height: 24px;
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/sp.png) no-repeat -226px -32px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  box-sizing: border-box;
  padding-top: 7px;
  padding-right: 6px;
  line-height: 1;
  font-style: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3px;
}

.list_news li span {
  font-size: 16px;
  color: #ffffff;
}

.num_fanwork {
  font-size: 18px;
  line-height: 54px;
  padding: 0 18px;
  
  display: flex;
  justify-content: space-between;
}
.num_fanwork p{
  background: linear-gradient(to bottom, #ed2447, #e74262);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.num_fanwork a{
  color: #ed2447;
}
.num_fanwork a:hover{
  text-decoration: underline;
}
.num_fanwork em{
  font-style: normal;
}
.fanwork_content{
  /* 取消固定高度，允许内容自然流动 */
  overflow: visible;
}
/* 不再使用内部滚动条样式 */
.list_fanwork {
  width: 1180px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
  overflow: hidden;
  list-style: none;
}

.fanwork_col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.list_fanwork .item_fanwork {
  width: 100%;
  break-inside: avoid;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.list_fanwork .item_fanwork a {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.list_fanwork .item_fanwork img {
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.list_fanwork .item_fanwork img.loaded {
  opacity: 1;
}

.list_fanwork .item_fanwork::after {
  content: '';
  background-image: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/sp.png);
  background-repeat: no-repeat;
  background-position: -999em -999em;
  width: 61px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 5px;
}
.list_fanwork .item_fanwork.selected::after {
  background-position:  -358px 0 ;
}
.list_fanwork .item_fanwork.new::after{
  background-position: -226px 0;
}
.list_fanwork .item_fanwork.hot::after{
  background-position: -292px 0;
}
.fanwork_info {
  width: 100%;
  height: 106px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .8));
  padding: 68px 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(100%);
  transition: .3s;
}

.fanwork_info p {
  font-size: 16px;
  color: #ffffff;
  flex: 1;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fanwork_info span {
  font-size: 12px;
  color: #c3c3c3;
}

.list_fanwork .item_fanwork:hover .fanwork_info {
  transform: translateY(0);
}

/* 加载状态提示 */
.fanwork_load_tip {
  width: 1180px;
  height: 50px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.fanwork_load_tip p {
  font-size: 16px;
  color: #979797;
}
.load_spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #555;
  border-top-color: #ea3657;
  border-radius: 50%;
  animation: fanwork-spin 0.8s linear infinite;
}
@keyframes fanwork-spin {
  to { transform: rotate(360deg); }
}

.fanwork_bot {
  width: 1180px;
  height: 76px;
  border-radius: 10px;
  background: linear-gradient(to right bottom, #1c1c1c, #2a2a2a);
  margin: 20px auto;
  border: 1px solid #656565;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.fanwork_bot h6 {
  font-size: 18px;
  color: #e93658;
  font-weight: bold;
  line-height: 26px;
}

.fanwork_bot p {
  font-size: 16px;
  color: #979797;
  line-height: 22px;
}
.fanwork_bot em{
  font-style: normal;
}
/* rule */
.dia_Rule{
  width: 575px;
  height: 523px;
  background: url(//game.gtimg.cn/images/dnf/cp/a202605wallpaper/rule_bg.png) no-repeat 50% 0/100%;
  position: relative;
  box-sizing: border-box;
  padding: 49px 22px 0;
}
.rule_head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  padding: 0 18px;
  border-bottom: 1px solid #606060;
  font-size: 14px;
  margin-bottom: 10px;
}
.rule_head span{
  color: #a2a2a2;
}
.rule_head p{
  color: #fbcf5a;
  font-weight: bold;
}
.rule_info{
  font-size: 16px;
  line-height: 24px;
  padding: 0 8px;
  box-sizing: border-box;
  height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}
.rule_info p{
  color: #a2a2a2;
}
.rule_info h6{
  color: #e4e4e4;
  margin-top: 22px;
}
.rule_info img{
  width: 80%;
  display: block;
  margin: 0 auto; 
}
/* 滚动条整体样式 */
::-webkit-scrollbar {
width: 4px;
border-radius: 4px;
background-color: #555;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 4px;
background-color: #555;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #F5F5F5;
}