body:before {
    content: '';
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    height: 550px;
    background-image: url(/statics/pc/image/blur-shape.png);
    background-size: cover;
    z-index: -1;
  }
  
  .page-header {
      background: none !important;
  }
  
  .io-black-mode .page-header {
      background: rgba(44,46,47,0.7) !important;
  }
  
  .url-card .max .url-img {
      width: 40px;
    height: 40px;
  }
  
  .panel-body.single.mt-2 img {
      border-radius: 6px;
  }
  
  .meta-media {
    position: relative;
    margin-bottom: 30px;
    float: left;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
  }
  .video {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  /* 选中状态 */
a.active,
.io-grey-mode .sidebar-item.active > a,
.io-grey-mode .sidebar-item > a.active {
    border-radius: 0.2rem;
    color: #7041f2;
    background: #8785854d;
}

  .customize-width{max-width:1900px}
  .sidebar-nav{width:220px}@media (min-width: 768px){.main-content{margin-left:220px;}
  .main-content .page-header{left:220px;}}
  /*.customize-width{max-width:1850px}*/
  .sidebar-nav{width:200px}@media (min-width: 768px){.main-content{margin-left:200px;}.main-content .page-header{left:200px;}}</style><style>.panel-body a:not(.no-c){color:#5b3fea}.panel-body a:not(.no-c):hover{color:#2069c9}a:hover,.io-grey-mode .sidebar-show,.io-grey-mode .sidebar-item>a:hover,.io-grey-mode .sidebar-item li>a:hover,.home-like:hover,
          .io-grey-mode .sidebar-popup>div>ul>li>a:hover{color:#7041f2}
          .header-mini-btn label:hover path{ stroke:#7041f2}
          .url-card .max .tga a:not(.no-tag):hover,.card-app.card .tga a:not(.no-tag):hover{background:#7041f2}
          .sidebar .url-card .card:hover{border: 1px solid #7041f2!important;}.tags i{color:#5a3ee8}.custom-piece_c_b{background:#5a3ee8!important}.custom-piece_c{color:#5a3ee8!important}.slider_menu[sliderTab] .anchor,.customize-menu .btn-edit,.badge-danger,.comment-list .rank,.sidebar .card-header:after{background:#5a3ee8}.badge-outline-primary{color:#5a3ee8;border:#5a3ee8 solid 1px}.posts-nav .page-numbers.current,.posts-nav .page-numbers:not(.dots):hover,#comments-navi>a:hover,#comments-navi>.current,.page-nav>a:hover span,.page-nav>.current span{background-color:#5a3ee8;box-shadow: 0px 5px 20px -3px rgba(90,62,232,.6);}     
  .custom-control-input:not(:disabled):active~.custom-control-label::before{background-color:rgba(90,62,232,.15);border-color:rgba(90,62,232,.15);}
  .custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(90,62,232,.25)}
  .custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#5a3ee8}
  .custom-control-input:checked~.custom-control-label::before{border-color:#5a3ee8;background-color:#5a3ee8}
  .btn-search:hover,.btn-search.current{background-color:#5a3ee8;box-shadow: 0 5px 20px -3px rgba(90,62,232,.6)}.btn-search.current:after{border-top-color:#5a3ee8}.panel-body h2,.panel-body h3 {border-color:#5a3ee8}.custom_btn-outline {color: #3e44e8;background-color: transparent;border-color: #3e44e8;}
  .custom_btn-outline:hover {color: #ffffff;background-color: #14171B;border-color: #14171B;}
  .custom_btn-outline:focus, .custom_btn-outline.focus {color: #14171B;box-shadow: 0 0 0 0 transparent!important;background-color: transparent;}
  .custom_btn-outline.disabled, .custom_btn-outline:disabled {color: #3e44e8;background-color: transparent!important;}
  .custom_btn-outline:not(:disabled):not(.disabled):active, .custom_btn-outline:not(:disabled):not(.disabled).active,.show > .custom_btn-outline.dropdown-toggle {color: #fff;background-color: #3e44e8;border-color: #3e44e8;}
  .custom_btn-outline:not(:disabled):not(.disabled):active:focus, .custom_btn-outline:not(:disabled):not(.disabled).active:focus,.show > .custom_btn-outline.dropdown-toggle:focus {box-shadow: 0 0 0 0 transparent!important;}
  .custom_btn-d {color: #ffffff;background-color: #3e44e8;border-color: #3e44e8;}
  .custom_btn-d:hover {color: #ffffff;background-color: #14171B;border-color: #14171B;}
  .custom_btn-d:focus,.custom_btn-d.focus {color: #ffffff;background-color: #14171B;border-color: #14171B;box-shadow: 0 0 0 0 transparent!important;}
  .custom_btn-d.disabled,.custom_btn-d:disabled {color: #ffffff;background-color:#3e44e8;border-color: #3e44e8;}
  .custom_btn-d:not(:disabled):not(.disabled):active,.custom_btn-d:not(:disabled):not(.disabled).active{color: #ffffff;background-color: #14171B;border-color: #14171B;}
  .custom_btn-d:not(:disabled):not(.disabled):active:focus,.custom_btn-d:not(:disabled):not(.disabled).active:focus{box-shadow: 0 0 0 0 transparent!important;}
  .btn.custom_btn-d {color: #ffffff;background-color: #3e44e8;border-color: #3e44e8;}
  .btn.custom_btn-d:hover {color: #ffffff;background-color: #14171B;border-color: #14171B;}
  .btn.custom_btn-d:focus,.btn.custom_btn-d.focus {color: #ffffff;background-color: #14171B;border-color: #14171B;box-shadow: 0 0 0 0 transparent!important;}
  .btn.custom_btn-d.disabled,.btn.custom_btn-d:disabled {color: #ffffff;background-color:#3e44e8;border-color: #3e44e8;}
  .btn.custom_btn-d:not(:disabled):not(.disabled):active,.btn.custom_btn-d:not(:disabled):not(.disabled).active,.show > .custom_btn-d.dropdown-toggle {color: #ffffff;background-color: #14171B;border-color: #14171B;}
  .btn.custom_btn-d:not(:disabled):not(.disabled):active:focus,.btn.custom_btn-d:not(:disabled):not(.disabled).active:focus,.show > .custom_btn-d.dropdown-toggle:focus {box-shadow: 0 0 0 0 transparent!important;}
  .btn-dark:hover{background-color:#3e44e8;border-color:#3e44e8}
  .sidebar .card .searchform input[type='submit']{border: 1px solid #3e44e8;background-color:#3e44e8}
  .sidebar .card .searchform input[type='submit']:hover{border: 1px solid #14171B;background-color:#14171B}


  .loader {
    position: absolute;
    top: 50%;
    margin-left: -50px;
    left: 50%;
    animation: speeder 0.4s linear infinite
}

.loader-text {
    position: absolute;
    text-transform: uppercase;
    left: 50%;
    top: 53%;
    margin-left: -20px
}

.loader>span {
    height: 5px;
    width: 35px;
    background: #000;
    position: absolute;
    top: -19px;
    left: 60px;
    border-radius: 2px 10px 1px 0
}

.base span {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 100px solid #000;
    border-bottom: 6px solid transparent
}

.base span:before {
    content: "";
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    right: -110px;
    top: -16px
}

.base span:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-right: 55px solid #000;
    border-bottom: 16px solid transparent;
    top: -16px;
    right: -98px
}

.face {
    position: absolute;
    height: 12px;
    width: 20px;
    background: #000;
    border-radius: 20px 20px 0 0;
    transform: rotate(-40deg);
    right: -125px;
    top: -15px
}

.face:after {
    content: "";
    height: 12px;
    width: 12px;
    background: #000;
    right: 4px;
    top: 7px;
    position: absolute;
    transform: rotate(40deg);
    transform-origin: 50% 50%;
    border-radius: 0 0 0 2px
}

.loader>span>span {
    width: 30px;
    height: 1px;
    background: #000;
    position: absolute;
    animation: fazer1 0.2s linear infinite
}

.loader>span>span:nth-child(2) {
    top: 3px;
    animation: fazer2 0.4s linear infinite
}

.loader>span>span:nth-child(3) {
    top: 1px;
    animation: fazer3 0.4s linear infinite;
    animation-delay: -1s
}

.loader>span>span:nth-child(4) {
    top: 4px;
    animation: fazer4 1s linear infinite;
    animation-delay: -1s
}

@keyframes fazer1 {
    0% {
        left: 0
    }

    100% {
        left: -80px;
        opacity: 0
    }
}

@keyframes fazer2 {
    0% {
        left: 0
    }

    100% {
        left: -100px;
        opacity: 0
    }
}

@keyframes fazer3 {
    0% {
        left: 0
    }

    100% {
        left: -50px;
        opacity: 0
    }
}

@keyframes fazer4 {
    0% {
        left: 0
    }

    100% {
        left: -150px;
        opacity: 0
    }
}

@keyframes speeder {
    0% {
        transform: translate(2px,1px) rotate(0deg)
    }

    10% {
        transform: translate(-1px,-3px) rotate(-1deg)
    }

    20% {
        transform: translate(-2px,0px) rotate(1deg)
    }

    30% {
        transform: translate(1px,2px) rotate(0deg)
    }

    40% {
        transform: translate(1px,-1px) rotate(1deg)
    }

    50% {
        transform: translate(-1px,3px) rotate(-1deg)
    }

    60% {
        transform: translate(-1px,1px) rotate(0deg)
    }

    70% {
        transform: translate(3px,1px) rotate(-1deg)
    }

    80% {
        transform: translate(-2px,-1px) rotate(1deg)
    }

    90% {
        transform: translate(2px,1px) rotate(0deg)
    }

    100% {
        transform: translate(1px,-2px) rotate(-1deg)
    }
}

.longfazers {
    position: absolute;
    width: 100%;
    height: 100%
}

.longfazers span {
    position: absolute;
    height: 2px;
    width: 20%;
    background: #000
}

.longfazers span:nth-child(1) {
    top: 20%;
    animation: lf 0.6s linear infinite;
    animation-delay: -5s
}

.longfazers span:nth-child(2) {
    top: 40%;
    animation: lf2 0.8s linear infinite;
    animation-delay: -1s
}

.longfazers span:nth-child(3) {
    top: 60%;
    animation: lf3 0.6s linear infinite
}

.longfazers span:nth-child(4) {
    top: 80%;
    animation: lf4 0.5s linear infinite;
    animation-delay: -3s
}

@keyframes lf {
    0% {
        left: 200%
    }

    100% {
        left: -200%;
        opacity: 0
    }
}

@keyframes lf2 {
    0% {
        left: 200%
    }

    100% {
        left: -200%;
        opacity: 0
    }
}

@keyframes lf3 {
    0% {
        left: 200%
    }

    100% {
        left: -100%;
        opacity: 0
    }
}

@keyframes lf4 {
    0% {
        left: 200%
    }

    100% {
        left: -100%;
        opacity: 0
    }
}

.io-black-mode .loader>span {
    background: #f1404b
}

.io-black-mode .base span {
    border-right-color: #f1404b
}

.io-black-mode .base span:before {
    background: #f1404b
}

.io-black-mode .base span:after {
    border-right-color: #f1404b
}

.io-black-mode .face {
    background: #f1404b
}

.io-black-mode .face:after {
    background: #f1404b
}

.io-black-mode .loader>span>span {
    background: #f1404b
}

.io-black-mode .longfazers span {
    background: #f1404b
}

  /*****通用分页****/
.m-pagination {
	text-align: center;
  }
  .m-pagination .page {
  border-radius: 0.2rem;
	padding: 0 6px;
	display: inline-block;
	zoom: 1;
	vertical-align: middle;
	min-width: 35px;
	height: 35px;
	line-height: 35px;
  background: #767b7b1c;
	border: 1px solid #e6ebee;
  }
  .m-pagination .page:hover,
  .m-pagination .page.curr {
	background: #5a3ee8;
	color: #fff;
	border-color: #5a3ee8;
  }
  /*.m-pagination .prev {
	background: url("../images/arrow_l.png") no-repeat center;
  }*/
  .m-pagination .prev:hover {
	background: #5a3ee8 url("../image/arrow_l.png") no-repeat center;
  }
  /*.m-pagination .next {
	background: url("../images/arrow_r.png") no-repeat center;
  }*/
  .m-pagination .next:hover {
	background: #5a3ee8 url("../images/arrow_r_a.png") no-repeat center;
  }
  .m-pagination ul li {
	display: inline;
  }
  .m-pagination .active {
	line-height: 35px;
	height: 35px;
	min-width: 35px;
	border: 1px solid #e6ebee;
	display: inline-block;
	background: #5a3ee8;
	color: #fff;
	border-color: #5a3ee8;
  }
  .m-pagination .first,
  .m-pagination .last {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: middle;
  }
  .m-pagination .first,
  .m-pagination .last {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: middle;
  }
  .g-input-page {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	color: #333;
	margin-left: 10px;
  }
  .g-input-page .btn {
	min-width: 50px;
	margin-left: 6px;
  }
  .g-input-page .input {
	width: 52px;
	padding-left: 8px;
	height: 35px;
	line-height: 35px;
	border: 1px solid #e6ebee;
	margin: 0 10px;
  }
  /*****通用分页 end****/

  .title-ellipsis {
    display: -webkit-box;                /* 使用弹性盒子模型 */
    -webkit-line-clamp: 1;               /* 限制显示行数为 1 行 */
    -webkit-box-orient: vertical;        /* 设置为垂直排列 */
    overflow: hidden;                    /* 隐藏超出部分 */
    text-overflow: ellipsis;             /* 使用省略号代替超出部分 */
    white-space: normal;                 /* 允许换行 */
    width: 100%;                          /* 保持宽度为父容器的宽度 */
    line-height: 1.2em;                  /* 行高调整 */
}


/* 默认 PC端样式 */
.custom-container-index {
    padding-left: 12.5rem !important;
    background: #f9f9f9;
}

.custom-container-list {
    padding-left: 12.8rem !important;
    padding-right: 12.8rem !important;
    background: #f9f9f9;
}

.custom-container-listart {
    padding-right: 18rem !important;
    background: #f9f9f9;
}

.article-list{
    margin-right: 0rem !important;
    margin-left: -18rem;
}

.main-content-new{
    margin-left: 0.5rem !important;
}

.col-xl-3{
    max-width: 20% !important;
}

/* 手机端样式（屏幕宽度小于768px时） */
@media (max-width: 768px) {
    .custom-container-index {
        padding-left: 0rem !important;  /* 手机端适配 */
    }
    .custom-container-list {
        padding-left: 0rem !important;  /* 手机端适配 */
        padding-right: 0rem !important; /* 手机端适配 */
    }
    .custom-container-listart {
        padding-right: 0rem !important;
        padding-right: 0rem !important; /* 手机端适配 */
    }
    .article-list{
        margin-right: 0rem !important;
        margin-left: 0rem;
    }
    .main-content-new{
        margin-left: 0rem !important;
    }
    .col-xl-3{
        max-width: 50% !important;
    }
}