/*全局*/
:root {
    
    --mw:640px;
    --swh:18px;
  } 

@media (prefers-color-scheme: dark) {  

:root {
  
    --bg:#fafbfb;
    --bg2:#f5f5f5;
    --bg3:#efefef;
    --bg4:#fafbfb75;
    --main: #1a1a1a; 
    --blue: #4992ff;
    --blue2:#a4c6e4;
    --blue3: #cadfff;
    --blue4: #4992ffb5; 
    --pink: #ff3977;
    --pink2: #ffecf2;
    --red: #DD3E45;
    --red2:#d96d76;
    --red3:#d96d764d;
    --black:#000;
    --black2:#0000004f;
    --black3:#333;
    --black4:#777;
    --bgray:#505878;
        --bgray1:#75798a;
    --bgray2:#8c92a8;
    --bgray3:#d9dae3;
    --bgray4:   #e9e9eb;
    --gray:#e0e0e9;
    --gray2:#5058781a;
    --white:#fff;
    --whitez:#fff;
    --oran:#e6cbc3;
    --yell:#F5CE5A
  } 
  
   
 
}

@media (prefers-color-scheme: light) {
 
:root {
    --bg:#fafbfb;
    --bg2:#f5f5f5;
    --bg3:#efefef;
    --bg4:#fafbfb75;
    --main: #1a1a1a; 
    --blue: #4992ff;
    --blue2:#a4c6e4;
    --blue3: #cadfff;
    --blue4: #4992ffb5; 
    --pink: #ff3977;
    --pink2: #ffecf2;
    --red: #DD3E45;
    --red2:#d96d76;
    --red3:#d96d764d;
    --black:#000;
    --black2:#0000004f;
    --black3:#333;
    --black4:#777;
    --bgray:#505878;
        --bgray1:#75798a;
    --bgray2:#8c92a8;
    --bgray3:#d9dae3;
    --bgray4:   #e9e9eb;
    --gray:#e0e0e9;
    --gray2:#5058781a;
    --white:#fff;
    --whitez:#fff;
    --oran:#e6cbc3;
    --yell:#F5CE5A
  } 

}


 


article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
} 


abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    background: var(--yell);
    color: var(--black)
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}
img[data-smiley]{ 
height: 1.5em;display: inline;}
svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}
ul{margin:0;
    padding: 0;
}

hr {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}
 a{ -webkit-tap-highlight-color:rgba(255,0,0,0);
 outline:none}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
  font-size: 0.85em;
    line-height: 1.7em;
}

button,
input,
optgroup,
select,
textarea {
    -webkit-appearance: none;
    resize: none;
    color: inherit;
    font: inherit;
    margin: 0
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

button:focus{outline:0;}

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}
input#checkbox_toggle{display: block;
    position: absolute;
    z-index: -999999;}
textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}
 
::-webkit-scrollbar {
    width: 0;
    height:0;
}

::-webkit-scrollbar-thumb {
    background: var(--bgray3); 
    border-radius:2px;
     
}

::-webkit-scrollbar-track {

    background: var(--gray);
}
 

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}





html{margin:0;
    padding: 0;
    min-height: 100%;
    position: relative;
    
 scroll-behavior:smooth; }
 
 body { 
   font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    margin: 0 0 80px;
    color: var(--main); 
background-color: var(--gray);  
 
 
/*background-size: 29px 29px;*/
/*background-image: repeating-linear-gradient(45deg, #303030 0, #303030 1px, #2a2a2a 0, #2a2a2a 50%);*/
  
} 
   


body:before  {content:"";
position: fixed;
z-index: -3; 
width: var(--mw);   
inset:0;
    left: calc(50% - (var(--mw) / 2 ));
    z-index: -1; box-shadow:0px 0 20px 0px var(--gray2);
    background: var(--bg);
}

 


body:after { position: absolute;
content: "";
    
    width: 100%;
    height: 60vh; 
    z-index: -2;
   left: 0;right: 0;
    top: -100px;
  background-color:transparent; 
background-image:
radial-gradient(at 52% 46%, hsla(220,100%,74%,1) 0px, transparent 50%),
radial-gradient(at 28% 17%, hsla(199,100%,84%,1) 0px, transparent 50%),
radial-gradient(at 67% 13%, hsla(21,100%,77%,1) 0px, transparent 50%);
    box-shadow: none;
 
    
}

 
 
 
 
 .lazyload,
.lazyloading {
    opacity: 0.3; 
    min-width: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
    background-size: 20px 20px;
    background-position: 50% 50%;
}

.lazyloaded {
    opacity: 1;
  
    transition: opacity 300ms;
}

  

 
 
img[data-smiley]{max-height:1.5em;
height: 1.5em;display: inline;}

 
li   svg{  width: 1em;height: 1em;    vertical-align:middle; overflow: hidden;margin: 0 3px 0 0; }



 article,.pager,fieldset,fieldset.comment,.note,h3.tit-r ,footer,   .breadcrumb,a.well,.album{width:min(var(--mw),100%) ;
    margin:0 auto;   
}
article img{max-width:100%;
max-height: 480px;
        object-fit: cover;
        
}
article a.one-p{ 
    display: block;
      cursor: zoom-in;
    display: block;
    max-width: 70%;
}
article a.one-p  img{  
       display: block;
    aspect-ratio: 16 / 9;
    width: 100%;  
}
article p{word-wrap:break-word; word-break:break-all; }
 footer,.breadcrumb{ max-width:var(--mw); }
  
.pagination{display: flex;
    flex-wrap: nowrap;
    justify-content: center;
   
    gap: 5px;
    width: max-content;      margin: 20px auto;
}
.pagination a,
.pagination > span {
   background: var(--gray2);
    min-width: 32px;
    border-radius: var(--swh);
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    font-family: "Noto_Sans_SC variant0";
    font-weight: 600;
    color: var(--bgray1); 
}

.pagination > span.current {
    color: var(--white);
    background-color: var(--blue);  
}


.pagination > a.prev svg,.pagination > a.next svg{ width:var(--swh);
vertical-align:middle}
.pagination a:first-child,
.pagination span:first-child {
    margin-left: 0;
}

/*.pagination a:last-child,*/
/*.pagination span:last-child {*/
/*    margin: 0*/
/*}*/

.pagination a:focus,
.pagination a:hover {
    z-index: 2;
   box-shadow: 0 0 0 1px var(--blue) inset;
    color:  var(--blue);
    background-color: var(--white); 
}

.pagination > .disabled a,
.pagination > .disabled a:focus,
.pagination > .disabled a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
    color: var(--bgray);
    cursor: not-allowed;
    background-color: #ddd
}
  
  .comments-all{background: var(--bg2);padding: 0 0 20px;}
 
 
 
nav ul,aside h4,aside ul{   
   padding: 0; margin: 0; 
}
aside h4{padding: 3px 10px;
font-family: 'Noto Sans SC';    font-weight: 900;
    font-size: 13px;
    color: var(--bg4);}
.cr:before,
    .cr:after,ul:after,ul:before,.comment:before,.comment:after{
        content: '';
        clear: both;
        display: table
    }

  ul li{ list-style:none}
  
  
  

nav {      max-width: var(--mw);
    margin: 0 auto ;   
    position: sticky;
    top:0;
    z-index: 9;
    background: var(--bg4);
         -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    
}
 nav:before, nav:after{content:"";
 position: absolute;
     bottom:0;
     left: 0;
     right: 0;
     height: 1px;
     background: var(--gray2);    z-index: -1;
         
 }
 /*nav:after{background:var(--blue3);*/
 /*    left: 20px;*/
 /*    right: 20px;*/
 /*}*/
/*nav:hover{background: #f5f5f5;}*/

 
 nav ul{
    display: flex; 
    justify-content: space-evenly;
    position: relative;}
      nav ul li{flex:1}
    nav  a{     display: block;
    padding: 9px 0;
    font-size: 17px;
    position: relative;
    z-index: 9;
  text-align: center;
    font-family: 'Noto Sans SC';
    font-weight: 400;
      
   
    
    }
  
    
@media screen and (min-width: 780px) {
    
        nav ul li a:before{         content: "";
        font-size: 12px;
        font-weight: 100; 
        position: absolute;
        left: 0;
        top: var(--swh);
        width: 1px;
        height: 16px;
        background: var(--bgray3);
        transform: rotate(25deg);
        }
  
      nav ul li:first-child a:before{display: none;  }
}


nav ul li.ti {    
  
    position: absolute;
    left: calc(100% / 5 * -1);
    width:  calc(100% / 5);
    bottom: -1px;
        opacity: 0;
        padding: 0;
    transition: all .5s ease 0s; 
} 

nav ul li.ti:after{  content: "";
display: block;
    height: 4px;
    background: var(--blue); 
    border-radius: 2px;
    box-shadow: 0 3px 5px var(--blue4);
    width:calc(100% / 2 - 10px);
    margin: auto;
}
 

nav ul li.current-menu-item:nth-child(1) ~ .ti ,nav ul li.current-menu-parent:nth-child(1) ~ .ti {
  
	left:   calc(100% / 5 * 0);     opacity: 1;  padding: 0 40px;
}
nav ul li.current-menu-item:nth-child(2) ~ .ti ,nav ul li.current-menu-parent:nth-child(2) ~ .ti  {

	left: calc(100% / 5 * 1);  opacity: 1;padding: 0 40px;
}
nav ul li.current-menu-item:nth-child(3) ~ .ti,nav ul li.current-menu-parent:nth-child(3) ~ .ti  {
left: calc(100% / 5 * 2);  opacity: 1;padding: 0 40px;
}
nav ul li.current-menu-item:nth-child(4) ~ .ti,nav ul li.current-menu-parent:nth-child(4) ~ .ti  {
left: calc(100% / 5 * 3);  opacity: 1;padding: 0 40px;
}
nav ul li.current-menu-item:nth-child(5) ~ .ti,nav ul li.current-menu-parent:nth-child(5) ~ .ti  {
left: calc(100% / 5 * 4);  opacity: 1;padding: 0 40px;
}
 





nav ul li:nth-child(1):hover ~ .ti {padding:0;
   opacity: 0.8;
	left: calc(100% / 5 * 0); right:calc(100% / 5 * 4)
}
nav ul li:nth-child(2):hover ~ .ti  {padding: 0;
 opacity: 0.8;
	left: calc(100% / 5 * 1); right:calc(100% / 5 * 3)
}
nav ul li:nth-child(3):hover ~ .ti  {opacity: 0.8;padding: 0;
left: calc(100% / 5 * 2); right:calc(100% / 5 * 2)
}
nav ul li:nth-child(4):hover ~ .ti  {opacity: 0.8;padding: 0;
left: calc(100% / 5 * 3); right:calc(100% / 5 * 1)
}
nav ul li:nth-child(5):hover ~ .ti  {opacity: 0.8;padding: 0;
left: calc(100% / 5 * 4); right: calc(100% / 5 * 0)
}

   
  nav ul li a,aside ul li a{ 
   
    padding: 12px 0;
    text-decoration: none;
     transition: all .8s ease 0s; color: var(--bgray);
  }
     nav ul li.current-menu-item a,nav ul li.current-menu-parent a,nav ul li  a:hover{  
    color: var(--blue);
   } 
   
  
  nav ul li a svg{    margin: -3px 3px 0 0;}
  
  
  
  
  
  
  aside ul li a{ padding: 8px 0 8px 15px; } 
  
  
  
  
  
  
  
  
  
aside ul.blogroll li{ 
    padding:  5px 0 0;
    text-align: right;
}  
aside .blogroll a {
 display: inline-block;
    font-size: 13px; 
    font-weight: 600;
    padding: 10px; 
    border-radius:  20px 0 0  20px  ;
    width: max-content;
    text-decoration: none;
    
        color: var(--bgray1);
        background: var(--bg4);
        
        -webkit-transition-duration: 0.3s; 
     transition-duration: 0.3s;
   
 
  
}  
    
    
    
    
    
    
    
aside .blogroll a[href^="#"]{    pointer-events: none;
        color: var(--black2);    font-weight: 400;    background: var(--gray2);
}

 
/*aside ul.blogroll:hover li a:not(:hover) {background: var(--gray2);*/
      
/* }*/

aside .blogroll a:hover {
    padding: 10px 25px; 
    color: var(--blue); 
}
 
 
  
 
 .tmenu{
         margin: -50px 10px 0;
    height: 50px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: flex-start;
    
 }
   .tmenu a{    line-height: 31px;
    padding: 0 var(--swh); 
    font-size: 13px;
    color: var(--bgray);
    text-decoration: none;
    border-radius: var(--swh);
    display: block;
    position: relative;
    border: 1px solid  var(--bgray3);
   }
   
   .tmenu a:first-child{display:none}
   .tmenu a:hover,.tmenu   a[aria-current]{background: var(--blue);
    color:  var(--white);}
   .tmenu a svg{margin: 11px 3px 0 0;}

header{      
    width:min(var(--mw),100%) ;
    margin:0 auto ;  
    padding:  0;
    position: relative; 
} 
 
  





header span {      display: block;
    font-size: 12px;
    margin-top: 6px;font-weight: 400;
}

header img{
display: block;}
 
header img#headbg{width:100%; object-fit: cover;
aspect-ratio: 7 / 1; 
 }
 
  
 
 body.home header img#headbg ,header img#headbg-audio{ width:100%; object-fit: cover;
aspect-ratio: 4 / 1; 
 
 
 }
 
  body.home .fancybox__caption p{font-size:13px;
      margin: 0;
  }
  
header a.avatar {  float: left;
    height: 75px;
    width: 75px;
    margin: -10px 0 0 15px;
    background: var(--bg);
    padding: 3px;
    border-radius: 50%;
    position: relative;
}
/*header a.avatar:before,header a.avatar:after{content:"";*/
/*    position: absolute;*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    border-radius: 20px;*/
/*    top: 10px;*/
/*    left: -40px;*/
    
/*}*/
/*header a.avatar:after{right:-40px;*/
/*    left: auto;*/
/*}*/
header a.avatar img { 
    width:100%; 
    aspect-ratio: 1 / 1; 
    display: block;  
    border-radius: 50%;
}
header a.avatar svg{    width: var(--swh);
    height: var(--swh);
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    display: block;
    position: absolute;
       bottom: 3px;
    right: 3px;
}
  
   
header a.avatar:hover  { 
background: var(--white);
/*background: linear-gradient(0deg, var(--white) 0%, var(--bgray) 100%);*/
}
  
header p{  
      font-weight: 400;
    font-size: 12px; 
    color: var(--bgray);
    line-height: 30px;
    margin: 0;
  padding: 10px 15px 0;
}
header p em{    margin: 0 10px 0 0;
    
    
    font-size: 13px; 
    border-radius: 14px;
    line-height: 28px; background: var(--pink2);
    color: var(--pink);
    display: inline-block;
    font-style: normal;
    padding: 0 10px;
}
   
   
label.more_c {
   position: relative;
    cursor: pointer;
   
    float: right;
    padding: 0;
    margin: -25px 15px 0 0;
 
    color: var(--bgray2); 
    width: var(--swh);
    height: var(--swh);
   
} 
.uinfo{height:70px;
    transition: .4s ease;
    overflow: hidden;
}

#more_c:checked ~  .uinfo {
    height: 140px;
}


        #more_c:checked ~ label[for="more_c"]  {  
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }  
   
   
   
   
   
   
   
   
header h3,header p.info{
 margin: 0 0 0 100px;
    padding: 0;
    line-height: 30px;
}  
header h3 {       font-size: 23px;
    font-family: 'Noto Sans SC';
    font-weight: 600;
    padding: 5px 0 0;
    color: var(--black);
}
header h3 svg{width: var(--swh);height:var(--swh);vertical-align: middle;fill: currentColor;overflow: hidden;}
header p.small { 
   font-weight: 400;
    font-size: 13px; 
}
header p svg {
    vertical-align: middle;
    overflow: hidden; 
    margin: 0 10px;
    width: 16px;
    height: 16px;
}
header p strong{font-size:15px;  font-family: 'Noto Sans SC';font-weight:400;
    color: var(--black3);
    margin: 0 3px 0 10px;
}
header p strong:first-child{margin-left:0}

 
 
 
header h3:before,header h3:after,header p.info:before,header p.info:after,header p.tag:before,header p.tag:after,header:before,header:after{  content: "";
    display: block;
    position: absolute;
    left: 10px;
       height: 30px;
    top: -5px;
    border-radius: 5px;
    width: 5px;
    z-index: 3;
    background-color: #000;
      background-image: linear-gradient( 
2deg, #595d5d, #e6e6e6,  #000);
    box-shadow:  1px 1px 1px rgba(255, 255, 255, 0.89) inset, 0px 1px 2px #000;
}

header:before,header:after{width:12px;
    height: 12px;
   top: 17px;    z-index: 1;
left:auto;
right: 45px;
 
background:#000;
    border-radius: 6px;
    color: #000;
        box-shadow:1px 1px 1px #fff, 19px 0px 0 currentColor,38px 0px 0 currentColor,20px 1px 1px #fff,39px 1px 1px #fff;
        opacity: 0.3;
}
header:after{    left: 6px;
    right: auto;}
.header p.info:after,header p.tag:before,header p.tag:after{box-shadow:  1px 1px 1px rgba(255, 255, 255, 0.89) inset, 0px 1px 2px #000;}
header h3:after{ left: calc(10px + 19px)}
header p.info:before{ left: calc(10px + 19px + 19px)}

header p.info:after{left: calc(var(--mw) - 15px)}
header p.tag:before{left: calc(var(--mw) - 15px - 19px)}
header p.tag:after{left: calc(var(--mw) - 15px - 19px - 19px)}
 
 




footer{    position: absolute;
bottom: 0; 
left: calc(50% - (var(--mw) / 2 )); 
    font-size: 12px;
background-color: var(--bgray3); 
background-size: 40px 40px;
background-image: repeating-linear-gradient(45deg, var(--gray2) 0, var(--gray2) 1px, var(--bgray3) 0, var(--bgray3) 50%);
    padding: 15px 10px;
    color: var(--bgray2);
    /*box-shadow: var(--mw) 25px 0px 20px currentColor,1320px 25px 0px 20px currentColor,-var(--mw) 25px 0px 20px currentColor,-1320px 25px 0px 20px currentColor;*/
    
    
    
}
   footer p{margin:0;
       color: var(--bgray);
   }
   footer p a{ color:currentColor}
   
footer p strong:before {
    content: '';
    float: left;
    width: 50px ;
    height: 50px;
    margin-right: 10px;
    background: var(--red) url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M399.377 230.747h55.899v111.797h279.49v-55.899H511.174v-55.898h223.592V174.85H399.377v-55.898h279.491V63.053H119.887v55.898h223.592v55.898H63.99v55.898h167.694v55.898H63.99v55.899H287.58V230.747h55.898v167.695H119.887v279.49h335.389v-55.898h-279.49v-55.898h335.388v279.49H287.58v55.899h279.49V510.238H175.786V454.34h391.287v-55.898H399.377V230.747zM790.664 63.053v55.898H902.46v111.796h55.898V63.053H790.664zm55.898 111.796h-55.898v55.898h55.898V174.85zM622.97 957.423h55.898V398.442H622.97v558.98zm167.694-391.287H902.46v-55.898H734.766v391.287h223.592v-55.899H790.664v-279.49zM119.887 789.728H63.989v167.695h167.694v-55.898H119.887V789.728zm55.898 55.898h55.898v-55.898h-55.898v55.898z' fill='%23fff'/%3E%3C/svg%3E") no-repeat;
   background-position: 50% 50%;
    background-size: 80%;    border-radius: 5px;}
    
     footer:after,footer:before,footer p:before,footer p:after{content: 'SPACE';
    position: fixed;
    left: calc(50% + (var(--mw) / 2) - 24px);
    bottom: 0;
    width: 23px;
    line-height: 0px;
    z-index: -2;
    font-size: 45px;
     color: var(--gray2);
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl; 
    font-family: 'Noto Sans SC';
    font-weight: 100;
         /*-webkit-text-stroke: 2px #069;*/
         /*paint-order:stroke ;*/
     }
    
    
    
        
footer:before,footer p:after{content: 'PERFUME';
    bottom: 130px;
    font-weight: 900;}
    footer p svg{width: 4.337890625em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;
    }
    
     footer p strong:after{content: "";position: absolute;
    width: 50px;
    height: 51px;
    background: var(--red);
    z-index: -2;
    right: auto;
    left: 10px;
    bottom: 0;
    border-radius: 15px;
    box-shadow:0 0 80px 50px  var(--red3);
     }
  
    
    
     
       footer p:before,footer p:after{z-index: -1;
  color: var(--blue3);
    overflow: hidden;
    filter: blur(2px);}
    footer p img{    vertical-align: middle;}
    footer p:before{bottom:5px}
    footer p:after{bottom:135px}
    
    
    .friends ul{display: flex;
    flex-wrap: wrap;
        padding: 0 0 20px;
    }
     .friends ul li{width:50%}
     .friends ul li a{display:block;
         line-height: 3; 
        color: var(--blue);
        text-decoration: none;
        font-weight: 700;text-align: center;
     }
   .friends .blogroll a[href^="#"] {
    pointer-events: none;
    color: var(--bgray2);
    font-weight: 400;
}
    
  
    .al_mon_list{   
    position: relative;  }
/*  .al_mon_list:before{    content: "";*/
/*    position: absolute;*/
/*    width: 1px;*/
/*    left: 85px;*/
/*    top: 5px;*/
/*    bottom: 5px;*/
/*    background: #ecf2ff;*/
/*    display: block;*/
/*    border-radius: 3px;*/
/*}*/
  .al_mon, h3.al_year{ 
    font-family: 'Noto Sans SC';
    font-weight: 500;
        font-weight: 500;
    line-height: 1.2;

}
 h3.al_year{font-size: 33px;
    margin: 0;
    line-height: 2;}
/*  .al_mon:before{    content: "";*/
/*    position: absolute;*/
/*    width: 6px;*/
/*    height: 6px;*/
/*    left: 61px;*/
/*    top: 10px;*/
/*    background: var(--white);*/
/*    display: block;*/
/*    border-radius: 6px;*/
/*    border: 1px solid #ecf2ff;*/
/*}*/
  .al_mon em,.al_post_list em{    
    font-style: normal;
    font-size: 12px;
        font-weight: 400;color: var(--bgray);
}


 .al_post_list{margin-bottom:10px;line-height: 1.8;}
  .al_post_list em{float:right}

    
    
    
    
    
    
    
    
    
    
    
.tb-btn {      position: absolute;
    top: 95vh;
    left: calc(50% + (var(--mw) / 2 + 60px));
    display: block;
    width: 40px;
    height: 40px;
    z-index: 1; 
}
 .tb-btn:after{content:"";
 position: absolute;
  
inset:0;
     background: var(--gray);
     z-index: 3;
 }

    .tb-btn a{display: block;  
        position: fixed;
        z-index: 2;
         color: var(--bgray2);
    } 
    .tb-btn a:hover{ 
        color: var(--blue);
    } 
    .tb-btn a svg{width:40px;
        height: 40px;
    }
    
    
    
    
    
  .side:before,.side:after{z-index: 1;
    bottom: 2px;
    text-shadow: 0 0 0;
    color: #272727;
    width: 25px;
    overflow: hidden;
    right: 0px; 
    line-height: 0; } 
.side:after{ 
    bottom: 202px; }

  article.gallery-list{padding:0;}
  
 article.gallery-grid{       display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
padding:  20px;
}
 article.gallery-list dl, article.gallery-list dt, article.gallery-list dd{margin:0;
     padding: 0;
 }
 
 article.gallery-list dl{

 position: relative;
     
        display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between; 
      
 }
 .gallery-grid dl{
    background:var(--white);
    box-shadow: 0px 0 20px 0px var(--gray2);
        border-radius: 10px;}
 /*article.gallery-list dl.album{padding: 15px;*/
 /*background: linear-gradient(to right, var(--blue3) 0%, var(--pink2) 100%);*/
 /*    display: flex;*/
 /*   flex-direction: row;*/
 /*   align-items: center;*/
 /*   gap: 15px; */
 /*}*/
  article.gallery-list dl.album dd{width: 100px;
    background: var(--white);
    padding: 5px;
   margin-bottom: 6px;
  }
  article.gallery-list dl dt{ 
          color: var(--bgray2);
    line-height: 1.8em;
    padding: 0 0 0 15px;    
  }
 
  article.gallery-list dl dt strong{  
    font-family: 'Noto Sans SC';
    font-size: 15px;
    color: var(--main);
    font-weight: 500; 
     
  }
   article.gallery-list dl dt span.number{    font-size: 23px;
    color: var(--bgray3);
       display: block;
   }
    article.gallery-list dl.album dt strong{font-size: 19px;
    font-weight: 600; }
  article.gallery-list dl dt a{ 
      text-decoration: none; 
      position: absolute;
    inset: 0;
  }
  article.gallery-list dl dt p{font-weight:400}
   article.gallery-list dl dt i{position: absolute;
   bottom: 65px;
    right: 15px;
    font-style: normal;
    color: var(--white);
    font-size: 19px;
   }
  
  article.gallery-list dl dt a.i-lock-xl{background-color: transparent; 
      background:var(--gray) url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='22' width='36' height='22' rx='2' fill='%23c5c5c5' stroke='%23c5c5c5' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M14 22v-8c0-5.523 4.477-10 10-10s10 4.477 10 10v8' stroke='%23c5c5c5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 30v6' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")no-repeat 50% 50%;
      background-size: 50% auto;
      
  }
 article.gallery-list h4{width:100%}
 
  
 article.gallery-list dl dt svg {    vertical-align: middle;
    overflow: hidden;
    margin: 0 3px 0 0;
    width: 13px;
    height: 13px;
}
 article.gallery-list dd {      flex: 1;
     display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 2px;
   border-radius:10px;
    padding: 7px;
    background: var(--white);
    position: relative;
    /* margin-bottom: 10px;
   box-shadow:0 0 0 1px var(--bgray3), 0 1px 0 1px var(--white), 0 2px 0 1px var(--bgray3), 0 3px 0 1px var(--white), 0 4px 0 1px var(--bgray3), inset 0 0 0 7px #fff;*/
    max-width: 100px;
     
 } 
  article.gallery-list dd:before{position: absolute;
    inset: 0;
    border: 7px solid var(--white);
    content: "";
    border-radius: 15px;
  }
 article.gallery-list dd.alock img{}
  .gallery-list dd  a, .gallery-list dd  p{position:absolute}
.gallery-list dd  img{display:block; 
 width: 100%;
  
}
 

.gallery-list dd  img:nth-child(1):nth-last-child(1) {
 grid-area: 1 / 1 / 3 / 3;
     
}
 
 
 


.gallery-tit .thumbnail-gall{padding:5px; 
    inset: 1px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
     flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    color: #fff;
    flex-wrap: wrap;
    align-content: center;
     
}
.gallery-tit .thumbnail-gall:after{position:absolute;
    z-index: 1;
    content: "";
    inset:0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);background: var(--black2);
}
.gallery-tit .thumbnail-gall strong{  font-size: min(2vw, 2vh);  /* 基础响应式 */
  font-size: clamp(15px, 3cqw, 24px);  /* 容器查询方案 */}
.gallery-tit .thumbnail-gall strong,.gallery-tit .thumbnail-gall span{position:relative;
    z-index: 2;
}
.xsui-gallery{  
    /*padding:15px;*/
    /*background: linear-gradient(to right, var(--blue3) 0%, var(--pink2) 100%);*/
 
    
}
.xsui-gallery ul{position:relative;
    /*display: grid;*/
    /*grid-template-columns: repeat(5, 1fr);*/
    /*gap:2px; */
          display: flex
;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
} 
.xsui-gallery ul:before{display:none}
 
.xsui-gallery ul li{width:20%;
    padding: 1px;    min-height: 78px;
}
 .xsui-gallery ul li.gallery-tit{ flex:1;
     position: relative;
 }
 .xsui-gallery  ul li a img {
object-fit: cover;    display: block;
     width: 100%;
   
} 

 
 
 .xsui-gallery ul:before, .xsui-gallery ul:after{display:none}
 .xsui-gallery ul li a img,.xsui-gallery ul li.thumbnail-post img{
  object-fit: cover;
  width:100%;
aspect-ratio: 1 / 1; 
} 

 

 
    

  article.gallery-list h2{margin-bottom:10px;}
article.gallery-list p {
    font-size: 13px; 
    line-height: 1.6;
    color: var(--bgray2);
    margin: 0;
}

 



 ul.list{
    padding: 0 ;} 

 
.note{border:2px solid #069;
    padding: 2px;
    background: #fff;
    margin: 20px auto;
    max-width: calc(var(--mw) - 40px);
}
.note h2{margin:0 0 1px;
    line-height: 28px;
    font-size: 13px;
    color: #ffa34f;
    background: rgb(57,134,172);
background: linear-gradient(180deg,rgba(3,105,156,1) 0%, rgba(39,133,180,1) 100%);
border-top: 3px solid #3986ac;
    display: flex; 
    position: relative;
}
.note h2 span{display: block; 
    text-align: center;}
    .note h2 span:first-child{flex:1}
    .note h2 span:nth-child(2){
   /* border-left:1px solid #fff;*/
    /*    border-right:  1px solid #fff;*/
        width: 60px;
    }
     .note h2 span:last-child{width:90px;}
.note ul.list li.date{line-height: 28px;
    font-size: 13px;    background: rgb(57,134,172);
background: linear-gradient(180deg, #c8d1d7 0%,#dde2e6 100%);
    border-bottom: 3px solid #c8d0d6;   
    margin-bottom: 1px;
}
.note ul.list li.date strong{ color:#069;
    font-size: 13px;
    display: block;
    position: relative;
    margin: 0 150px 0 0;
    text-align: center;
}

.album  ul.list li.date{    clear: both;
    position: relative;
    line-height: 3em;
    float: none;
    width: auto;
    padding: 0 10px;
}

/*ul.list li.date:first-child,.album  ul.list li.date:first-child{  */
/*    padding: 20px 0 5px;*/
   
/*}*/


 .album  ul.list li.date:after{background: #f5f5f6;
    display: block;
    height: 1px;
    position: absolute;
    top: 20px;
  
    content: "";
 }
 
 ul.list li.date:first-child:after,.album  ul.list li.date:first-child:after{  
  top: 0px;
   
}

 .album  ul.list li.date strong {    font-size: 21px;
    font-family: 'Noto Sans SC';
    font-weight: 400;  
    margin: 0;
    color: var(--black);
    display: block; 
}
  
 
 
 
 
 
 
 

ul.list,
ul.list li {
    list-style: none;
    margin: 0;
position: relative;
    padding: 0
}
 

 

.note ul.list li a {
    display: block;
font-size: 13px;
    padding: 7px 0 7px 10px;
color: #069;
text-decoration: none;
    background-color: #dee3e7;  
    margin-bottom: 1px; 
}

.note ul.list li.alt a { 
       background: #efefef; 
}

 
 
 
.note ul.list li span.date,.note ul.list li span.cnum{font-size:12px;
	color: #292929;
	float: right;
	width: 90px;
	text-align: center;
}
.note ul.list li span.cnum{width:60px;}
.note ul.list li:before,.note h2:before{content:"";
position: absolute;
top: 0;
width: 59px;
bottom: 0;right: 90px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
    
}
 
 
 
 
 
 /**/
/*上一篇下一篇*/
.pager { 
    display: flex;
    flex-wrap: wrap;
        justify-content: space-between;
     
    text-align: center;
}
 

.pager   a {
    display: block;
    position: relative;
    font-size: 14px;
    color: var(--bgray2);
    padding: 15px 0;
    font-weight: 500;
    text-decoration: none;
        flex: 1; 
}
.pager   a svg{width:20px;
margin: 0 5px;
    height:20px;vertical-align: middle;
}
 .pager   a:hover{
    color:  var(--blue) }



.index img.wp-post-image {
    float: right;
    width: 100px;
    height: 100px;
    border-radius: 3px;
    margin-left: 15px;
}

.index .gallery a{   
        background:var(--black4);
}

.index .gallery {
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
    max-width: 60%;
        padding: 5px 0 0;
}

.index .gallery-4{ grid-template-columns: repeat(4, 1fr);
max-width: 80%;
    
} 
.index .gallery-5{grid-template-columns: 2fr 1fr 1fr; 
    max-width: 70%;
}
.index .gallery-7{grid-template-columns: 2fr 1fr 1fr 1fr;
    max-width: 90%;
}
 
.index .gallery-mid{ max-width:100%}
.index .gallery span,.index .gallery a{display: block;
    padding: 0;position: relative;
     

   
} 
  .index .gallery a:before{position:absolute;
  inset:0;
 
  content: "";
     
  }
 
.index .gallery a:nth-child(1):nth-last-child(5){
grid-area: 1 / 1 / 3;
}
  
.index .gallery a:nth-child(1):nth-last-child(7){ grid-area: 1 / 1 / 3;
}
 

 



.index .gallery-mid span,.index .gallery-mid a{max-width:90%; 
}
.index .gallery span img,.index .gallery a img {width: 100%;
height: 100%;
     object-fit: cover;
    display: block;  
    border-radius: 0;
        opacity: 1;
 
}
.index .gallery-mid a img{aspect-ratio: 1 / 1; 
width: 100%;
    flex: 1;
    object-fit: cover;}
.index .gallery a:hover img{
        opacity: 0.8;}
article.tr .s-i{     display: block;
    width: 100px;
    height: 100px;
    border-radius: 15px 0 0 15px;
    background: #e3e8ee;
    overflow: hidden;
}
 
.index .s-i img{width: 100%;
    min-width: 100px;
    margin: 0;
    vertical-align: middle;}
article.tr  h2{font-size: 17px;
    line-height: 45px;
    margin: 0;
    position: absolute;
    top: 0px;
    font-family: "Noto_Sans_SC variant0";
    font-weight: 700;
    left: 115px;
}
article.tr p{    margin: 0;
    position: absolute;
    font-size: 15px;
    left: 116px;
    top: 45px;
    right: 20px;
    line-height: 1.5;
    color: var(--black4);}


 .ribbon{ display:none}
 
 

i.emo{width:22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50% 50%;
}

i.em-z {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath d='M27.6 18.6v-7.2A5.4 5.4 0 0 0 22.2 6L15 22.2V42h20.916a3.6 3.6 0 0 0 3.6-3.06L42 22.74a3.6 3.6 0 0 0-3.6-4.14H27.6z' stroke='%23d57100' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15 22h-4.806C8.085 21.963 6.283 23.71 6 25.8v12.6a4.158 4.158 0 0 0 4.194 3.6H15V22z' fill='%23ffdc5b' stroke='%23d57100' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}

i.em-j {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath d='M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z' fill='%23ffdc5b' stroke='%23d57100' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M31 18v1M17 18v1' stroke='%23791a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='20' y='24' width='8' height='12' rx='4' fill='%23fff' stroke='%23791a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

i.em-x {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath d='M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z' fill='%23ffdc5b' stroke='%23d57100' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M31 31s-2 4-7 4-7-4-7-4M21 21s-1-4-4-4-4 4-4 4M35 21s-1-4-4-4-4 4-4 4' stroke='%23791a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
 

i.em-w {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath d='M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z' fill='%23ffdc5b' stroke='%23d57100' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M16 19h4M28 19h4M16 31h16' stroke='%23791a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

i.em-a {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath d='M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z' fill='%23ffdc5b' stroke='%23d57100' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M31 18v1M17 18v1' stroke='%23791a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='15' y='28' width='18' height='8' rx='4' fill='%23fff' stroke='%23791a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

i.em-b {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath d='M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z' fill='%23ffdc5b' stroke='%23d57100' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M31 18v1M17 18v1M31 31s-2-4-7-4-7 4-7 4' stroke='%23791a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

i.em-k {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath d='M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z' fill='%23ffdc5b' stroke='%23d57100' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M31 35s-2-4-7-4-7 4-7 4M35 18l-7-1M33 18v9M20 17l-7 1M15 18v9' stroke='%23791a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

i.em-q {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M746 830.1H280.9c-47.4 0-86-38.6-86-86V279c0-47.4 38.6-86 86-86H746c47.4 0 86 38.6 86 86v465.1c.1 47.4-38.5 86-86 86zM280.9 243c-19.9 0-36 16.2-36 36v465.1c0 19.9 16.2 36 36 36H746c19.9 0 36-16.2 36-36V279c0-19.9-16.2-36-36-36H280.9z' fill='%23333'/%3E%3Cpath d='M440.7 617.6h199.9v199.9H440.7z' fill='%23FFE340'/%3E%3Cpath d='M715.3 491.8c-4.2 0-8.4-1-12.3-3.3C599.1 429.6 559.8 342.7 558.2 339c-5.6-12.6.1-27.4 12.8-33 12.6-5.6 27.3.1 32.9 12.7.3.8 34.9 75.8 123.8 126.3 12 6.8 16.2 22.1 9.4 34.1-4.6 8.2-13.1 12.7-21.8 12.7zm-409.5 0c-8.7 0-17.2-4.6-21.8-12.7-6.8-12-2.6-27.3 9.4-34.1 88.9-50.4 123.5-125.5 123.8-126.3 5.6-12.6 20.3-18.3 33-12.7 12.6 5.6 18.3 20.4 12.7 33-1.6 3.7-40.9 90.5-144.8 149.5-3.8 2.3-8.1 3.3-12.3 3.3zm352.8 337.7H372V542.9h286.6v286.6zm-236.6-50h186.6V592.9H422v186.6z' fill='%23333'/%3E%3C/svg%3E")}

i.em-n {background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath d='M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z' fill='%23ffdc5b' stroke='%23d57100' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M24 29c5 0 7 4 7 4H17s2-4 7-4zM33 18l-4 2M15 18l4 2' stroke='%23791a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

i.em-e {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1063 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.53800000000001 512a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0z' fill='%23F8C332'/%3E%3Cpath d='M1044.48 289.007c-93.123-114.709-323.086-104.004-478.693 22.289-16.943 19.681-15.182 48.975 3.94 65.44s48.353 13.859 65.296-5.816c112.565-91.354 279.293-98.638 347.048-15.155 18.97 17.75 48.319 17.162 65.536-1.27s15.824-47.76-3.127-65.488z' fill='%23EFEFEF'/%3E%3Cpath d='M599.054 390.95a48.094 48.094 0 0 1-31.553-11.606c-20.48-17.667-22.446-49.152-4.301-70.253l.198-.232.239-.191c74.718-60.642 171.226-97.922 264.765-102.277 44.981-2.096 88.208 3.7 125.01 16.752 39.021 13.845 70.5 35.226 93.526 63.557a50.797 50.797 0 0 1 16.056 34.645 48.183 48.183 0 0 1-47.452 50.777 50.852 50.852 0 0 1-35.827-13.838l-.32-.348c-31.608-38.912-87.703-59.624-153.921-56.73-66.492 2.908-135.032 29.218-188.095 72.199a50.893 50.893 0 0 1-38.325 17.545zm-30.877-77.203c-15.476 18.22-13.81 45.254 3.775 60.395s44.796 12.76 60.484-5.461l.198-.232.239-.191c54.204-43.998 124.307-70.936 192.328-73.906 68.266-2.976 126.361 18.541 159.368 59.065a44.134 44.134 0 0 0 30.864 11.85 41.37 41.37 0 0 0 40.768-43.629 43.998 43.998 0 0 0-14.076-30.14l-.314-.34c-43.684-53.829-121.358-82.262-213.054-77.975-92.05 4.287-186.996 40.933-260.58 100.564z' fill='%23FBB03B'/%3E%3Cpath d='M494.06 302.845c-92.352-115.316-322.383-106.1-478.802 19.176-17.067 19.565-15.497 48.872 3.509 65.46s48.264 14.173 65.338-5.392c113.186-90.59 279.927-96.823 347.142-12.896 18.856 17.852 48.203 17.47 65.536-.853s16.139-47.644-2.723-65.495z' fill='%23EFEFEF'/%3E%3Cpath d='M48.278 401.913A48.148 48.148 0 0 1 .075 356.052a50.825 50.825 0 0 1 12.609-36.277l.198-.232.239-.192c75.114-60.156 171.882-96.802 265.407-100.55 44.995-1.802 88.18 4.274 124.928 17.566 38.912 14.097 70.267 35.682 93.13 64.17 20.029 19.115 21.258 50.558 2.73 70.158a48.346 48.346 0 0 1-35.294 15.018 50.961 50.961 0 0 1-35.082-14.056l-.32-.348c-31.349-39.144-87.314-60.197-153.553-57.726-66.506 2.471-135.216 28.33-188.553 70.997a50.825 50.825 0 0 1-34.03 17.176 58.87 58.87 0 0 1-4.206.157zm-30.645-77.428A44.012 44.012 0 0 0 6.888 355.67a41.356 41.356 0 0 0 44.995 39.267 43.984 43.984 0 0 0 29.648-15.093l.198-.233.239-.19c54.497-43.637 124.77-70.117 192.805-72.643 68.315-2.54 126.24 19.36 158.987 60.074a44.182 44.182 0 0 0 30.221 12.029 41.506 41.506 0 0 0 30.338-12.902c16.022-16.93 14.855-44.148-2.601-60.676l-.32-.348c-43.33-54.101-120.833-83.026-212.576-79.353-92.044 3.707-187.222 39.738-261.189 98.884z' fill='%23FBB03B'/%3E%3Cpath d='M49.787000000000006 313.897a49.302 49.302 0 1 0 98.604 0 49.302 49.302 0 1 0-98.604 0zM590.991 308.087a49.302 49.302 0 1 0 98.605 0 49.302 49.302 0 1 0-98.605 0z' fill='%2342210B'/%3E%3Cpath d='M99.082 429.923a108.578 42.366 0 1 0 217.157 0 108.578 42.366 0 1 0-217.157 0zM750.476 429.923a108.578 42.366 0 1 0 217.156 0 108.578 42.366 0 1 0-217.156 0z' fill='%23FB943B'/%3E%3Cpath d='M932.57 577.536c-38.324 172.08-204.049 301.527-402.684 301.527-192.307 0-353.772-121.337-398.637-285.225l-.737.143c20.555 183.283 191.516 326.315 399.36 326.315 214.07 0 389.004-151.702 400.814-342.849' fill='%2342210B'/%3E%3Cpath d='M353.983 174.483c-27.75-30.038-63.33-48.04-102.12-48.04-39.424 0-75.53 18.624-103.472 49.528 17.333-58.027 57.14-98.604 103.465-98.604s86.14 40.584 103.472 98.61m559.739-1.494c-28.33-30.038-64.655-48.04-104.257-48.04-40.277 0-77.141 18.624-105.643 49.528 17.702-58.027 58.341-98.604 105.643-98.604s87.948 40.584 105.643 98.61' fill='%231A1A1A'/%3E%3C/svg%3E")}


.ico-prev,
.ico-next {
    height: 20px;
    width: 15px;
    display: block;
    position: relative;
    overflow: hidden;
}

.ico-next:before {
    content: '';
    height: 10px;
    width: 10px;
    display: block;
    border: 1px solid #333;
    border-left-width: 0;
    border-top-width: 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: absolute;
    top: 5px;
    right: 5px;
}

.ico-prev:before {
    content: '';
    height: 10px;
    width: 10px;
    display: block;
    border: 1px solid #333;
    border-right-width: 0;
    border-bottom-width: 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: absolute;
    top: 5px;
    left: 5px;
}


.i-lock,.i-lock-xl, article.gallery-list dd.alock {
    background:  url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 85.333c-117.333 0-213.333 96-213.333 213.334V384H384v-85.333c0-70.4 57.6-128 128-128s128 57.6 128 128V384h85.333v-85.333c0-117.334-96-213.334-213.333-213.334z' fill='%23424242'/%3E%3Cpath d='M768 938.667H256c-46.933 0-85.333-38.4-85.333-85.334v-384C170.667 422.4 209.067 384 256 384h512c46.933 0 85.333 38.4 85.333 85.333v384c0 46.934-38.4 85.334-85.333 85.334z' fill='%23FB8C00'/%3E%3Cpath d='M448 661.333a64 64 0 1 0 128 0 64 64 0 1 0-128 0z' fill='%23fff'/%3E%3C/svg%3E")no-repeat;
  
 
}

 article.gallery-list dd.alock{
     /*background-color:var(--gray2);*/
     background-position: 50% 50%;
     background-size: 55px;
 }
.i-163 {    
    background:  url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M157.515 0h708.97A157.415 157.415 0 0 1 1024 156.411v711.178a157.415 157.415 0 0 1-157.515 156.41h-708.97A157.415 157.415 0 0 1 0 867.59V156.41A157.415 157.415 0 0 1 157.515 0z' fill='%23E82202'/%3E%3Cpath d='M679.454 90.353a198.174 198.174 0 0 1 74.29 35.94 55.316 55.316 0 0 1 19.276 23.392 47.686 47.686 0 0 1-69.07 58.629c-5.12-3.313-8.935-8.032-14.156-10.843a85.133 85.133 0 0 0-47.284-15.66 47.084 47.084 0 0 0-30.118 15.66 33.631 33.631 0 0 0-9.035 30.118l17.568 65.757a251.683 251.683 0 0 1 119.066 34.936 338.12 338.12 0 0 1 91.256 81.82 281.098 281.098 0 0 1 47.285 94.57 313.123 313.123 0 0 1 11.846 109.126 351.373 351.373 0 0 1-18.874 90.854 356.292 356.292 0 0 1-142.356 174.08 379.08 379.08 0 0 1-156.913 54.915 393.136 393.136 0 0 1-114.447 0A377.976 377.976 0 0 1 250.98 823.818a406.387 406.387 0 0 1-107.62-374.864 399.059 399.059 0 0 1 239.234-283.709 62.946 62.946 0 0 1 52.907 2.912 47.686 47.686 0 0 1-10.842 82.823 304.59 304.59 0 0 0-193.757 244.254 310.613 310.613 0 0 0 16.966 150.589A305.393 305.393 0 0 0 390.124 809.16a275.175 275.175 0 0 0 129.104 31.222 321.255 321.255 0 0 0 108.223-19.376 256.2 256.2 0 0 0 139.947-120.47 209.117 209.117 0 0 0 17.97-42.567 235.922 235.922 0 0 0 0-131.413 198.776 198.776 0 0 0-60.236-92.16 268.047 268.047 0 0 0-40.156-28.913 151.793 151.793 0 0 0-40.157-15.059c9.437 37.748 20.078 75.595 30.117 113.945l5.522 27.708a161.33 161.33 0 0 1-130.51 163.54 154.805 154.805 0 0 1-113.543-21.284 170.667 170.667 0 0 1-67.062-86.94 207.109 207.109 0 0 1-11.345-61.942 213.434 213.434 0 0 1 35.94-130.51 236.122 236.122 0 0 1 131.414-90.352l-11.344-43.972a130.51 130.51 0 0 1 7.027-94.57 139.144 139.144 0 0 1 34.033-43.068 140.549 140.549 0 0 1 50.196-31.121 141.754 141.754 0 0 1 74.19-1.506z' fill='%23FFF'/%3E%3Cpath d='M484.191 435.702a111.335 111.335 0 0 0-27.909 52.907 144.364 144.364 0 0 0 0 54.914 82.02 82.02 0 0 0 31.222 51 60.235 60.235 0 0 0 47.285 9.035 66.158 66.158 0 0 0 53.409-61.44 160.627 160.627 0 0 0-4.217-21.786l-32.627-123.381a150.588 150.588 0 0 0-67.163 38.75z' fill='%23E82202'/%3E%3C/svg%3E")no-repeat;
    
 
}

.i-tag{ 
    height: 20px;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    background: var(--blue);
    border-radius: 5px;
    color: var(--white);
    line-height: 20px;
    vertical-align: middle;
    padding: 0 5px;margin-right: 5px; 
	cursor: pointer;font-weight: 100;margin-top: -3px;
}
 
article i.i-tag{    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
       top: -1px;
    left: -1px;
    background: none;
    margin: 0;  
    border-radius: 0;z-index: 6;
}
article .i-tag span {
       position: absolute;
    display: block;
    width: 78px;
    padding: 14px 0 0;
    /* line-height: 22px; */
    background-color: var(--blue);
    box-shadow: 0 1px 3px var(--black2);
    color: var(--white);
 
    font-size: 12px;
    font-weight: 400;
    text-shadow: 0 1px 1px var(--bgray);
    text-transform: uppercase;
    text-align: center;
    left: -30px;
    top: -8px;
    transform: rotate(-45deg)scale(0.90);
}
 .i-sticky,article .i-sticky span{background: #f75c01;}

.i-img {  
    background:  url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.897 14.897h994.206v994.206H14.897z' fill='%23BCE2EC'/%3E%3Cpath d='M238.594 654.917c-82.022 0-158.452 13.049-223.697 35.419v318.767h617.65c26.098-32.312 41.011-67.73 41.011-105.635 0-137.324-194.491-248.551-434.964-248.551z' fill='%236DBB58'/%3E%3Cpath d='M1009.103 570.41c-51.575-21.749-108.12-33.555-167.772-33.555-240.474 0-434.965 194.492-434.965 434.965 0 12.428.621 24.855 1.864 37.283h600.873V570.41z' fill='%2322AC38'/%3E%3Cpath d='M139.173 263.449a124.276 124.276 0 1 0 248.551 0 124.276 124.276 0 1 0-248.551 0z' fill='%23FFAB00'/%3E%3C/svg%3E")no-repeat;
    
 
}

 

.i-lock,.i-163,.i-img{height:16px;
    width: 16px;vertical-align: middle;
    display: inline-block;  
    background-size: auto 100%;margin-top: -3px;
    border-radius: 3px;
}
 

 
.as{    
   
    position: fixed;
    right: calc(50% + (var(--mw) / 2)); 
    top: 0;
     overflow: hidden; 
    animation: linkkd 1s 1;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  
} 

 @keyframes linkkd {
           0%{width: 0;
        }
           
          
        
     
        
       100%{
              width: 200px;
        }
        
        }

aside.as h4{margin-left: auto;
    width: max-content;
}

    
    article {    border-bottom: 1px solid var(--gray2);position: relative;  
    font-size: 17px;
    line-height: 1.7em;} 
 article h2{margin:0 }
  article.gallery{padding:10px;}
  
article.wb,article.index {padding:16px 20px 6px;}
article.thumbnail-post{padding:20px 20px 6px ;}
article.page,article.post{padding:0px 30px 6px;}
article.grid,
 article.music-p,article.t-img{padding:20px 20px 20px;}
 
 
article.post:after{content: "- THE END -";
    text-align: center;
    display: block;
    color: var(--bgray3);
       font-family: 'Noto Sans SC';
    font-weight: 900;;
}
/*article.music-p,*/
article.tr{padding:0}
article.wb input,input#com-info,#more_c{    position: absolute;
    z-index: -999;
    opacity: 0; }
.wb-c{max-height: 115px;
position:relative;
    overflow: hidden;
    margin-bottom: 10px;
}
article.wb input:checked + .wb-c {
   max-height:1000px;
}    

 
/*.wb-c p{display:inline}*/
/*article.wb input:checked + .wb-c p{display:block}*/
.wb-c label{      position: absolute;
    cursor: pointer;
    top: 90px;
    height: 29px;
    line-height: 20px;
    margin: 0;
    right: 0;
    left: 0; 
    background: var(--bg);
    padding: 0;
  
}

.wb-c label span,a.more-link { display: inline-block;
    font-family: 'Noto Sans SC';
    font-weight: 900;
    text-transform: uppercase;
    color:  var(--bgray2);
    font-size: 10px;
    text-decoration: none;
    background:var(--gray2);
    line-height: 20px;
    padding: 0 9px;
    border-radius: 8px;
}
a.more-link{    background: var(--blue3);
    display:inline-block;  }
    .wb-c label span:hover,a.more-link:hover{    color: var(--white);
    background-color: var(--blue);}

article p.wb-meta,dt span.wb-meta{display: flex;
    gap: 15px;
}
 .paper  p.wb-meta{display:block}
dt span.wb-meta{    justify-content: center;}
.wb-meta span{ 
    display: inline-block;
    padding: 0 0 0 16px;
}
.i-date{background: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h38v21a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V19zM5 9a2 2 0 0 1 2-2h34a2 2 0 0 1 2 2v10H5V9z' stroke='%23999' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M16 4v8M32 4v8M28 34h6M14 34h6M28 26h6M14 26h6' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")no-repeat 0 50%;
background-size: 13px auto;

}
.i-pic{background: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M39 6H9a3 3 0 0 0-3 3v30a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3z' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 23a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM42 36L31 26l-10 9-7-6-8 6' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")no-repeat 0 50%;
background-size: 13px auto;

}
.i-com{background: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M44 6H4v30h9v5l10-5h21V6zM14 19.5v3M24 19.5v3M34 19.5v3' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")no-repeat 0 50%;
background-size: 13px auto;

}
.i-dri{background: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 43h20V5H14v10' stroke='%23999' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M5 15h18v28H5V15z' stroke='%23999' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M13 37h2M28 37h2' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")no-repeat 0 50%;
background-size: 13px auto;

}
.i-date{background: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h38v21a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V19zM5 9a2 2 0 0 1 2-2h34a2 2 0 0 1 2 2v10H5V9z' stroke='%23999' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M16 4v8M32 4v8M28 34h6M14 34h6M28 26h6M14 26h6' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")no-repeat 0 50%;
background-size: 13px auto;

}
 article.wb input:checked + .wb-c   label{display:none}
article.wb p{ margin:0;}
article.index .avatar{position:absolute;
    left: 20px;
    top: 15px;
    width: 50px;
    height: 50px;    border-radius: 50%;
}
article.index .user{line-height:1.4em;
    margin: 0 0 5px;
}
article.index .user h4{margin:0;
    font-weight: 700;
}
article.index .user span{    display: inline-block;
    padding: 0 0 0 16px;
    color: var(--bgray2);
    text-decoration: none;
    font-weight: 400;
    font-size: 13px;
}
article.wb h3{margin:25px 0 0}
article p.wb-meta,article.status p span{    
   
    font-size: 13px;
    color: var(--bgray2);  
    margin: 10px 0 0;
}
 
article.tr p.wb-meta{top: auto;
    /* padding: 0; */
    background: #ffffff52;
    color: var(--white);
    /* font-size: 15px; */
    /* right: 10px; */
    line-height: 2.7;}
article p.wb-meta a,article p.wb-meta span{color:currentColor;
    text-decoration: none;font-weight: 400;
}
 
 
article.status .wb-meta span{float:right;
    margin: 0;
}
a.well,.lock-post{display: block;
    font-size: 13px;
    padding: 15px 20px;
    font-family: 'Noto Sans SC';
    font-weight: 500;
    line-height: 1.7em;
    background: var(--gray2);
    text-decoration: none;
    color: var(--bgray);
    text-align: center;
}
 
 article.status p,article.t-img p,article.t-img dl dd{margin:0}
   article.status {padding:20px 20px 21px}
  
   
  .paper{ padding: 15px 20px 15px 40px ;
    
      background-color: #f2f6c1;
    background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
    background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
    background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
        background-position: 0 -15px;
box-shadow: rgb(0 0 0 / 20%) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px, rgba(0, 0, 0, 0.15) 0px -2px 0 inset;
    color: #6a5f49;
    text-shadow: 0 1px 1px white; 
    font-size: 15px;
    line-height: 30px;
    position: relative; border: 0;
}

 article.paper{width: calc(var(--mw) - 40px);
     margin: 20px auto;padding: 15px 20px 15px 25px;
 }
 
   .apage  .paper h2,.apage   .paper h3{    margin: 0;
    padding:0;
    line-height: 30px;}
     .paper p{margin: 0;
    line-height: 30px;
         
     }
      .paper-p p{margin:0;}

blockquote{margin: 0;
    padding:10px 20px 10px 32px;
    background:var(--gray2);
    border: 0;
    color:var(--bgray);
  
    font-size: 13px;
    
    border-left: 5px solid var(--gray2);
}
blockquote p{margin:0;
        
}
 .paper h4{margin: 0 0 0 -10px;
    text-shadow: 0 0 0;
    color: var(--red3);
    font-size: 13px;}
 
 .paper h4 svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden; 
}
 .paper:after  {
   border-left: 1px solid var(--red3);
    border-right: 1px solid var(--red3);
     
    bottom: 0;
    content: '';
    left: 13px;
    position: absolute;
    top: 0;
    width: 2px;
}

 

 .paper:before, .paper-p:before {
    bottom: 9px; 
    box-shadow: 0 10px 6px var(--black2);
    content: '';    height: 30px;
    position: absolute;
    right: 5px;width: 80%;
    z-index: -1;
    -webkit-transform: rotate(2deg);   
       -moz-transform: rotate(2deg);  
        -ms-transform: rotate(2deg);  
         -o-transform: rotate(2deg);
            transform: rotate(2deg);
}
 
div.paper p:first-child:before, div.paper p:last-child:after,blockquote p:last-child:after,blockquote p:first-child:before {
    display: inline-block;
    vertical-align: top;
    height: 20px;
    width: 20px;
    line-height: 48px;
    font-size: 50px; 
    color: var(--black4);
       background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M195.541 739.03C151.595 692.351 128 640 128 555.135c0-149.333 104.832-283.179 257.28-349.355l38.101 58.795c-142.293 76.97-170.112 176.853-181.205 239.83 22.912-11.862 52.907-16 82.304-13.27 76.97 7.125 137.643 70.315 137.643 148.864a149.333 149.333 0 0 1-149.334 149.333 165.163 165.163 0 0 1-117.248-50.304zm426.667 0c-43.947-46.678-67.541-99.03-67.541-183.894 0-149.333 104.832-283.179 257.28-349.355l38.101 58.795c-142.293 76.97-170.112 176.853-181.205 239.83 22.912-11.862 52.906-16 82.304-13.27 76.97 7.125 137.642 70.315 137.642 148.864a149.333 149.333 0 0 1-149.333 149.333 165.163 165.163 0 0 1-117.248-50.304z'/%3E%3C/svg%3E") no-repeat 0 0;
    background-size: cover;
    opacity: 0.2;
}
div.paper p:first-child:before,blockquote p:first-child:before {
    content: ''; 
    margin-left: -22px;
    
} 
div.paper p:last-child:after,blockquote p:last-child:after {
    content: ''; 
    transform: rotate(180deg); vertical-align:bottom;
   
}
blockquote p:after,blockquote p:before{ opacity: 1;}
 
 
/*article.paper-p p.wb-meta:after,article.paper-p p.wb-meta:before{display:none}*/
/*article.paper-p p.wb-meta{ */
/*    text-shadow: 0 0 0;*/
/*    color: var(--red3);*/
/*    font-size: 12px;    margin: 0;*/
/*}*/
    
    
    
 article.t-img img{   
     /*border-radius: 10px;*/
    display: block; width: 100%; }
 
article.music-p   img{display:block;
    width: 100%; 
} 
article.music-p   img.lazyload,
article.music-p   img.lazyloading,
.post_thumbnail img.lazyload,
.post_thumbnail    img.lazyloading{max-height:130px}
 
.post_thumbnail{ 
    position: relative;}
.post_thumbnail img{    display: block;
    width: 100%; }
     
article.music-p a{display: block; 
   
} 
article.music-p dl,article.t-img dl,article h2.imgtit{position: absolute;
     
    inset: auto 0 0 0;
  
    font-size: 12px;
    padding: 5px 10px;
    margin: 0;
 background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(0 0 0 / 70%) 100%);
    border-radius: 0;
    color: var(--white);
}
article h2.imgtit{padding:  15px;}
article.music-p dt,article.t-img dt,article h2.imgtit{  font-size: 21px;
    font-weight: 900;font-family: "Noto_Sans_SC variant0";}
article.music-p dd,article.t-img dd { max-height: 22px;
    overflow: hidden;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis; margin: 0;}
article.music-p dd p,article.t-img dd p{display:inline}
article.music-p dt,.post_thumbnail h2{font-size:19px; 
    color: var(--white);    font-family: 'Noto Sans SC';
    font-weight: 900;
    display: block; 
    position: relative;
    width: fit-content;
}
 
 /*article.thumbnail-post{padding:10px 10px 6px}*/
 /*article.thumbnail-post p.wb-meta{padding:0 10px}*/
 .thumbnail-post   a,.thumbnail-gall{   
     /*background: linear-gradient(90deg, var(--gray) 0%, transparent 100%);*/
    display: flex;
    flex-direction: row;
    align-items: center; 
    gap: 15px;   
padding:0 10px 0 0;
background: #bac0d91a;
      text-decoration: none;
 }

  .thumbnail-post    img{    width: 100px;
    height: 100px;
    /*border-radius: 5px; */
    object-fit: cover;
  }
 
    
    .thumbnail-post    span.l-card-t{  
    font-weight:500;color:var(--main);}
   .gallery .thumbnail-post    span.l-card-t{font-size:21px; }
     .thumbnail-post   span.wb-meta{    display: block;color:var(--bgray2);
  font-size: 13px;
    line-height: 1.5;}
    
    .l-card{flex:1}
  


.post a[href^="https:"],
.post a[href^="http:"],

.page a[href^="https:"],
.page a[href^="http:"] 
{
    color: var(--blue);
    text-decoration: none;
    position: relative;
    
    background: linear-gradient(to right , var(--blue2) 0%, var(--blue4) 100%) no-repeat left bottom;
 
    transition:background-size 0.7s;
 background-size: 100% 1px ;
    animation: linkanime  3s 1;
  
} 

 @keyframes linkanime {
           0%{
             background-size: 0 1px ;
        }
           
          
       20%{
              background-size: 0 1px ;
        }
     
        
       100%{
             background-size: 100% 1px ;
        }
        
        }


.post a[href^="https:"]:hover,
.post a[href^="http:"]:hover,
.page a[href^="https:"]:hover,
.page a[href^="http:"]:hover {
   
    
    text-decoration: none;
    position: relative;color: var(--bgray); 
    background: linear-gradient(to right , var(--blue) 0%, var(--pink) 100%) no-repeat left bottom;
    
 background-size: 100% 1px;
}
.post a[href^="https:"]{  color: var(--bgray);}
.post a[href^="https:"]:hover{  color: var(--blue);}
.post a[href^="http:"]{color: var(--bgray);background: linear-gradient(to right , var(--bgray2) 0%, var(--bgray3) 100%) no-repeat left bottom;
     background-size: 100% 1px ;
}
.post a[href^="http:"]:hover{color: var(--bgray);}
 

.post a[href^="https:"]:before,.post a[href^="http:"]:before{
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M722.665 628.736a34.956 34.956 0 0 1-24.693-59.601l154.95-154.927c68.05-68.05 68.05-178.781 0-246.854-68.073-68.05-178.85-68.05-246.877 0L451.12 322.281a34.91 34.91 0 1 1-49.339-49.362l154.904-154.926c95.278-95.232 250.321-95.279 345.6 0 95.278 95.278 95.278 250.321 0 345.576L747.357 618.52a34.793 34.793 0 0 1-24.669 10.217zM290.816 973.708a243.665 243.665 0 0 1-172.823-71.448c-95.279-95.301-95.279-250.321 0-345.6l138.472-138.45a34.91 34.91 0 1 1 49.385 49.362l-138.473 138.45c-68.072 68.05-68.072 178.804 0 246.877 68.073 68.05 178.828 68.003 246.854 0l138.473-138.496a34.91 34.91 0 1 1 49.338 49.361L463.616 902.237a243.596 243.596 0 0 1-172.8 71.447zm137.076-346.415a34.956 34.956 0 0 1-24.692-59.601l164.538-164.539a34.91 34.91 0 1 1 49.362 49.362L452.56 617.076a34.793 34.793 0 0 1-24.669 10.24z' fill='%23797979'/%3E%3C/svg%3E") no-repeat 50% 0;
    background-size: 14px 14px;
    content: "";
    display: inline-block;
    width: 16px;
    vertical-align:middle;
    height: 16px;
    margin-right: 2px;
}

.post a[href^="https:"]:has(img)::before,.post a[href^="https://i.xsui.com"]:has(img)::before,.post a[href^="http://i.xsui.com"]:has(img)::before,.post a[href^="http:"]:has(img)::before,.post a.xlink:before,.post a[href^="https:"]:has(img)::after,.post a[href^="http:"]:has(img)::after,.post a.xlink:after,.post a[data-fancybox]:after{display:none}
.post a img{display:block}
.post a[href^="https:"]:has(img),.post a[href^="http:"]:has(img){background:none}
.post a[href^="https://xsui.com"],
.post a[href^="https://www.xsui.com"],
.post a[href^="https://i.xsui.com"],
.post a[href^="http://xsui.com"],
.post a[href^="http://www.xsui.com"],
.post a[href^="http://i.xsui.com"],
.post a[href^="//xsui.com"],
.post a[href^="//www.xsui.com"],
.post a[href^="//i.xsui.com"] {
    color: var(--bgray);
}

.post a[href^="https://xsui.com"]:before,
.post a[href^="https://www.xsui.com"]:before,

.post a[href^="http://xsui.com"]:before,
.post a[href^="http://www.xsui.com"]:before,

.post a[href^="//xsui.com"]:before,
.post a[href^="//www.xsui.com"]:before,
.post a[href^="//i.xsui.com"]:before {
    background:var(--red) url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M399.377 230.747h55.899v111.797h279.49v-55.899H511.174v-55.898h223.592V174.85H399.377v-55.898h279.491V63.053H119.887v55.898h223.592v55.898H63.99v55.898h167.694v55.898H63.99v55.899H287.58V230.747h55.898v167.695H119.887v279.49h335.389v-55.898h-279.49v-55.898h335.388v279.49H287.58v55.899h279.49V510.238H175.786V454.34h391.287v-55.898H399.377V230.747zM790.664 63.053v55.898H902.46v111.796h55.898V63.053H790.664zm55.898 111.796h-55.898v55.898h55.898V174.85zM622.97 957.423h55.898V398.442H622.97v558.98zm167.694-391.287H902.46v-55.898H734.766v391.287h223.592v-55.899H790.664v-279.49zM119.887 789.728H63.989v167.695h167.694v-55.898H119.887V789.728zm55.898 55.898h55.898v-55.898h-55.898v55.898z' fill='%23fff'/%3E%3C/svg%3E")  no-repeat 50% 100%;
    background-size: 16px 16px;
}
 

pre  ::-webkit-scrollbar-thumb:hover {
      
    background-color: rgba(0, 0, 0, .4);
}
pre  ::-webkit-scrollbar-thumb {
    background: #000;
   
    border-radius: 3px;
}
pre  ::-webkit-scrollbar {
    height: 7px;
    width: 7px;
  
     background: #000;
    
}
pre:has(code){ 
    border-radius: 5px;  padding:30px 0 0;
    background: rgb(229, 229, 231); 
   
    overflow: hidden;
    position: relative;}
 
    pre:has(code)::before{content:"html code";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        text-align: center;
        color: #484848;
        text-shadow: 1px 1px #fff;
        font-family: 'Noto Sans SC'; 
        font-weight: 700;
        font-size: 15px;
        line-height: 30px;
        text-transform: uppercase;
    }
    pre:has(code.language-php)::before{content:"php code";}
pre code.hljs {
  display: block;
    overflow: auto;
    max-height: 280px;  
        font-size: 13px;
    line-height: 23px;
    scrollbar-color: #bbbbbb #ececec;
    scrollbar-width: thin
}
 
code.hljs:before,code.hljs:after {
    content: '';
    display: block; 
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    background: #f86657;
    width: 8px;
    height: 8px; 
    box-shadow: var(--swh) 0 #efc058, 36px 0 #cfcfcf;
    z-index: 3;
}
code.hljs:after {    width: 10px;
    height: 10px;
    top: 9px;
    left: 9px;
     background: #c86357;
    box-shadow: var(--swh) 0 #caa459, 36px 0 #b2b2b2;
    z-index: 2;
}

.hljs{display:block;;color:#333333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-variable,.hljs-template-variable,.hljs-strong,.hljs-emphasis,.hljs-quote{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#d73a49}.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-attribute{color:#0086b3}.hljs-section,.hljs-name{color:#63a35c}.hljs-tag{color:#333333}.hljs-title,.hljs-attr,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#6f42c1}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}.hljs-number{color:#005cc5}.hljs-string{color:#032f62}


		td.hljs-ln-numbers {
			text-align: center;
			color: #a3a3a3;
			vertical-align: top; 
text-align: right;font-size: 11px;
font-family: 'Noto Sans SC'; 
		}
		div.hljs-ln-n{    width: 25px;
    background: #e6e6e6;
    padding-right: 5px;}
		.hljs-ln td.hljs-ln-code {
			padding-left: 10px;
		}
table.hljs-ln { 
    background: #ececec;width: 100%;
}

.grid {
	position: relative;
	z-index: 1;
	margin: 0 auto;  
	list-style: none; 
}

/* Common style */
.grid figure {
	position: relative; 
	overflow: hidden;  
	max-height: 360px;  
	text-align: center;
	cursor: pointer;    margin: 0;
	/*border-radius: 10px;*/
}

.grid figure img {
	position: relative;
    display: block;
    min-height: 180px;
    width: 100%;
    opacity: 0.5;
    object-fit: cover;
}
.grid figure h2{font-size:17px}
.grid figure figcaption {
	padding: 20px;
	color: var(--whitez);
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p { 
	font-size: 13px;
}

 
/*---------------*/
/***** Sarah *****/
/*---------------*/

figure.effect-sarah {
	background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
	background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);   
}

figure.effect-sarah img {
 
	-webkit-transition:  0.35s, -webkit-transform 0.35s;
	transition:  0.35s, transform 0.35s;
 
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.grid figure.music img{aspect-ratio: 10 / 1; 
}

 

figure.effect-sarah:hover img {
	opacity: 0.8; 
	width: calc(100% + 20px);
}

figure.effect-sarah figcaption {
	text-align: left;
}

figure.effect-sarah h2 {    width: fit-content;
	position: relative;
	overflow: hidden; 
}

figure.effect-sarah h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--whitez);
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-sarah p {
	padding: 1em 0;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

figure.effect-sarah:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
/*---------------*/
/***** Oscar *****/
/*---------------*/

figure.effect-oscar {
	background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}

figure.effect-oscar img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
	padding: 20px;
	background-color: rgba(58,52,42,0.7);
	-webkit-transition: background-color 0.35s;
	transition: background-color 0.35s;
	    display: flex;
    flex-direction: column;
    justify-content: center;
}

figure.effect-oscar figcaption::before {
	position: absolute;
    inset: 10px;
	border: 1px solid var(--whitez);
	content: '';
}

figure.effect-oscar h2 {
	margin: 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,100%,0);
}
figure.effect-oscar h2 span,figure.effect-layla h2 span,figure.effect-ming p{
        font-size: 23px;
    display: block;
    font-family: 'Noto Sans SC';
    font-weight: 900;
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}
figure.effect-oscar p{
	    margin: 0 20px; 
}
figure.effect-oscar:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-oscar:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
	opacity: 0.4;
}

  
.meta-time-rb{background:var(--bgray2);
    color: var(--bgray);
    margin: 0;
} 
.fancybox-stage article.gallery-list{width:var(--mw);
    margin: auto;
    display: block;
    background: var(--bg2);
}



article.gallery-list .gallery-tit{background: var(--bg2);border-radius: 5px 5px 0 0;}
article.post h2,article.page h2,article.post h3,article.gallery-list h3{margin: 0 0 15px;
    padding: 30px 0  0;
}
article.post p.mate,article.gallery-list p.mate{margin:  0;
    color: #969696;
    font-size: 13px;}
 
 
 
 

fieldset {
 border: 0;
    padding:20px 28px ; 
}

fieldset legend {
     
}


legend {
    border: 0;
    padding: 0;
}
 

.input {
    display: block;
    width: 100%;
   transition: .4s ease;
    border: 0;
   padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: var(--black3);
    background: var(--bg2);  
}


.user-info{     display: flex;
    border-bottom: 1px solid var(--gray); margin-top: -5px;
}
fieldset h5{
    border-bottom: 1px solid var(--gray);    margin: 0;padding: 6px 12px}
fieldset input.input {
    background: var(--white);
    border-radius: 5px; 
    padding-left: 34px;
}

fieldset p {
        margin: 0 0 15px;
    padding: 0;
    position: relative; 
}

fieldset p sup{font-size: 12px;
    position: absolute;
    right: 10px;
    top: 5px;
    background: #ed8e8e;
    display: block; 
    line-height: 20px;
    color: var(--white);
    transform: scale(0.90);
    padding: 0 5px;
    border-radius: 5px;}
textarea.input {height: 0px;
 
    display: block;
    width: 90%; 
    background: var(--white);
    border: 0; 
    padding:0;resize: none;overflow: auto;
}

fieldset input.input:focus,
textarea.input:focus { 
    background: var(--white);border:0;
} 
 label.com-info{position: absolute;
    z-index: 1;
    background: var(--white);
inset: 0;
    text-align: center;
    margin: 0;
    border-radius: 15px;
    line-height: 3.5em;
    font-weight: 400;
    color: var(--bgray);}

input#com-info:checked ~ textarea.input {
  height: 60px;
    padding: 5px 0 13px;
}
input#com-info:checked +  label.com-info,fieldset input.input:focus + sup{display:none}





.smilies summary {user-select: none;
    outline: 0;
      outline: 0;
    left: 55px;
    top:-30px;
    /*color: var(--blue);*/
       transition: background .5s;
}
 .smilies summary svg{width:18px;
     height: 18px;
     overflow: hidden;
 }
[open] summary{color: var(--blue);}
 
details + div.smilies-list {
    max-height: 0;
    transition: max-height .25s;
    margin: 0 ; 
    overflow: hidden;
        position: absolute;
    bottom: 10px;
    left: 75px;
}
[open] + div.smilies-list {
    max-height: 100px;
}



.smilies{ 
position: relative}
.smilies summary{position: absolute;}   
 
 
.smilies-list a{cursor:pointer}

.comment-button {max-width: 494px;
 
} 
 





 
.player-163 {
    border: 1px solid var(--gray);
    border-bottom: 1px solid #ddd;
    box-shadow: 0 1px 3px #e8e8e8;
    height: 68px;
    max-width: 501px;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}

.player-163:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    background: var(--white);
    border-radius: 0 5px 5px 0;
    height: 66px;
}


.player-163 iframe {
    margin: -10px 0 0 -10px;
}

.lock-frame{ }
.lock-post{     text-align: center;
    padding: 100px 0 130px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 10px rgb(0 0 0 / 2%);;}
.lock-post h3{margin:0 0 15px ;}
 
.lock-post input,.lock-post button{ 
line-height: 35px;padding: 0;
border:0;}
.lock-post input{width: 220px;border-radius: var(--swh) 0 0 var(--swh) ;}
.lock-post button{width: 58px;border-radius: 0 var(--swh) var(--swh) 0;background: #8BC34A;
    color: var(--white);}






/* 隐藏默认三角 */
::-webkit-details-marker {
    display: none;
}
::-moz-list-bullet {
    font-size: 0;
    float: left;
}




 a.close{  width: 24px;
    height: 24px;
    display: block;
    position: absolute; 
    z-index: 7;
    right: -10px;
    top: -10px;
    border-radius: 50%;
    background:var(--red2);color: var(--white);
    }
 a.close:hover{
    background: var(--red);
    color: var(--white);}

  a.close:before,a.close:after {
     content: '';
    height: 1px;
    width: 12px;
    display: block;
    background: currentColor;
    -moz-border-radius: 10px;
    position: absolute;
    top: 12px;
    left: 6px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        box-shadow: 0 0 0, 0 0 0;
    }

   a.close:after{
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
    }
 


h3.tit-r {
    padding: 0 10px;
    line-height: 50px;
    /* background: var(--bg2);*/
    /*background: linear-gradient(90deg, var(--bg2) 0%, transparent 100%);*/
}
  
   

fieldset p label {
    height: 32px;
    text-align: center;
    width: 32px; 
    line-height: 32px;
    margin: 0;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
 color:var(--bgray2);
}
fieldset p label svg{height: 1.2em;
    vertical-align: middle;}
 
 
 
 
.input:focus {
    border-color: var(--bgray2);
    outline: 0;
    -webkit-box-shadow: inset 0 0 0;
    box-shadow: inset 0 0 0;
}

.input::-moz-placeholder {
    color: var(--bgray);
    opacity: 1
}

.input:-ms-input-placeholder {
    color: var(--bgray)
}

.input::-webkit-input-placeholder {
    color: var(--bgray)
}

.input::-ms-expand {
    background: transparent;
    border: 0
}

.input[disabled],
.input[readonly],
fieldset[disabled] .input {}

.input[disabled],
fieldset[disabled] .input {
    cursor: not-allowed
}

input[type=search] {
    -webkit-appearance: none
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type=date].input,
    input[type=time].input,
    input[type=datetime-local].input,
    input[type=month].input {
        line-height: 34px
    }
}

 

.btn {
    display: inline-block;
    border: 0;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--white);
    background: #464646;
    border-radius: 4px
}

.btn-lg {
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.comment-button button.btn-lg {
   width: 189px;
    border: 0;
    border-radius: 20px;margin: 0;    background: var(--red);
    box-shadow: 0 20px 10px -10px #ff9292;
}

.comment-button  .btn-lg{
    border-radius: 5px;margin-left: 5px;    background: none;}
.btn-1 {
    color: #777;
    background: #ddd;
}

.btn-2 {
    color: var(--white);
    background: #777;
}

.btn:focus,
.btn:hover {
    background: #a10000;
    color: var(--white);
    text-decoration: none
}

.btn-1:focus,
.btn-1:hover {
    background: #ccc;
    color: #555
}

.btn-2:focus,
.btn-2:hover {
    background: #333;
    color: #fff
}


.btn.active,
.btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65
}

a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none
}

 
 
 
 
 
 .c-date{       margin-bottom: 12px;
text-align: center;
    font-size: 12px; 
    color: var(--bgray2);
 }
 .comment .comment  .c-date  .c-year{display:none}
 
.a-content .comment {position: relative;
      margin:  10px 28px;
}
 
 
 
.comment {  
    margin: 0 auto;
   /*border-top: 1px solid var(--gray2);*/
    padding:   10px 20px;
    max-width: var(--mw);
   /*  background: var(--bg2);*/
   /*background: linear-gradient(90deg, var(--bg2) 0%, transparent 100%);*/
}
fieldset.comment{     position: fixed;
    z-index: 999;
 inset: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    background: #000000a1;
    flex-wrap: wrap;}
    
h3.tit-r+fieldset.comment{background: var(--bg4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);position: sticky;
    bottom: 0;
}

fieldset.comment:target{background:#000}
.comment .comment{padding-right:0}
 
.comment article {
    margin: 0;

    border: 0;

    padding: 10px;
}



.comment legend {
    display: none
}

.comment small{    font-weight: 400;
    color: var(--bgray2);  margin: 0 15px 0 5px;}
/* .odd{ background:var(--bg2)}*/

.comment div.comment,
.comment div.odd {
    /*margin: 10px 0 0 50px; 
     padding: 0;*/
    
    border: 0;
}
 
  
 

.comment .avatar {
    width: 40px;
    border: 1px solid var(--gray2);
    padding: 3px;
    background-color: var(--white);
    height: 40px;    border-radius: 50%;
    position: absolute;
    left: -50px;
    bottom: -8px;
}

 

.coment-content  {
    word-wrap: break-word;
    word-break: break-all;
    margin:0 0 5px 50px;
    font-size: 14px; 
      padding: 10px;
    border-radius: 15px;
    position: relative;
    background: var(--bgray4);
    width: fit-content;
        max-width: 80%;
         
        /*box-shadow: -1px 0 2px var(--gray);*/
}
fieldset .coment-content{    padding: 10px;position: relative;    max-width: 80%;
background: var(--white);
border: 2px solid var(--gray);
    }
fieldset.comment .avatar{bottom:0}

fieldset .coment-btn{width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    margin: 0;
    background: var(--blue);
     color: var(--white);
    padding: 0;
    flex: none; position: absolute;
    right: 10px;
    bottom: 8px;padding: 10px;}
 fieldset .coment-btn:hover {background-image: linear-gradient(120deg, #66a6ff 0%, var(--blue) 100%);color: var(--white);   }
 
fieldset .coment-btn svg{width:20px;}
.admin-x .coment-content,.comment:hover .admin-x  .coment-content{  
    background: var(--blue);
    margin: 0 55px 0 auto;
    color: var(--white);}
    
    .admin-x .coment-content a{  color: var(--white);}
    .admin-x  .avatar{left:auto;
        right: -50px;
    }
/*.comment:hover .coment-content{background:var(--bg2)}*/

.coment-content:before {content: "";
    width: 20px;
    height: 16px;
    display: block;
    border-radius: 0 0 10px 0;
    position: absolute;
    left: -11px;
    bottom: 0;
    background: var(--bgray4);
}
fieldset .coment-content:before{ display:none}
.admin-x .coment-content:before{     border-color: var(--blue);
    background: var(--blue);
    left: auto;
    right: -11px;
    border-radius:  0 0 0 10px;}
.coment-content:after{content: "";
    width: 11px;
    height: var(--swh);
    background: var(--bg);
    display: block;
    position: absolute;
   bottom: -2px;
    left: -11px;
    border-radius: 0 0  15px 0;
        /*box-shadow: -1px 1px 2px var(--gray) inset;*/
}
    fieldset .coment-content:after{ display:none}
.admin-x  .coment-content:after{ border-color: var(--blue);
    left: auto;background: var(--bg);
    right: -11px;
    border-radius: 0 0 0 15px;
    /*box-shadow: 1px 1px 2px var(--gray) inset;*/
    
}


.comment  p  { margin:0;word-break:break-all;display:inline}
 
.comment_admin,.alert-warning{        background: #fff9ea;
    padding: 10px;
    border-radius: 10px;
    /* margin: 0 0 0 50px; */
    font-size: 12px;
    color: #7b563f;}
.comment_admin cite {text-transform: uppercase;
    font-style: normal;}
    .comment .comment_admin p{margin:0;
    	padding: 0; 
    }
    
    .comment   .author,.comment   .author a{font-family: 'Noto Sans SC';
    font-weight: 700;
    text-decoration: none;
    color: var(--black3);
}
.admin-x  .author{display:none}

/*.comment h4,*/
/*.comment div.comment h4{*/
/*    font-weight: 400; */
/*    font-size: 15px;*/
/*    margin: 0;*/
/*}*/

/*.admin-x h4, .comment div.admin-x h4{margin:0 50px 0 auto}*/
/*.comment h4 .author,.comment h4 .author a{font-family: 'Noto Sans SC';*/
/*    font-weight: 600;*/
/*    text-decoration: none;*/
/*    color: var(--black3);*/
/*}*/
/*.comment h4 .author{position:absolute;*/
/*    left: -50px;*/
/*    bottom: -20px;*/
/*}*/
/*.admin-x h4 .author, .comment div.admin-x h4 .author{*/
/*    left: auto;*/
/*    right:-50px;}*/
/*.comment h4 .reply {*/
/*    float: right*/
/*}*/

 
a.comment-reply-link{background:var(--blue2) url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M999.273 882.852c-8.948 0-17.288-5.227-21.111-13.674-8.644-18.795-43.52-67.034-90.268-112.267-35.532-34.381-128.937-116.966-444.555-116.966-52.266 0-57.567-.365-57.567-.365v168.879c0 9.35-5.626 17.897-14.372 21.514-8.649 3.617-27.749 1.61-34.38-5.027L6.858 502.051C2.534 497.728.02 491.797.02 485.661c0-6.13 2.415-12.06 6.837-16.385L337.02 134.72c6.631-6.637 23.723-8.649 32.366-5.026 8.645 3.617 14.378 12.06 14.378 21.509v168.813s38.073-.275 67.128-.275c95.8 0 234.832 18.042 352.655 86.502 66.545 38.706 118.822 90.677 155.313 154.314 42.322 73.784 63.738 194.419 63.738 299.072 0 10.955-7.644 20.404-18.398 22.718-1.61.402-3.317.504-4.927.504z' fill='%23fff'/%3E%3C/svg%3E")no-repeat 50% 50%;
background-size: 50% auto;
    display:block;
    width: 25px;
    height: 25px;
    border-radius: 15px;  
    position: absolute;
bottom: 0;
    right: -10px;
   display: none;
}
    a.comment-reply-link:hover {background-color:var(--blue); 
    }
 
.coment-content:hover a.comment-reply-link{display:block}
.meta {
    font-size: 12px;
    margin: 0;
    color: #8b8b8b;
        line-height: 35px;
}
.meta a{   color: #8b8b8b;}
  

.comment h4 .author i {
    background: #0C3;
    color: var(--white);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    text-shadow: 0 0 2px #006117;
    border-radius: 50%;
}

.loader {
    display: inline-block;

    vertical-align: middle;

    margin: 0;

    font-size: 10px;

    position: relative;

    text-indent: -9999em;

    border: 3px solid rgba(153, 148, 144, 0.15);

    border-left: 3px solid rgba(153, 148, 144, 0.8);

    -webkit-animation: load8 1.1s infinite linear;

    animation: load8 1.1s infinite linear;




}

.loader,

.loader:after {

    border-radius: 50%;

    width: 55px;

    height: 55px;

}

@-webkit-keyframes load8 {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@keyframes load8 {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}



 
 .f-caption{      position: absolute;
 z-index: 99;
    bottom: 0;
    color: #fff;
    text-shadow: 1px 1px black;}
 .f-button.is-arrow.is-next, .f-button.is-arrow.is-prev{background:none}
 
.breadcrumb {
          font-size: 12px;
    color: var(--black4);
    line-height: 35px; 
    
    /* background: #ddd; */ 
    padding: 0 10px; 
}  

 
.breadcrumb .homeicon{
    position: initial;}
 
.breadcrumb a,.breadcrumb span{margin-right: 5px;
    display: inline-block;
    color:currentColor;
    text-decoration: none;
    font-size: 12px;
    position: relative;
    z-index: 7;
}
.breadcrumb a:after{
    content: '';
    height: 5px;
    width: 5px;
    display:inline-block;
   border: 1px solid var(--bgray3);
    border-left-width: 0;
    border-top-width: 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
  margin-left: 5px;
    vertical-align: middle;
}
 
 
  







 @media screen and (max-width: 680px) {
     
     
     :root {
    --mw: 100%; 
}



     body{background:var(--bg);
     font-size: 15px}
      
    
      header h3:before, header h3:after, header p.info:before, header p.info:after, header p.tag:before, header p.tag:after, header:before, header:after{display:none}
     
    header a.avatar{float:none;
        display: block;
        margin: -30px 0 0 10px;
        height: 65px;
    width: 65px;
    } 
    header h3, header p.info{margin:0 20px;}
    header h3 {font-size:19px}
     .tb-btn {display:none}
   
.tmenu{           margin: -90px 10px 0;
        height: 85px;
} 

.tmenu a:first-child{display:block} 
.uinfo{height:1px;} 
 
 

.album  ul.list li{float:none; 
    width:auto;}

 

 

.xsui-gallery ul li a img {  
    width: 100%;
    aspect-ratio: 1 / 1; 
}
 
     
     
     
     nav{  
        
        z-index: 90;
 
     }
     
     
 

nav ul { 
    padding: 0;
    list-style: none;
	margin:0;
	text-align: center;
	background: none;
	display:flex;
}
 
    nav ul li{     flex: 1;}
    nav ul li a{      
  font-size: 15px;
       font-weight: 400;  
    }
    
    nav ul li a svg{display: block;
    float: none;
    margin: auto;
    width: 1.5em;
    height: 1.5em;}

 
     
header h1 {height: 190px;
    color: var(--white);
    text-align: center;
    font-size: 27px;
    font-family: 'Noto Sans SC';
    font-weight: 900;
    padding: 100px 0  0;
    position: relative;
    margin: 0;
    z-index: 1;
    
     
}

 

header span {      display: block;
    font-size: 12px;
    margin-top: 6px;font-weight: 400;
}

 footer p{font-size:10px;}
   footer:after,footer:before,footer p:before,footer p:after{display:none}
   

 
 article.wb, article.index,article.page, article.post{
    padding: 10px 15px 6px;
}
article.index .avatar { 
    left: 10px;
    top: 8px; 
}
article.index .user {
    line-height: 1.4em;
    margin: 0 0 5px 55px; 
}
 
   article.grid,
 article.music-p,article.t-img{padding: 6px;}
 article.status{padding:5px 5px 6px}
  
  
   article.gallery-list{grid-template-columns: repeat(1, 1fr);gap: 15px;}
   article.gallery{padding:0;}
   article a.one-p { 
    max-width: 80%;
}
   
article a.one-p  img{   
    max-height: 200px;  
}
/*  .xsui-gallery ul{ gap: 2px;*/
/*  grid-template-columns: repeat(3, 1fr);*/
/*} */
  
  .index .gallery,.index .gallery-4,.index .gallery-5,.index .gallery-7{ max-width: 100%;  gap: 2px;
}
.index .gallery-4,.index .gallery-2{grid-template-columns: repeat(2, 1fr);max-width: 66%;}

.index .gallery-mid span,.index .gallery-mid a{max-width:90%; 
}
.index .gallery span img,.index .gallery a img {width: 100%;
aspect-ratio: 1 / 1; 
 
    display: block;   
}
     
     .breadcrumb {     background: var(--bg);
    position: relative;
    z-index: 6;
     margin: 0;
} 

.comment{padding:5px 10px;}


 }
 
   .paper {
    padding: 15px 10px 15px 25px;}
 
 
 
 
    }