/*以 .night 开头的css类均为深色模式下的样式*/
 
:root {
    --qszhutibg:0 0% 100%;
    --qszhutiColor:#292525;
    --qsfubiaotiTexeColor:#8e8787;
    --qshoverColor:#fda048;
    --qsgexingColor:#fda048;
    --sszhutibg:225deg 5% 15.69%;
    --sszhutiColor:#ffffff;
    --ssgexingColor:#fda048;
    --zhutiColor:#ffffff;
    --zhutiBgColor:linear-gradient(0deg,#fff,#f3f5f8);
    --zhubiaotiTextColor:#eeeeee;
    --fubiaotiTexeColor:#ababae;
    --divBorderColor:#e1e6f0;
}

@font-face {
    font-family: "OPPOSans-Ver2-Medium";
    src: url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Medium.woff2) format("woff2"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Medium.woff) format("woff"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Medium.ttf) format("truetype");
}

@font-face {
    font-family: "OPPOSans-Ver2-Regular";
    src: url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Regular.woff2) format("woff2"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Regular.woff) format("woff"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Regular.ttf) format("truetype");
}

a, a:hover{
    color: var(--qshoverColor)
}
.banner h2 span, .menu li a{
    font-family:'OPPOSans-Ver2-Regular';
}
.menu li::before, .tagscloud li:hover{
    background: var(--qshoverColor);
}
.head .menu ul:hover a{
    color: var(--qsfubiaotiTexeColor);
}
.filternav li.active::after{
    background: var(--qszhutiColor);
}
#divTags ul li a:hover, .post .tags a:hover {
    color: var(--qshoverColor);
    border: 1px solid var(--qshoverColor);
}
 
.menu li.subcate:hover .subnav a:hover, .menu li .subnav a:hover::after, .head .menu li a:hover, .schico a:hover:after, .cmtsfoot .reply:hover, .cmtsfoot .reply:hover::before, .cmtarea textarea:focus, .backtotop:hover i:after, .archivedate.on, .archivelist h3 a:hover, .blog-slider:hover .blog-slider__title, .footer a:hover, #tpure_User .sideuserlink a:hover i, .night #tpure_User .sideuserlink a:hover i{
    color: var(--qshoverColor);
}
.sidebox dd a:hover, .friendlink li a:hover, .sidebox dd .sidecmtarticle a:hover, .relateinfo h3 a:hover, .pages a:hover, .sch-m input{
    color: var(--qshoverColor);
    border-color: var(--qshoverColor);
}

.setnight div:hover{
    box-shadow: inset 8px -8px 0 0 var(--qshoverColor);
}

.banner .wrap .TitleAnimate{
    text-shadow: 2px 2px 4px #747474, -2px -2px 4px #e4e8eb;
    text-stroke: 1px #ffffff;
    -webkit-text-stroke: 1px #ffffff;
    background-clip: text;
    color: transparent;
}
.menu li:hover a, .sidecmtinfo em, .pagebar .now-page, .cmtpagebar .now-page, .menu li::before, .pagebar a:hover, .cmtpagebar a:hover, .menu li a:hover, .head .menu li.on a, .filternav li.active, .filternav li.active i::before, .footer a{
    color: var(--qszhutiColor);
}
.lazyline, .menuico span{
    background-color: var(--qsgexingColor);
} 
#lanbtn[title="切换简体中文"] svg, #lanbtn svg:hover{
    fill: var(--qshoverColor);
}  
.blog-slider .adtitle, .post .info .ctrl a svg {
    fill: var(--qsgexingColor);
}
 
body, .menu li a, .blog-slider__title, span.blog-slider__code a, .sideusercon h4, .friendlink li a, .relateinfo h3 a, .archivelist h3 a, .tagscloud li a, .footer, .sidebox dd a, .tags li, .sidetitle, .tags li, #divTags li a, .pages p, .posttitle h1, .posttitle h2, .posttitle h3, .posttitle h4, .posttitle h5, .posttitle h6, .post .tags, .cmtsubmit button::before, .cmtsubmit button, .cmtsubmit button:hover, .cmtsubmit button:hover::before, .cmtsubmit span{
     color: var(--qszhutiColor);
}
span.blog-slider__code span, span.blog-slider__code a, .blog-slider__text, .sidebox dd .sidecmtarticle a, .relateinfo p, .copynotice, .sideinfo, .sidecmtinfo, .archivetime, .tagscloud li span, .sideusercon p, .schico a::after, a.backtotop i::after{
    color: var(--qsfubiaotiTexeColor);
}

body.night, .night .menu li a, .night .blog-slider__title, .night span.blog-slider__code a, .night .sideusercon h4, .night .friendlink li a, .night .relateinfo h3 a, .night .archivelist h3 a, .night .tagscloud li a, .night .footer, .night .sidebox dd a, .night .tags li, .night .sidetitle, .night .tags li, .night #divTags li a, .night .pages p, .night .posttitle h1, .night .posttitle h2, .night .posttitle h3, .night .posttitle h4, .night .posttitle h5, .night .posttitle h6, .night .post .night .tags, .night .cmtsubmit button::before, .night .cmtsubmit button, .night .cmtsubmit button:hover, .night .cmtsubmit button:hover::before, .night .cmtsubmit span, .night .filternav li.active, .night .filternav li.active::after, .night .footer a, .night #tpure_User .sideuserlink a i{
     color: var(--sszhutiColor);
}
.night .header.fixed{
    border-bottom: 1px solid #222;
    box-shadow: 0 1px 4px 0 #161616;
    background-color: hsl(var(--sszhutibg) / 0.6);
    backdrop-filter: blur(8px);
}
.night .relate:hover h3 a, .night .sideitem:hover .hasimg a, .night .archivelist h3 a:hover, .night .head .menu ul li:hover > a, .night .footer a:hover, .sch-m button::after, .night .friendlink .link-item a:hover{
    color: var(--ssgexingColor);
}
.night .setnight:hover div:before{
    background: var(--ssgexingColor);
}
.night .setnight:hover div:after{
    box-shadow: 0 -23px 0 var(--ssgexingColor), 0 23px 0 var(--ssgexingColor), 23px 0 0 var(--ssgexingColor), -23px 0 0 var(--ssgexingColor), 15px 15px 0 var(--ssgexingColor), -15px 15px 0 var(--ssgexingColor), 15px -15px 0 var(--ssgexingColor), -15px -15px 0 var(--ssgexingColor);
}
.night #txaArticle{
    box-shadow: 7px 8px 11px 0 rgba(55, 99, 170, .1), 0px 0px 5px 0px #fff;
}
.night .cmtsubmit button{
    box-shadow: none;
}
.night .cmtsubmit button:hover{
    background:var(--ssgexingColor);
}
.night .post .info .ctrl a svg{
    fill:var(--sszhutiColor);
}
.single pre[class*="language-"], .copynotice{
    background-image: var(--zhutiBgColor);
}
.single pre[class*="language-"], .copynotice{
    border: 2px solid !important;
    border-color:var(--divBorderColor) !important;
}
.blog-slider__img::before, .blog-slider__img::after{
    border-color:var(--zhutiColor) !important;
}
.tags li.active, .tags li:hover{
    color: #fff !important;
    background:var(--zhutiColor) !important;
}
.cmtsubmit button{
    background-image: linear-gradient(0deg,#fff,#f3f5f8);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1), -8px -8px 20px 0 #fff;
    transition: all .2s ease-in-out;
}
.cmtsubmit button:hover{
    background: #f3f5f8;
    border-color: #0000;
    box-shadow: inset 8px 8px 20px 0 rgba(55,99,170,.11), inset -8px -8px 20px 0 #fff;
    
}
/*一期DIY部分*/
html, body{
    overflow-x: hidden;
    padding: 0;
}

/*适配高分辨率屏幕*/
body{
    width: 100%;
    margin: 0 auto;
}
.wrap{
    max-width: 1150px;
}
.header.fixed{
    width: 100%;
    left: 0;
    background-color: hsl(var(--qszhutibg)/0.6);
    backdrop-filter: blur(8px);
}
.lazyline{
    position: fixed !important; 
}

/*适配高分辨率屏幕结束*/

.postimg a, .relateimg a, .postimg a img, .relateimg a img{border-radius:10px;}
.post h2 .zbaudio:before {
    content: "\e642" !important;
    font-size: 24px !important;
}
html, .indexcon, .main.fixed, .footer{
    background-image: url('/index.jpg') !important;
    background-color: #fff !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat;
    background-size: cover;
}
.blog-slider, .sidebox, .post, #txaArticle, .sidebox, .pagebar, .friendlink{
    background-color: hsl(var(--qszhutibg) / 0.6) !important;
    backdrop-filter: blur(2px);
}
.stylebgnight, .night .indexcon, .night .main.fixed, .night .footer{
    background-image: url('/night-bg.svg'),linear-gradient(#191c20, #24292e 15%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat;
    background-size: cover;
}
.night .blog-slider, .night .sidebox, .night .post, .night #txaArticle, .night .sidebox, .night .pagebar, .night .friendlink, .night span.blog-slider__code a{
    background: #26262685 !important;
    border: none;
    color: #a1a1a1;
}
.night #dudongshijie img{
    filter: invert(85%);
}
.night #admodule img{
    max-width: 114% !important;
    margin-left: -7% !important;
    margin-bottom: -30px !important;
    filter: invert(100%) contrast(73%) ;
}
.night .block{
     
}
.post h2 .video:before {
    content: "\e7a8" !important;
    font-size: 24px !important;
}
.post h2 .schico a::after{
   content: "\e64a" !important;
   font-size: 24px !important;
   font-weight: 500;
}
@media screen and (max-width: 1080px){
.slide a img{
    min-height: 200px;
    object-fit: cover;
}
.iconfont{fon-size:18px}
}
/*@font-face {*/
/*font-family:"shishang";*/
/*src:url("https://cdn.qe.chat/fonts/ShiShangZhongHeiJianTi.woff2");*/
/*}*/
/*.banner h2 span, .menu li a{*/
/*    font-family:'REEJI-BigYoung-BoldGB','微软雅黑', "Open Sans", sans-serif;*/
/*}*/
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(0,0,0,0.2)}::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,0.1)}::-webkit-scrollbar-thumb:vertical:hover{background-color:rgba(0,0,0,0.3)}::-webkit-scrollbar-thumb:vertical:active{background-color:rgba(0,0,0,0.7)}::selection{color:#fff;background:#159cff}::-moz-selection{color:#fff;background:#159cff}
.large .postimg {
    width: 120px;
}
.pagebar a, .cmtpagebar a{
border-radius: 29px;
min-width:18px;
}
.pagebar .now-page, .cmtpagebar .now-page{
    border-radius: 29px;
    min-width:18px;
    background-image: linear-gradient(0deg,#fff,#f3f5f8);
    border: 1px solid #fff;
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1), -8px -8px 20px 0 #fff;
}
.pagebar a:hover, .cmtpagebar a:hover{
    border-radius: 29px;
    min-width:18px;
    background: #36af1800;
    background-image: linear-gradient(0deg,#fff,#f3f5f8);
    border: 1px solid #fff;
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1), -8px -8px 20px 0 #fff;
    
}
.pagebar a, .cmtpagebar a{
background: #f5f6f7;
}

.navbar-item a i{
margin-right: 4px;
}
.fa-home{
font-size: 18px;
}
/* tagscloud */
#divTags dd {width:100%;height:260px;position:relative;z-index:1;}
#divTags li a{
    position:absolute;
    top:0px;left:0px;
    display:inline-block;
    border-radius:20px;
} 
.friendlink ul li a i{
margin-right:3px;
font-size:14px;
}

.night #divTags li a{
    color:#7a7a7a;
}
 
/* 列表动画*/
.blog-slider{
      transform: translateX(400%);
      transition: transform 0.4s ease;
    }
.blog-slider.show{
      transform: translateX(0);
} 
.banner{
background-position: center;
}
.content > .block > .post > h1{
display:none;
}
.zbaudio_img img{object-fit: cover}
video{border-radius:10px;}
#hcsticky .content div img{max-width:100%;border-radius: 5px;}

#txaArticle{
background-color: #ffffff5e !important;
/*点评背景*/
background-image: url("https://www.west.cn/Customercenter/UploadImages/milogo/2207/c6xvg1qo5194b7E5.png");
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1), -8px -8px 20px 0 #fff;
min-height:160px;
max-width:630px;
}
.post .tags a{
border-radius: 24px;
}
.cmtimg img, .avatar{border-radius:50%}


/*二期DIY部分*/
.blog-slider .istop{
    position: absolute;
    top: -2px;
}
.blog-slider .istop::before{
    content: "\e67a";
    font-size: 42px;
    font-family: iconfont;
    font-weight: normal;
    vertical-align: top;
    color: #4fb053;
}
.sidecmtcon{
    border-radius: 10px;
}
.teles{
    background: linear-gradient(to bottom, rgba(255,255,255,0), #f2f6ff 50%);
}
.sideuserhead{
    border-radius: 15px 15px 0 0;
}
.sidebox, .pagebar, .friendlink{
    border-radius: 15px;
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1);
    border: 2px solid rgb(255 255 255 / 90%);
}
.sitemap{
    margin-bottom: 15px;
}
.sideimg{
    border-radius: 10px;
}
.post{
    background: #f2f6ff;
    padding: 20px 10px;
    border-radius: 15px;
}

span.blog-slider__code span{
    margin-right: 15px;
}
span.blog-slider__code span:before {
    margin-right: 5px;
    font-size:20px;
    font-family: iconfont;
    vertical-align: top;
}
span.blog-slider__code .user:before {
    content: "\e6a9";
}
span.blog-slider__code .date:before {
    content: "\e69c";
}
span.blog-slider__code .cate:before {
    content: "\e6e2";
}
span.blog-slider__code .view:before {
    content: "\e6a7";
}
span.blog-slider__code .edit:before {
    content: "\e69a";
}
span.blog-slider__code .del:before {
    content: "\e6ac";
}
.blog-slider__title .zbaudio{
    margin-right: 5px;
    display: inline;
    vertical-align: middle;
}
.blog-slider__title .zbaudio:before {
    font-family: iconfont;
    font-weight: normal;
    vertical-align: top;
    content: "\e642" !important;
    font-size: 24px !important;
}
.blog-slider__title .video:before {
    font-family: iconfont;
    font-weight: normal;
    vertical-align: top;
    content: "\e7a8" !important;
    font-size: 24px !important;
}
.block.large{
    padding-left: 40px;
}
.pages, .posttitle, .cmt, .relatecon, .posttitle, .comment, .cmts{
    background-color: hsl(var(--qszhutibg)/0.6);
    backdrop-filter: blur(2px);
}
.night .pages, .night .posttitle, .night .cmt, .night .relatecon, .night .posttitle, .night .comment, .night .cmts{
    background-color: hsl(var(--qszhutibg)/0);
    backdrop-filter: blur(8px);
}
.blog-slider {
    width: 100%;
    max-width: 800px;
    position: relative;
    margin: auto;
    padding: 10px 0 10px 0;
    border-radius: 15px;
    transition: all .3s;
    margin-bottom: 15px;
    box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .1);
    border: 2px solid hsl(0deg 0% 100% / 95%);
    
}
.blog-slider:hover{
    background: #f3f5f8;
    box-shadow: inset 8px 8px 20px #17171714, inset -8px -8px 20px #cdcccc6e;
    background-size: auto,auto;
    background-repeat: no-repeat;
    background-position: bottom;
}
.blog-slider > .adtitle{
    position: absolute;
    right: 10px;
    top: 0;
}
@media screen and (max-width: 992px) {
  .blog-slider {
    max-width: 680px;
    /*height: 400px;*/
  }
}
 
.blog-slider__item {
  display: flex;
  align-items: center;
}
 
.blog-slider__item.swiper-slide-active .blog-slider__img img {
  transition-delay: .3s;
}
.blog-slider__img {
    width: 220px;
    height: 130px;
    flex-shrink: 0;
    box-shadow: 4px 13px 30px 1px rgb(56 96 244 / 23%);
    border-radius: 15px;
    transform: translateX(-30px);
    overflow: hidden;
    background-image: url(https://www.west.cn/Customercenter/UploadImages/milogo/2308/x5dwhovh4571w6m3.gif);
    background-repeat: no-repeat;
    /*/zb_users/theme/tpure/style/images/thumb.png
    background-size: cover;*/
    background-size: contain;
    background-position: center;
    background-position-y: -10px;
}
 
.blog-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all .3s;
}
.blog-slider__img:hover img {
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
 
.blog-slider__content {
  padding-right: 25px;
}
.blog-slider__code {
  color: #7b7992;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: -2px;
  display: block;
}
.blog-slider__title {
    font-family: OPPOSans-Ver2-Medium;
    font-size: large;
    font-weight: 500;
    margin-bottom: 10px;
}
.blog-slider__text {
  margin-bottom: 20px;
  line-height: 1.5em;
  font-size: smaller;
}

@media screen and (max-width: 576px) {
  .blog-slider__button {
    width: 100%;
  }
  .blog-slider__content {
    padding: 0;
  }
}

.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.blog-slider__pagination {
  position: absolute;
  z-index: 21;
  right: 20px;
  width: 11px !important;
  text-align: center;
  left: auto !important;
  top: 50%;
  bottom: auto !important;
  transform: translateY(-50%);
}
 
@media screen and (max-width: 768px) {
  span.blog-slider__code span{
    margin-right: 10px;
    font-size: 14px;  
  }
  .blog-slider__title, .blog-slider__title .zbaudio, .blog-slider__title .zbaudio:before, .blog-slider__title .video:before{
    font-size: 20px !important;
    background: none !important;
    vertical-align:inherit;
  }
  .blog-slider .istop{
    z-index: 9;  
  }
  .blog-slider__text{
    font-size: 14px;
  }
  .blog-slider__img {
    width: 100%;
    height: 200px;
    margin-bottom: 70px;
    margin-left: 30px;
  }
  .blog-slider__content {
    margin-top: -80px;
    text-align: center;
    padding: 0 30px;
  }
  .blog-slider__pagination {
    transform: translateX(-50%);
    left: 50% !important;
    top: 205px;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }
  .block{
    padding: 0 10px;
  }
  .block.large{
    padding-left: 10px;
  }
  .blog-slider {
    height: auto;
    padding: 0;
    margin-top: 20px;
  }
  .blog-slider__item.swiper-slide > a{
      width: 100%;
  }
    .blog-slider > .adtitle{ 
        top: 200px;
        z-index: 2;
    }
  .blog-slider__code{
    margin-top: 20px;
  }
  .blog-slider__item {
    flex-direction: column;
  }
  .blog-slider__pagination .swiper-pagination-bullet-active {
    height: 11px;
    width: 30px;
  }
}

.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 8px 0;
}
 
.blog-slider__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 10px;
  background: #062744;
  opacity: 0.2;
  transition: all .3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fd3838;
  height: 30px;
  box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
.tagscloud li{
    background: #c7d9ff4d;
    border-radius: 15px;
}
.zbaudio, {
    border: none !important;
    background: #fff !important;
}
.copynotice{
    border-radius: 15px !important;
}
.zbaudio_play em{
    background: #f2f6ff !important;
}
.night .blog-slider{
    box-shadow: 0px 0px 10px rgb(7 7 7 / 50%);
}
 
.night .post{
    background: #262626;
}
.night .teles{
    background: linear-gradient(to bottom, rgba(255,255,255,0), #f2f6ff 50%);
}
.night .zbaudio, .night .copynotice{
    border: none !important;
}
.night .blog-slider__img {
    box-shadow: 4px 13px 30px 1px #8a4b32;
}
.night span.blog-slider__code span{
    color: #a1a1a1;
}
.night .blog-slider__text{
    color: #ababae;
}
.night .sideusercon h4, .night .menu li a:hover, .night .sidebox dd .sidecmtcon a:hover{
    color:#ffffff;
}

.night .pagebar .now-page, .night .cmtpagebar .now-page, .night .pagebar a:hover, .night .cmtpagebar a:hover{
    background-image: linear-gradient(268deg, #39393c, #39393c);
    border: 1px solid #fff;
    box-shadow: inset -1px -2px 20px 0 rgb(0 0 0 / 10%), 3px 3px 14px 0px #464646;
    color: #ddd;
}
.night .menu li.on a, .night .menu li.on:hover a{
    color: #fff !important;
}
/*图片动态边角框hover效果*/
.blog-slider__img::before,
.blog-slider__img::after {
  content: "";
  width: 2rem;
  height: 2rem;
  border: 2px solid;
  position: absolute;
  z-index: 2;
  opacity: .3;
  transition: .3s;
}
.blog-slider__img::before {
  top: 1rem;
  right: 1rem;
  border-bottom-width: 0;
  border-left-width: 0;
  border-color: #07a70e;
  border-radius: 0 5px 0 0;
}
.blog-slider__img::after {
  bottom: 1rem;
  left: 1rem;
  border-top-width: 0;
  border-right-width: 0;
  border-color: #07a70e;
  border-radius:0 0 0 5px;
}
.blog-slider:hover .blog-slider__img::before,
.blog-slider:hover .blog-slider__img::after {
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  border-radius:5px;
}

/*三期diy*/
.listintro{
    border-radius: 15px;
    background: none;
}
.night .block .listintro{
    color: #bbb;
    border-color: #ccc;
    background: none;
}

/*404页面样式*/
.errorpage, .night .errorpage{
    background:#fff0 !important;
}
.errschtxt, .errschbtn, .goback{
    background:#ffffffa8 !important;
}
.night .errorpage .errschtxt, .night .errorpage .goback{
    background:#20202000 !important;
}

/*语言切换按钮*/
#lanbtn{
    width: 45px;
    height: 45px;
    margin-left: 550px;
    text-align: center;
    line-height: 45px;
    cursor: pointer;
    overflow: hidden;
    position: fixed;
    right: 30px;
    bottom: 100px;
    z-index: 3;
}

#lanbtn svg{
    width:36px;
    height: 36px;
    margin: 4px;
    /*fill:var(--qszhutiColor);*/
    fill: var(--qsfubiaotiTexeColor);
}

 


/*简繁体切换动画*/
/*********LoadingPage*************/
#loading{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000000b3;
    z-index: 999;
    display: none;
}
#preloader_4{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9;
    margin-top: -10px;
    margin-left: -50px;
}
#preloader_4 span{
position:absolute;
width:20px;
height:20px;
background:#3498db;
opacity:0.5;
border-radius:20px;
-webkit-animation: preloader_4 1s infinite ease-in-out;
-moz-animation: preloader_4 1s infinite ease-in-out;
-ms-animation: preloader_4 1s infinite ease-in-out;
-animation: preloader_4 1s infinite ease-in-out;
 
}
#preloader_4 span:nth-child(2){
left:20px;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-ms-animation-delay: .2s;
animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
left:40px;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-ms-animation-delay: .4s;
animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
left:60px;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
left:80px;
-webkit-animation-delay: .8s;
-moz-animation-delay: .8s;
-ms-animation-delay: .8s;
animation-delay: .8s;
}
 
@-webkit-keyframes preloader_4 {
    0% {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; -webkit-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
   100%  {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@-moz-keyframes preloader_4 {
    0% {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; -moz-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
   100%  {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@-ms-keyframes preloader_4 {
    0% {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; -ms-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
   100%  {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@keyframes preloader_4 {
    0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
   100%  {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}

/*导航栏底部边框宽度*/
.menu li:hover::before, .menu li.on::before {
    width: 100%;
    margin-left: -48%;
    opacity: 1;
}

/*头部标题*/
h2.TitleAnimate span {
  display: inline-block;
  animation-name: var(--animation);
  animation-duration: .4s;
  animation-timing-function: ease-in-out;
  animation-delay: var(--delay);
}

@keyframes TitleAnimate1 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/*人生倒计时侧栏*/
.review {
    font-size: 14px;
    padding: 5px 10px 5px 10px;
}
.progress {
    background-color: rgba(100, 100, 100, 0.2);
    border-radius: 5px;
    position: relative; 
    height: 10px;
    width: 200px;
}

.progress-done {
    border-radius: 5px;
    height: 10px;
    animation: barberpole 9s linear infinite;
    background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 40px 40px;
}
@keyframes barberpole {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 500px 0%;

  }
}
.percent {
    float: right;
    margin-top: -21px;
}
.social-panel-container {
    position: fixed;
    right: 0;
    bottom: 80px;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
}
.social-panel-container.visible {
    transform: translateX(-10px);
}
.social-panel { 
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
    border: 5px solid #001F61;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Muli';
    position: relative;
    height: 169px;  
    width: 370px;
    max-width: calc(100% - 10px);
}
.social-panel button.close-btn {
    border: 0;
    color: #97A5CE;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    top: 5px;
    right: 5px;
}
.social-panel button.close-btn:focus {
    outline: none;
}
.social-panel p {
    background-color: #001F61;
    border-radius: 0 0 10px 10px;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    padding: 2px 17px 6px;
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    width: 235px;
}
.social-panel p a {
    color: #FF7500;
    text-decoration: none;
}
.social-panel h4 {
    margin: 20px 0;
    color: #97A5CE; 
    font-family: 'Muli';    
    font-size: 14px;    
    line-height: 18px;
    text-transform: uppercase;
}
.social-panel ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.social-panel ul li {
    margin: 0 10px;
}
.social-panel ul li a {
    border: 1px solid #DCE1F2;
    border-radius: 50%;
    color: #001F61;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    text-decoration: none;
}

.social-panel ul li a:hover {
    border-color: #FF6A00;
    box-shadow: 0 9px 12px -9px #FF6A00;
}
.floating-btn {
    border-radius: 26.5px;
    background-color: #001F61;
    border: 1px solid #001F61;
    box-shadow: 0 16px 22px -17px #03153B;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    padding: 12px 20px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
.floating-btn:hover {
    background-color: #ffffff;
    color: #001F61;
}
.floating-btn:focus {
    outline: none;
}
.floating-text {
    background-color: #001F61;
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-family: 'Muli';
    padding: 7px 15px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 998;
}
.floating-text a {
    color: #FF7500;
    text-decoration: none;
}
.wrap .sitemap{
    display:none;
}

.single table{
    width:100%;
}
.single table th{
    padding: 12px 16px;
    border: 1px solid #E1E6F0;
    background-color: #F5F7FA;
    color: #677489;
    text-align: left;
    font-weight: normal;
    word-break: keep-all;
}

.single table td{
    padding: 12px 16px;
    border: 1px solid #E1E6F0;
}
.single table p{
    margin-bottom: 0;
}

#lanbtn, a.backtotop, #yuedu{
    border-radius: 50%;
    background-image: linear-gradient(0deg, #ffffff 0%, #f3f5f8 100%);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1);
}
.night #lanbtn, .night a.backtotop, .night #yuedu, .night .botsetnight{
    border-radius: 50%;
    background-image: none;
    border: 2px solid #6f6f6f;
    box-shadow: 8px 8px 20px 0 rgb(48 48 48);
}
#lanbtn:hover, a.backtotop:hover #yuedu:hover{
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.2);
}
.night #lanbtn:hover, .night a.backtotop:hover, .night #yuedu:hover{
    
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.2);
}
/*侧栏纸飞机图标的替换*/

#tpure_User .sideuserlink p a.group::after{
    content: "\eaf9";
    font-size: 26px;
    color: #0099e1;
    margin-left: -2px;
}

/*主题切换按钮*/
.botsetnight{
  display: none !important;  
}
.setnight {
    float: left;
    margin-top: 20px;
    margin-left: -15px;
    margin-right: 15px;
  }

  .setnight div {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: relative;
    box-shadow: inset 8px -8px 0 0 var(--qsfubiaotiTexeColor);;
    transform: scale(1) rotate(-2deg);
    transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
  }

  .setnight div:before {
    content: "";
    width: inherit;
    height: inherit;
    border-radius: inherit;
    position: absolute;
    left: 0;
    top: 0;
    transition: background-color 0.3s ease;
  }

  .setnight div:after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: -3px 0 0 -3px;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 -23px 0 #A1A1AA, 0 23px 0 #A1A1AA, 23px 0 0 #A1A1AA, -23px 0 0 #A1A1AA, 15px 15px 0 #A1A1AA, -15px 15px 0 #A1A1AA, 15px -15px 0 #A1A1AA, -15px -15px 0 #A1A1AA;
    transform: scale(0);
    transition: all 0.3s ease;
  }

  .night .setnight div {
    box-shadow: inset 20px -20px 0 0 #A1A1AA;
    transform: scale(0.5) rotate(0deg);
    transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
  }

  .night .setnight div:before {
    background: #A1A1AA;
    transition: background-color 0.3s ease 0.1s;
  }

  .night .setnight div:after {
    transform: scale(1);
    transition: transform 0.5s ease 0.15s;
  }

a.setnight:hover{
    background-color: #007aff00;
}
 

.swiper-pagination-bullet{
    width: 30px !important;
    height: 5px !important;
    padding: 0 !important;
    border-radius: 5px !important;
}
@media screen and (max-width: 1920px){
    #lanbtn{left: 50%;bottom:87px;}
    #yuedu{left: 50%;bottom:87px;}
}
@media screen and (max-width: 1200px){
    #lanbtn{
        width: 36px;
        height: 36px;
        margin: auto;
        line-height: 36px;
        right: 10px;
        bottom:78px;
        left: auto;
    }
    #lanbtn svg{
        width:30px;
        height: 30px;
        margin: 3px;
    }
    .head .setnight{
        display:none;
    }
    .botsetnight{
        display: block !important;  
    }
    .setnight{
        width: 36px;
        height: 36px;
        margin: auto;
        line-height: 36px;
        right: 10px;
        bottom: 125px;
        left: auto;
        position: fixed;
        z-index: 999;
        border-radius: 50%;
        background-image: linear-gradient(0deg, #ffffff 0%, #f3f5f8 100%);
        border: 2px solid #fff;
        box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .1);
    }
    .setnight div{
        margin: 8px auto;
    } 
}

/*百度实时热点更新侧栏*/
#xiaomo_Baiduredian .item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
#xiaomo_Baiduredian .item::before{
    content: attr(data-index);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1px;
    font-size: 14px;
    margin-right: 8px;
}
#xiaomo_Baiduredian .item:nth-child(-n + 3)::before {
    color: white;
}
#xiaomo_Baiduredian .item:nth-child(1)::before {
    background-color: #f4333c;
}

#xiaomo_Baiduredian .item:nth-child(2)::before {
    background-color: #f7941e;
}

#xiaomo_Baiduredian .item:nth-child(3)::before {
    background-color: #f7b94b;
}
#xiaomo_Baiduredian .item:nth-child(n + 4)::before {
    color: #666;
    background-color: #eee;
}
#xiaomo_Baiduredian .item a {
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
}
#xiaomo_Baiduredian dd div span{
    display: block;
    margin-top: 10px;
    margin-bottom: -10px;
    font-size: 14px;
    margin-right: 10px;
    color: #999;
    text-align: center;
} 
#tpure_User .sideuserlink a i{
    font-size: 20px;
    margin-top: 8px;
}
#tpure_User .sideuserlink a .fa-qq{
    color: #38a4ff;
}
#tpure_User .sideuserlink a .fa-weixin{
    color: #00ca1c;
}
#tpure_User .sideuserlink a .fa-telegram-plane{
    color: #3153ff;
    font-size: 22px;
    margin-top: 7px;
    margin-left: -2px;
}