/*全局*/
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: #ff0;
    color: #000
}

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]{max-height:1.5em;
height: 1.5em;display: inline;}
svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

 


kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

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
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

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

td,
th {
    padding: 0
}

/*icon*/

::-webkit-scrollbar {
    width: 10px;
    height:10px;
}

::-webkit-scrollbar-thumb {
    background: #524c3f; 
    border-radius:8px;
    border: 1px solid #bfbab0
}

::-webkit-scrollbar-track {

    background: #bfbab0;
}

.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 {
    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;
  
 
}
.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{background: #3181ff;
    height: 20px;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    color: #fff;
    line-height: 20px;
    vertical-align: middle;
    padding: 0 5px;margin-right: 5px;
    border-radius: 3px;
	cursor: pointer;font-weight: 100;margin-top: -3px;
}

article .i-tag{    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    top: -1px;
    left: -1px;
    background: none;
    margin: 0; 
    border-radius: 5px 0 0 0;
}
article .i-tag span {
       position: absolute;
    display: block;
    width: 78px;
    padding: 14px 0 0;
    /* line-height: 22px; */
    background-color:  #3181ff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    color: #fff;
 
    font-size: 12px;
    font-weight: 400;
    text-shadow: 0 1px 1px rgb(0 0 0 / 20%);
    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-date{background: #b7b7b7;}
.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;
    
 
}


.x-home a:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M810.667 896H213.333a42.667 42.667 0 0 1-42.666-42.667v-384h-128L483.285 68.78a42.667 42.667 0 0 1 57.43 0l440.618 400.554h-128v384A42.667 42.667 0 0 1 810.667 896zm-256-85.333H768V390.699L512 157.995 256 390.699v419.968h213.333v-256h85.334v256z' fill='%23ffffff'/%3E%3C/svg%3E")no-repeat}
.x-blog a:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M128 789.333v-576a128 128 0 0 1 128-128h597.333A42.667 42.667 0 0 1 896 128v768a42.667 42.667 0 0 1-42.667 42.667h-576A149.333 149.333 0 0 1 128 789.333zm682.667 64v-128H277.333a64 64 0 0 0 0 128h533.334zM213.333 654.38a148.736 148.736 0 0 1 64-14.379h533.334V170.667H256a42.667 42.667 0 0 0-42.667 42.666V654.38z' fill='%23ffffff'/%3E%3C/svg%3E")no-repeat}
.x-about a:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M170.667 938.667a341.333 341.333 0 1 1 682.666 0H768a256 256 0 1 0-512 0h-85.333zm341.333-384c-141.44 0-256-114.56-256-256s114.56-256 256-256 256 114.56 256 256-114.56 256-256 256zm0-85.334c94.293 0 170.667-76.373 170.667-170.666S606.293 128 512 128s-170.667 76.373-170.667 170.667S417.707 469.333 512 469.333z' fill='%23ffffff'/%3E%3C/svg%3E")no-repeat}
.x-gallery a:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M205.995 896l-.854.853-.896-.853H127.66a42.368 42.368 0 0 1-42.326-42.368V170.368A42.667 42.667 0 0 1 127.66 128H896.34c23.382 0 42.326 18.987 42.326 42.368v683.264A42.667 42.667 0 0 1 896.34 896H205.995zm647.338-256V213.333H170.667v597.334L597.333 384l256 256zm0 120.661l-256-256-306.005 306.006h562.005V760.66zm-512-291.328a85.333 85.333 0 1 1 0-170.666 85.333 85.333 0 0 1 0 170.666z' fill='%23ffffff'/%3E%3C/svg%3E")no-repeat}
.x-guestbook a:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M311.083 888.49l-225.75 50.177 50.176-225.75A424.79 424.79 0 0 1 85.333 512C85.333 276.352 276.352 85.333 512 85.333S938.667 276.352 938.667 512 747.648 938.667 512 938.667a424.79 424.79 0 0 1-200.917-50.176zm12.373-90.154l27.861 14.933A339.413 339.413 0 0 0 512 853.333 341.333 341.333 0 1 0 170.667 512c0 56.917 13.866 111.701 40.106 160.683l14.891 27.861-27.947 125.739 125.739-27.947zM298.666 512H384a128 128 0 0 0 256 0h85.333a213.333 213.333 0 0 1-426.666 0z' fill='%23ffffff'/%3E%3C/svg%3E")no-repeat}

.x-home a:before,.x-blog a:before,.x-about a:before,.x-gallery a:before,.x-guestbook a:before{height:20px;
    width: 20px;vertical-align: middle;
    margin-right: 8px;
    content: '';
    display: inline-block;  
    background-size: auto 100%;margin-top: -3px;}


.i-lock,.i-163,.i-img{height:18px;
    width: 18px;vertical-align: middle;
    display: inline-block;  
    background-size: auto 100%;margin-top: -3px;}
.i-lock-xl{background-position: 50% 50%;
    background-size: auto 72px;
background-color: #fff}


.meta-time{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85.33300000000003 512a426.667 426.667 0 1 0 853.334 0 426.667 426.667 0 1 0-853.334 0z' fill='%2300ACC1'/%3E%3Cpath d='M170.66699999999997 512a341.333 341.333 0 1 0 682.666 0 341.333 341.333 0 1 0-682.666 0z' fill='%23EEE'/%3E%3Cpath d='M490.667 234.667h42.666V512h-42.666z'/%3E%3Cpath d='M667.413 632.619l-34.666 34.688-138.752-138.752 34.688-34.71z'/%3E%3Cpath d='M469.33299999999997 512a42.667 42.667 0 1 0 85.334 0 42.667 42.667 0 1 0-85.334 0z'/%3E%3Cpath d='M490.66700000000003 512a21.333 21.333 0 1 0 42.666 0 21.333 21.333 0 1 0-42.666 0z' fill='%2300ACC1'/%3E%3C/svg%3E")no-repeat 0 50%;
 }
.meta-comm{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M789.333 832H234.667l-128 128V234.667c0-70.4 57.6-128 128-128h554.666c70.4 0 128 57.6 128 128V704c0 70.4-57.6 128-128 128z' fill='%23009688'/%3E%3Cpath d='M448 469.333a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM661.333 469.333a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM234.66699999999997 469.333a64 64 0 1 0 128 0 64 64 0 1 0-128 0z' fill='%23FFF'/%3E%3C/svg%3E")no-repeat 0 50%;
 }

.meta-cre{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M853.333 256h-384L384 170.667H170.667c-46.934 0-85.334 38.4-85.334 85.333v170.667h853.334v-85.334c0-46.933-38.4-85.333-85.334-85.333z' fill='%23FFA000'/%3E%3Cpath d='M853.333 256H170.667c-46.934 0-85.334 38.4-85.334 85.333V768c0 46.933 38.4 85.333 85.334 85.333h682.666c46.934 0 85.334-38.4 85.334-85.333V341.333c0-46.933-38.4-85.333-85.334-85.333z' fill='%23FFCA28'/%3E%3C/svg%3E")no-repeat 0 50%;
}
.meta-time,.meta-comm,.meta-cre{margin-right: 12px;display: inline-block;  
    background-size: auto 17px;
padding-left: 20px;}


fieldset {
 border: 0;
    padding: 28px;
    background: #f7f7f7; 
}

fieldset legend {
     
}


legend {
    border: 0;
    padding: 0;
}

html, body { scroll-behavior:smooth; }
body {
    margin: 0;
    color: #1a1a1a; 
   font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
}

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

:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}





a {
    color: #666;
    text-decoration: none;
}

a:focus,
a:hover {
    color: #333;
    outline: 0;
}

a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

figure {
    margin: 0
}

img {
    vertical-align: middle
}

abbr[data-original-title],
abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #777
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    font-weight: 500;
    color: inherit
}

.h1 .small,
.h1 small,
.h2 .small,
.h2 small,
.h3 .small,
.h3 small,
.h4 .small,
.h4 small,
.h5 .small,
.h5 small,
.h6 .small,
.h6 small,
h1 .small,
h1 small,
h2 .small,
h2 small,
h3 .small,
h3 small,
h4 .small,
h4 small,
h5 .small,
h5 small,
h6 .small,
h6 small {
    font-weight: 100;
    line-height: 1;
    color: #999
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin-top: 20px;
    margin-bottom: 10px
}

.h1 .small,
.h1 small,
.h2 .small,
.h2 small,
.h3 .small,
.h3 small,
h1 .small,
h1 small,
h2 .small,
h2 small,
h3 .small,
h3 small {
    font-size: 65%
}

.h4,
.h5,
.h6,
h4,
h5,
h6 {
    margin-top: 10px;
    margin-bottom: 10px
}

.h4 .small,
.h4 small,
.h5 .small,
.h5 small,
.h6 .small,
.h6 small,
h4 .small,
h4 small,
h5 .small,
h5 small,
h6 .small,
h6 small {
    font-size: 75%
}

.h1,
h1 {
    font-size: 24px
}

.h2,
h2 {
    font-size: 20px
}

.h3,
h3 {
    font-size: 16px
}

.h4,
h4 {
    font-size: 14px
}

.h5,
h5 {
    font-size: 14px
}

.h6,
h6 {
    font-size: 14px
}

p {
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.8em
}

.small,
small {
    font-size: 85%
}

.avatar {
    border-radius: 50%;
}

.lazyload,
.lazyloading {
    opacity: 0.3;
    min-height: 20px;
    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;
}

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


.well {display: block;
    margin:0 ;
        height: 50px;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #4f4f4f;
    line-height: 50px;
    text-align: center;
    background: #f3faff;
    margin: 0 20px 20px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
    border: 1px solid #efefef;
}

.well i {
    color: #afbac3;
    font-size: 2em;
    vertical-align: middle
}

article  blockquote{
   padding: 10px 15px;
    background: #f7f7f7;
    color: #949494;
    margin: 0;
    font-weight: 600;
    width: fit-content;
    max-width: 100%;
    position: relative;
}
article  blockquote p{    color: #151515;
    margin: 0;
}

blockquote:before,
blockquote:after{
    border-top: 2px solid #222;
    border-left: 2px solid #222;
    position: absolute;
    width: 10px;
    height: 10px;
    background-position: 50% 50%;
    background-size: 100% auto;
    left: 0px;
    top: 0px;
    content: '';
    z-index: 0;
}

blockquote:after{
    right: 0px;
    top: auto;
    left: auto;
    bottom: 0px;
    border-top: 0;
    border-left: 0;
    border-bottom: 2px solid #222;
    border-right: 2px solid #222;
}

blockquote p {
    margin: 0;
}

.mark,
mark {
    padding: .2em;
    background: #fcf8e3
}

.fr {
    float: right
}

.fl {
    float: left
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.text-nowrap {
    white-space: nowrap
}

.text-lowercase {
    text-transform: lowercase
}

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700
}

input[type=search] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

input[type=checkbox],
input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px\9;
    line-height: normal
}

input[type=file] {
    display: block
}

input[type=range] {
    display: block;
    width: 100%
}

select[multiple],
select[size] {
    height: auto
}

input[type=file]:focus,
input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

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

output {
    display: block;
    padding-top: 7px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555
}



.input {
    display: block;
    width: 100%;
   transition: .4s ease;
    border: 0;
   padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background: #f8f8f8;  
}


.user-info{     display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;margin-top: -5px;
}

fieldset input.input {
    background: #fff;
    border-radius: 5px; 
    padding-left: 40px;
}

fieldset p {
        margin: 0 0 15px;
    padding: 0;
    position: relative; 
}
textarea.input {height: 46px;
 
    display: block;
    width: 90%;
    /* max-width: 494px; */
    background: #fff;
    border: 0;
    /* margin-right: 10px; */
    padding: 0;
}

fieldset input.input:focus,
textarea.input:focus { 
    background: #fff;border:0;
}

.smilies{max-width: 494px; display: none;
position: relative}
.smilies-list,.smilies summary{position: absolute;}
.smilies-list{left: 5px;
top: -41px;}
.smilies-list img{width: 22px;
    height: 22px;
    float: left;
    border-radius: 3px;
    cursor: pointer;
    padding: 2px;}
.smilies-list img:hover{
    background: #ddd;}

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




/* 隐藏默认三角 */
::-webkit-details-marker {
    display: none;
}
::-moz-list-bullet {
    font-size: 0;
    float: left;
}
.smilies summary {
    user-select: none;
    outline: 0;
    right: 5px;
top: -40px;
    background: #d0d0d0;
    padding: 3px;
    height: 18px;
    width: 30px;border-radius: 18px;
       transition: background .5s;
}
.smilies summary:after {
    content: '';
    display: block;
    width: 12px; height: 12px;
     border-radius: 12px;
    background: #fff;
     margin-left: 0;
    transition: margin .2s;
}
[open] summary::after {
   margin-left: 12px;
}
[open] summary{background: #f02737;}
/* 动画效果 */
details + div.smilies-list {
    max-height: 0;
    transition: max-height .25s;
    margin: 0 0 1rem;
    overflow: hidden;
}
[open] + div.smilies-list {
    max-height: 100px;
}





 a.close{  width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    /* float: right; */
    z-index: 7;
    right: -10px;
    top: -10px;
    background: #f02737;
    border-radius: 50%;
    /* border: 1px solid #fff; */
    box-shadow: 0 0 5px #fff;
    }


  a.close:before,a.close:after {
       content: '';
    height: 1px;
    width: 16px;
    display: block;
    background: #ffffff;
    -moz-border-radius: 10px;
    position: absolute;
    top: 11px;
    left: 4px;
        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 {
      margin: 0 0 10px;
    border-bottom: 1px solid #ddd; 
    padding: 0 10px; 
}
 
article h3.tit-r {margin: 0 -25px 25px;box-shadow: 0 1px 0 #fff;font-size: 18px;}
 
h3.tit-r span{display: inline-block;
    line-height:40px;
    position: relative;}
h3.tit-r span:after{    display: block;
    content: "";
    height: 3px;
    background: #237bff;
    bottom: -2px;
    border-radius: 2px;
    box-shadow: 0 3px 5px #93beff;
    position: absolute;
    left: 0;
    right: 0;}

fieldset p label {
    height: 34px;
    text-align: center;
    width: 34px;
    color: #ccc;
    line-height: 34px;
    margin: 0;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

fieldset label.i-my {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M800 384c0-160-128-288-288-288S224 224 224 384c0 108.8 57.6 201.6 147.2 249.6-121.6 48-214.4 153.6-240 288-3.2 16 6.4 35.2 25.6 38.4h6.4c16 0 28.8-9.6 32-25.6C224 784 355.2 675.2 508.8 672h6.4C672 672 800 544 800 384zm-512 0c0-124.8 99.2-224 224-224s224 99.2 224 224c0 121.6-99.2 220.8-220.8 224h-9.6C384 604.8 288 505.6 288 384zm435.2 291.2c-16-9.6-35.2-6.4-44.8 9.6-9.6 16-6.4 35.2 9.6 44.8 73.6 51.2 124.8 121.6 140.8 204.8 3.2 16 16 25.6 32 25.6h6.4c16-3.2 28.8-19.2 25.6-38.4-19.2-99.2-80-185.6-169.6-246.4z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 50% 50%;
}

fieldset label.i-mail {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M858.656 192H165.344C109.472 192 64 237.44 64 293.312v469.376C64 818.56 109.472 864 165.344 864h693.312C914.528 864 960 818.56 960 762.688V293.312C960 237.44 914.528 192 858.656 192zm0 608H165.344C144.736 800 128 783.264 128 762.688V293.312C128 272.736 144.736 256 165.344 256h684.544L542.4 535.808c-14.592 14.56-38.272 14.528-54.752-1.792L243.392 327.264c-13.536-11.424-33.728-9.76-45.12 3.744-11.424 13.472-9.76 33.664 3.744 45.088l242.304 204.96c19.904 19.904 46.048 29.792 72.032 29.792 25.632 0 51.136-9.632 70.176-28.736L896 300.544v462.144C896 783.264 879.264 800 858.656 800z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 50% 50%;
}

fieldset label.i-homepage {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96 480c-9.6 0-19.2-3.2-25.6-12.8-12.8-12.8-9.6-35.2 3.2-44.8L451.2 112c35.2-25.6 86.4-25.6 118.4 0l377.6 307.2c12.8 9.6 16 32 3.2 44.8-12.8 12.8-32 16-44.8 3.2L531.2 166.4c-9.6-6.4-28.8-6.4-38.4 0L115.2 473.6c-6.4 6.4-12.8 6.4-19.2 6.4zm720 448H608c-19.2 0-32-12.8-32-32V745.6c0-22.4-38.4-44.8-67.2-44.8-28.8 0-64 19.2-64 44.8V896c0 19.2-12.8 32-32 32H211.2c-48 0-83.2-35.2-83.2-80V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c0 9.6 6.4 16 19.2 16H384V745.6c0-64 67.2-108.8 128-108.8s131.2 44.8 131.2 108.8V864h176c9.6 0 16 0 16-19.2V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c-3.2 48-35.2 80-83.2 80z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 50% 50%;
}

.readmore {
   display: block;
    background: #f5f5f5;
    padding: 10px;
 margin-bottom: 10px; 
    width: fit-content;
    font-size: 14px;
    max-width: 80%;
    line-height: 1.8;
    border-radius: 10px;word-break: break-word;
}

 

.input:focus {
    border-color: #efefef;
    outline: 0;
    -webkit-box-shadow: inset 0 0 0;
    box-shadow: inset 0 0 0;
}

.input::-moz-placeholder {
    color: #999;
    opacity: 1
}

.input:-ms-input-placeholder {
    color: #999
}

.input::-webkit-input-placeholder {
    color: #999
}

.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: #fff;
    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: #f02737;
    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: #fff;
    background: #777;
}

.btn:focus,
.btn:hover {
    background: #a10000;
    color: #fff;
    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
}



 .main {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;

    }
  

.pagination {
    margin: 20px 0;
    text-align: center;
}

/*.pagination:before{ display:none}*/

.pagination a,
.pagination > span {
    position: relative;
    display: inline-block;
    vertical-align: top;
       border: none;
    background: transparent;
    min-width: 36px;
    padding: 5px 10px;
    border-radius: 9999px!important;
    height: 36px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    margin: 0 4px 0
}

.pagination > span.current {
    color: #fff;
    background-color: #33333a; 
}


.pagination > a.prev,.pagination > a.next{background: #efefef; 
    padding: 5px 20px;}
.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;
    color: #777;
    background: #ddd
}

.pagination > .disabled a,
.pagination > .disabled a:focus,
.pagination > .disabled a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
    color: #999;
    cursor: not-allowed;
    background-color: #ddd
}

 
  

.carousel-inner > .item a > img,
.carousel-inner > .item > img,
.img-responsive,
.thumbnail a > img,
.thumbnail > img,
article img,
.size-full {
    display: block;
    max-width: 100%;
    height: auto
}

.img-rounded {
    border-radius: 6px
}

.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}


/*.fancybox-active .main{  filter: blur(10px);}*/

.header h1 {
    margin: 0;
    font-size: 18px;
}

.header p {
    display: none
}



.header .navbar-nav   li + li:before {
    position: absolute;

    left: -5px;

    top: 10px;

    color: #ebebeb;

    content: "/\00a0";

}



article {
   margin: 0;
    padding: 25px 25px 35px;
}

/*article:last-child{ border-bottom:0;}*/


    
    
    
    
    
    
    
    
article.post, article.index, article.page,article.gallery{
  background: #fff;
    margin: 0 20px 20px; 
    border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
    border: 1px solid #efefef;
}
article.index{padding: 15px 25px 0;}
article.index p.content{margin: 0 0 1.2em}




    
    
article.about {
    background: #fafafa;
    box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 300px 25px rgba(222,198,122,0.7) inset;
   padding: 48px;
    position: relative;
    z-index: 5;
    margin: 28px 50px;
} 
article.about  p{color: #3e3a2f;}

article.about:before, article.about:after {
    content: "";
    background: #fafafa;
    box-shadow: 0 0 8px rgba(0,0,0,0.2), inset 0 0 300px rgba(222,198,122,0.7);
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -2;
    transition: .5s;
}

article.about:before {
    left: -5px;
    top: 2px;  
    transform: rotate(-1.5deg);
}

article.about:after {
    right: -3px;
    top: 0px; 
}
 



article.wb { padding: 15px 25px 0; 
    box-shadow: 0 4px 10px rgb(223 242 255);
    border: 1px solid #c2e7ff; }
  
article.wb  p{margin: 0;
font-size: 14px;  }
 
article.gallery p{margin: 0;
text-align: center;
color: #888}
article.gallery{padding:2px}
article.gallery .gallery-tit{background: #f8f8f8;border-radius: 5px 5px 0 0;}
article.post h2,article.gallery h2{margin: 0}
article.post p.mate,article.gallery p.mate{margin:  0;
    color: #969696;
    font-size: 13px;}

article.post:after,article.gallery:after{content: "end";
   
    background: #fff;
    text-transform: uppercase;
    width: 40px;
    height: 18px;
    color: #ccc;
    font-weight: 400;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left: -20px;
}
article.gallery:after{content: "over";}


article.guestbook{position: relative;
background: repeating-linear-gradient(45deg, #ebdeb5 , #ebdeb5 5px, #3C7AB8 0, #3C7AB8 20px, #ebdeb5 0, #ebdeb5 25px, #CB2C4B 0, #CB2C4B 40px);
padding: 5px;
width: 80%} 
article.guestbook p {background: #fafafa;
    box-shadow: inset 0 0 50px 10px #ebdeb5;
    padding: 20px 15px; 
    margin: 0;
    border-radius: 5px;}
article.guestbook:before{content: "";
    display: block;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1626 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1273.923 539.385c-41.445-22.537-80.167-43.913-121.248-50.424-41.072-6.504-81.672 2.308-124.51 11.502-48.838 10.411-98.501 21.418-155.865 12.333-55.952-8.855-91.131-29.679-128.324-51.542-35.18-20.816-71.067-41.746-129.07-56.016-2.825-.445-3.801-3.506-3.457-5.63.445-2.83 3.498-3.8 5.628-3.462 59.3 15.202 95.9 36.24 131.788 57.172 36.598 21.045 70.359 41.639 124.89 50.272 55.243 8.749 104.195-2.366 152.217-12.19 43.654-9.78 85.674-18.37 128.167-11.645 42.493 6.734 82.633 28.339 124.667 51.693m-2.847 114.254c-41.445-22.537-80.167-43.912-121.246-50.423-41.074-6.504-81.674 2.309-124.51 11.5-48.84 10.413-98.503 21.42-155.867 12.335-55.952-8.856-91.131-29.679-128.324-51.542-35.179-20.817-71.067-41.747-129.07-56.016-2.825-.445-3.801-3.507-3.457-5.63.445-2.832 3.614-4.51 5.628-3.462 59.302 15.202 95.9 36.24 131.789 57.171 36.598 21.047 70.358 41.64 124.89 50.273 55.242 8.749 104.194-2.366 152.216-12.19 43.655-9.78 85.675-18.37 128.168-11.645 42.492 6.733 82.633 28.339 124.666 51.692m-2.03 113.66c-41.445-22.537-80.166-43.92-121.239-50.423-41.08-6.504-81.673 2.309-124.517 11.494-48.831 10.419-98.495 21.426-155.86 12.34-55.952-8.862-91.137-29.678-128.323-51.541-35.187-20.816-71.075-41.747-129.07-56.016-2.833-.445-3.802-3.506-3.464-5.63.452-2.831 3.621-4.51 5.63-3.462 59.3 15.201 95.899 36.24 131.794 57.172 36.477 21.748 70.358 41.639 124.89 50.272 55.242 8.748 104.19-2.366 152.21-12.19 43.662-9.78 85.674-18.378 128.167-11.645s82.634 28.331 124.675 51.692m6.352 115.71c-41.446-22.536-80.167-43.912-121.24-50.422-41.08-6.504-81.674 2.316-124.518 11.5-48.946 11.116-98.609 22.13-155.974 13.051-55.951-8.87-91.13-29.686-128.324-51.548-35.178-20.817-71.067-41.747-129.07-56.017-2.832-.444-3.8-3.506-3.462-5.629.45-2.832 3.62-4.51 5.635-3.463 59.3 15.202 95.9 36.24 131.789 57.172 36.591 21.045 70.357 41.639 124.889 50.273 55.242 8.748 104.195-2.366 152.217-12.19 43.654-9.78 85.674-18.371 128.167-11.645 42.493 6.733 82.627 28.338 124.667 51.692m-23.657-419.012c-41.446-22.545-80.167-43.92-121.24-50.424-41.08-6.511-81.68 2.308-124.516 11.494-48.84 10.412-98.503 21.426-155.867 12.334-55.952-8.857-91.131-29.673-128.324-51.535-35.18-20.823-71.06-41.747-129.07-56.017-2.825-.452-3.801-3.514-3.457-5.63.445-2.839 3.506-3.8 5.629-3.47 59.3 15.202 95.9 36.248 131.787 57.178 36.598 21.038 70.359 41.633 124.897 50.266 55.243 8.748 104.189-2.366 152.21-12.19 43.655-9.78 85.674-18.371 128.167-11.638 42.493 6.726 82.633 28.331 124.668 51.686m11.487-95.462c-41.439-22.537-80.16-43.913-121.234-50.424-41.08-6.503-81.68 2.309-124.516 11.502-48.84 10.411-98.502 21.426-155.866 12.333-56.06-8.153-90.535-28.854-127.73-50.718-35.178-20.816-71.06-41.747-129.07-56.016-2.825-.453-3.801-3.506-3.457-5.629.445-2.832 3.507-3.8 5.63-3.463 59.3 15.202 95.898 36.24 131.788 57.171 36.598 21.039 70.357 41.632 124.896 50.266 55.242 8.756 104.189-2.365 152.21-12.19 43.654-9.78 85.674-18.37 128.167-11.637 42.493 6.726 82.633 28.33 124.667 51.686M341.785 797.482C123.656 762.934-24.652 557.949 9.788 340.516 44.228 123.082 248.61-26.037 466.746 8.52s366.56 238.822 332.005 456.958c-35.143 217.32-239.54 366.445-456.966 332.005zm2.581-16.292c208.929 33.092 405.009-109.366 438.093-318.294C815.552 253.975 673.094 57.902 464.165 24.803 255.237-8.297 59.171 134.169 26.072 343.104-7.02 552.027 135.438 748.098 344.374 781.19h-.008zm18.285-115.44c-145.183-22.995-244.13-159.186-221.14-304.368 23.003-145.182 159.186-244.129 304.377-221.14s244.13 159.186 221.14 304.376c-23.003 145.182-159.187 244.13-304.376 221.14v-.007zm2.582-16.29c136.685 21.655 264.665-71.333 286.32-208.019s-72.157-264.077-208.14-285.61c-135.982-21.534-264.665 71.333-286.32 208.019-21.655 136.684 71.454 263.962 208.14 285.61zm903.921-228.892l-1.118 7.077-6.374-1.003 1.126-7.085 6.367 1.004v.007zM341.843 797.49C124.417 763.056-24.71 558.666 9.845 340.529S248.668-26.028 466.805 8.527C684.94 43.081 832.645 247.242 798.097 465.37c-34.433 217.426-238.83 366.552-456.256 332.112v.007zm2.58-16.284c208.93 33.092 405.009-109.366 438.094-318.302C815.609 253.981 673.152 57.91 464.222 24.817S59.23 134.183 26.13 343.112C-6.963 552.034 135.495 748.106 344.431 781.205h-.008zm18.286-115.446c-145.183-22.99-244.13-159.18-221.14-304.362 23.003-145.182 159.187-244.129 304.377-221.14s244.128 159.186 221.14 304.375C644.082 589.815 507.9 688.762 362.71 665.773v-.014zm2.581-16.284c136.685 21.648 264.666-71.34 286.32-208.026s-72.156-264.077-208.139-285.61c-135.982-21.533-264.665 71.333-286.32 208.019-21.656 136.684 71.454 263.968 208.14 285.617zm903.764-228.57l-1.119 7.084-6.382-1.01 1.126-7.085 6.382 1.01h-.007z' fill='%23000'/%3E%3C/svg%3E") no-repeat 100% 100%;
    position: absolute;
    left:6px;
    top: 0;
    width: 51px;
    height: 33px;
    background-size: 100% auto; }

article.gallery .wp-block-gallery{    padding: 15px 15px 0;}
article.gallery blockquote {
    border: 0;
    background: #fbfbfb;
    margin: 0 0 5px;
}

article h2 {
  margin: 0;
    color: #333;
    line-height: 36px;
}
 
 

article.gallery h2 {
padding: 10px;
    font-weight: 400;
    font-size: 22px;
    text-align: center;
    color: #1d1d1d;
    margin: 0;
}

article h2 a {
    color: #404040
}

article h2 i,
ul.list li .icon-favorfill {
    color: #FFCC00;
}

article h2 i.icon-lockh5 {
    color: #999
}

article p {font-size: 15px;
    color: #1a1a1a;
    word-break:break-all;margin: 1.2em 0; }
 
.player-163 {
    border: 1px solid #eee;
    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: #fff;
    border-radius: 0 5px 5px 0;
    height: 66px;
}


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

.lock-frame{background: rgba(0, 0, 0, 0.20);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999; -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);}
.lock-post{width: 280px;   
    position: fixed;
    top: 40%;
    left: 50%;
    margin-left: -140px;
    transform: translateY(-50%);}
.lock-post h3{margin: 15px 0;
    text-align: center;}
 
.lock-post input,.lock-post button{float: left;
line-height: 35px;padding: 0;
border:0;}
.lock-post input{width: 220px;border-radius: 18px 0 0 18px ;}
.lock-post button{width: 58px;border-radius: 0 18px 18px 0;background: #8BC34A;
    color: #fff;}

footer {
       font-size: 12px;
    color: #484848;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;

}

footer p {
    line-height: 1.8em; 
    padding: 15px 0  ;
   margin: auto;
    max-width: 900px; 
    z-index: 2; 
}

footer a {
    color: #333;
}

footer a:hover {
    color: #333
}
 

footer .fr {
    font-size: 2em;
}

footer .fr i {
    margin-left: 15px;
}

p.matebootm {}

.sharebox a {
    padding: 0 5px;

    color: #666666
}

.sharebox a i {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: inline-block;

    color: #ffffff;

    font-style: normal;

    background: #aaaaaa;

    line-height: 28px;

    text-align: center;

    font-size: 14px;



}





.sharebox a i.fa-weibo {

    background: #d04340;

}



.sharebox a i.fa-qq {

    background: #5ca3e1;

}

.sharebox a i.fa-paw {
    background: #3385ff
}

.pipe {
    margin: 0 10px;
}


.archives dt {
    position: absolute;

    left: 0;

    text-align: center;

    width: 60px;

    border: 0;

    top: 0;
}

.archives h3 {
    color: #999;
    font-size: 12px;
    background: #f8f8f8;
    padding: 5px 10px;
}


.archives dt small {
    color: #b9b9b9;
    background: #efefef;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    display: none
}

.archives dt strong {
    display: block;
    font-weight: 300;
    font-size: 18px;
}

.archives dd {
    margin: 0 0 0 60px;
    padding: 0;
    border-left: 1px solid #d5d5d5;
    position: relative
}

.archives ul {
    padding: 10px 20px
}

.archives li {
    color: #999;
    line-height: 1.8em;
    list-style: none;
    margin: 0;
    padding: 3px 0;
    font-size: 12px;
    position: relative
}

.archives li:before {
    content: '';
    position: absolute;
    margin: auto;
    left: -24px;
    top: 50%;
    margin-top: -6px;
    width: 8px;
    height: 8px;
    background: #ccc; 
    z-index: 1;
    border-radius: 100%;
}

.archives li a {
    font-size: 14px
}

article header h2,
.chead h2 {
    font-weight: 400
}

.chead h2 {
    border-color: #f02737
}


 

aside {
    
	border-top: 1px solid rgba(41, 43, 46, 0.7); 
}



aside h4 {
    margin-bottom: 10px;
    padding: 0 10px;
 color: #7b7b7b;
}

aside ul,
.tagcloud {
    list-style: none;

    padding: 0;

    font-weight: 200;

    line-height: 1.8em;
}
aside ul.blogroll{padding: 0 15px;}

aside .screen-reader-text {
    display: none
}

.custom-html-widget {
    padding: 20px 0 0
}

.custom-html-widget a {
    border: none;
    outline: none;
    background: #3a3a3a;
    display: block;
    color: #999;
    line-height: 35px;
    padding-left: 10px;
    border-radius: 5px;
}


aside .blogroll a {
    display: block;
    font-size: 12px;
	color:#a29c95;
	font-weight:400
}

aside .blogroll a:hover {
    padding-left: 15px;
    color: #ddd;
}

.tagcloud a {
    margin: 1px;
    padding: 0 5px;
    color: #777;
    display: inline-block;
    border-radius: 3px;
    background: #f7f7f7;
    vertical-align: middle;
    position: relative;
}







ul.list,
ul.list li {
    list-style: none;
    margin: 0;

    padding: 0
}
 

 

.note ul.list li a {
    display: block;

    padding: 10px 15px;

    background-color: #fff;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden; 
}

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


.note ul.list li a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #33333a;
    height: 1px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.note ul.list li a:hover:before,
.note ul.list li a:focus:before,
.note ul.list li a:active:before {
    right: 0;
}

.note ul.list li span {    margin-right: 8px;
   
}
.note ul.list li span.date{font-size:12px;
	color: #999;
	float: right;
}

aside.ixsui {
    text-align: center;   
    border: 0; 
	border-bottom: 1px solid rgba(41, 43, 46, 0.7); 
	color:#909090;
}
/* common */

 
aside.ixsui a.avatar {
display:  block;
    margin: auto;
    width: 50px;  
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
aside.ixsui a.avatar img {
    display: block;
    width:50px;height: 50px;
    border-radius: 50%;
}
  
   
aside.ixsui a.avatar:hover  {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
  
aside.ixsui p.small {
    color: #ddd;
    font-weight: 100;
    font-size: 12px;
}

aside.ixsui h3 {
    margin: 8px 0 5px;
	color:#eee;
    font-size: 14px
}

aside.ixsui ul {margin: 0 10px 10px;
    display: flex;
    font-weight: 400;
    background: #000000b3;
    padding: 5px 0;
    border-radius: 5px;
}

aside.ixsui li {
    text-align: center;
    line-height: 1.5em;
    color: #9d9d9d;
    font-size: 13px;
    flex: 1;
    
}

aside.ixsui li:nth-child(2) {
    border-left: 1px solid rgba(41, 43, 46, 0.7);
    border-right:1px solid rgba(41, 43, 46, 0.7)
}

 
aside.ixsui li   svg{ display: block;margin: auto; width: 1.7em;height: 1.7em;vertical-align: middle;fill: currentColor;overflow: hidden;}

.contact {
    margin-bottom: 20px;
}

.contact .btn {
    border-radius: 0;
    /* font-size: 12px; */
    background: #eae7e3;
    color: #9c9892;
}



/*.blogroll li a:after,
.post a[href^="http://"]:after,
.post a[href^="https://"]:after,*/
.comment p a[href^="http://"]:after,
.comment p a[href^="https://"]:after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23888' d='M880.356 113.778H568.889v-56.89H967.11v398.223h-56.889V164.41l-471.78 471.723-40.22-40.22 482.134-482.134zM455.11 170.667v56.889H227.556c-62.578 0-113.778 51.086-113.778 113.777v455.111a113.778 113.778 0 0 0 113.778 113.778h455.11c62.92 0 113.778-50.802 113.778-113.778V568.89h56.89v227.555c0 94.436-76.346 170.667-170.667 170.667H227.556A170.667 170.667 0 0 1 56.889 796.444v-455.11c0-94.152 76.686-170.667 170.667-170.667H455.11z'/%3E%3C/svg%3E") no-repeat 50% 100%;
        background-size: auto;
    content: "";
    display: inline-block;
    width: 13px;
    vertical-align: middle;
    height: 12px;
    margin-left: 3px;
}
/*
.post a[href^="http://"],
.post a[href^="https://"],*/
.comment p a[href^="http://"],
.comment p a[href^="https://"] {
    color: #09F; 
    background: #e9f5fd;
    border-radius: 10px;
    padding: 0 7px;
    border: 1px solid #fff;
}
.comment p a[href^="http://"]{color: #888;background: #f9f9f9;}

.blogroll li a:before {
    margin: -2px 8px 0 0;
    content: '';
    height: 0;
    vertical-align: middle;
    width: 0;
    display: inline-block;
    border: 3px transparent solid;
    border-right-width: 0;
    border-left-color: #5f5f5f;
}

.blogroll li a:hover::before {
    opacity: 1;
    z-index: 1;
}

.blogroll li a:hover::after {
    color: #0C0;
}



/*
.post a[href^="https://xsui.com"]:after,
.post a[href^="https://www.xsui.com"]:after,
.post a[href^="https://img.xsui.com"]:after,
.post a[href^="httsp://static.www.xsui.com"]:after,
.post a > img:after {
    display: none
}

.post a[href^="https://xsui.com"],
.post a[href^="https://www.xsui.com"],
.post a[href^="https://img.xsui.com"],
.post a[href^="httsp://static.www.xsui.com"],
.post a > img {
    color: #666
}
*/

.wp-link-cards{margin: 10px 0}

.wp-link-cards a{background: #f7f7f7;
    border-radius: 12px;
    padding: 12px 110px 12px 20px;
    display: block;
    text-align: left;
    width: fit-content;
    max-width: 520px;margin: auto;
    position: relative;}
.wp-link-cards a img{position: absolute;
right: 15px;
top: 15px;
width: 32px;
    height: 32px;}
.wp-link-cards p{margin: 0;
font-size: 12px;
color: #999}
.wp-link-cards a span{ font-size: 16px;
    color: #1a1a1a;
display: block;white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
margin-bottom: 5px}
.wp-link-cards a  small{font-size: 14px;
    color: #999;
    line-height: 16px;
display: block;}
.wp-link-cards a  small:before {
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23888' d='M880.356 113.778H568.889v-56.89H967.11v398.223h-56.889V164.41l-471.78 471.723-40.22-40.22 482.134-482.134zM455.11 170.667v56.889H227.556c-62.578 0-113.778 51.086-113.778 113.777v455.111a113.778 113.778 0 0 0 113.778 113.778h455.11c62.92 0 113.778-50.802 113.778-113.778V568.89h56.89v227.555c0 94.436-76.346 170.667-170.667 170.667H227.556A170.667 170.667 0 0 1 56.889 796.444v-455.11c0-94.152 76.686-170.667 170.667-170.667H455.11z'/%3E%3C/svg%3E") no-repeat 50% 100%;
    background-size: 14px 14px;
    content: "";
    display: inline-block;
    width: 16px;
    vertical-align: sub;
    height: 16px;
    margin-right: 5px;
}








.fancybox-content .archives {
    cursor: pointer;
    font-weight: 200;
}

.fancybox-content .archives dl:hover {
    color: #999;
    background: rgba(0, 0, 0, 0.1411764705882353);
}

.fancybox-content .archives dl:hover a {
    color: #999;
}

.fancybox-content .archives a:hover {
    color: #eee
}


.archives dl {
    position: relative;

    margin: 0;
}

.badge {
    background: rgba(0, 0, 0, 0.32);
    display: inline-block;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 15px;
    color: #fff;
    line-height: 18px;
}

 

.archives ul,
.archives h3 {
    margin: 0
}

.container,.breadcrumb {
    margin: auto;
}

.hd {
    position: relative; 
    z-index: 5;
   padding:5px; 

}
.container-hd:before {
    background: #fff;
    height: 55px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
}

.container-hd:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    top: 55px;
    border-bottom: 1px solid #e2e2e2;
    /*
    box-shadow: 0px 1px 0px #fff;*/
}

  .logo {
       width: 30px;
    height: 30px;
    float: left;
    border-radius: 3px;
    margin: 5px 5px 0 0;
    position: relative;
 background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
 .logo:before{content:"";
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     bottom:0;
     right: 0; background:   url("logo.png") no-repeat;
   background-position: 50% 50%;
    background-size: 90% 90%;
 }

 

.hd p {margin: 0;
    color: #acacac;
    font-size: 18px;
    height: 35px;
    /* line-height: 35px; */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -1px;
    /* text-shadow: 0 1px 1px #000; */
    padding: 15px 0 0 0;
}


.hd p:after,.hd p:before,.hd p span:after,aside.ixsui li:after{    content: "";
    display: block;
    position: absolute;
    right: 9px;
    height: 23px;
    top: -11px;
    border-radius: 5px;
    width: 4px;
    z-index: 3;
    background-color: #434343;
      background-image: linear-gradient( 
2deg, #595d5d, #e6e6e6, #bbb);
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.89) inset, 0px 1px 2px #000;
}
.hd p span:before,.hd p small:after,.hd p small:before,aside.ixsui li:before{content: "";
       display: block;
    position: absolute;
    right: 6px;
    height: 10px;
    width: 10px;
    top: 5px;
    z-index: 2;
    background: #151615;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #000 inset, 0 1px 1px #ffffff96;
}
.hd p small:after{right: 21px;}
.hd p small:before{right: 36px;}
.hd p:before{right:24px;}
.hd p span:after{right:39px;}
aside.ixsui li:before,aside.ixsui li:after{right: auto;
left: 9px;z-index: 5; top: -5px;} 
aside.ixsui li:before{left: 6px; top: 11px; box-shadow: 1px 1px 2px #000 inset, 0 1px 1px #ffffff52;}

aside.ixsui li:nth-child(2):before,aside.ixsui li:nth-child(2):after{left: 21px}
aside.ixsui li:nth-child(2):after{left: 24px}
aside.ixsui li:last-child:before,aside.ixsui li:last-child:after{left: 36px}
aside.ixsui li:last-child:after{left: 39px}

.hd p span{font-weight: 200} 
.hd p small{
    font-size: 12px;
    letter-spacing: normal;
    margin-left: 10px; 
    font-weight: 200;
}
.hd h1 {
    margin: 0 0 0 55px;
    font-weight: 400;
    line-height: 32px;
    font-size: 21px;
    display: none;
}

.hd h1 a {
    color: #333
}

nav {
    z-index: 5;
	position:relative;
	margin: 10px;
     
}


nav ul { 
    padding: 0;
    list-style: none;
	margin:0
}




.nav:before,
.nav:after,
.pagination:before,
.pagination:after,

.cr:before,
.cr:after,
header:before,
header:after,
.rowbk:before,
.rowbk:after,
.comment:before,
.comment:after,
article:before,
article:after,
.pager:before,
.pager:after,
aside.ixsui:before,
aside.ixsui:after,
 
.album:before,
.album:after,
.list:before,
.list:after{
    display: table;
    content: " ";
}

.nav:after,
.pagination:after,
 .list:after,
.cr:after,
header:after,
.rowbk:after,
.comment:after,
article:after,
.pager:after,
aside.ixsui:after, 
.album:after{
    clear: both;
}

.nav   li {
    position: relative; 
    padding: 0;
}

 

.nav   li a {
 color: #a29c95;
      font-size: 14px;
    display: block;
    font-weight: 400;
    z-index: 5;
    position: relative;
    overflow: hidden;
    padding: 0 10px;
    line-height: 38px;
    border-radius: 5px;
}
 .nav   li a:before{opacity: 0.4; }
 

/*.nav>li a:hover:before, .nav>li a:focus:before, .nav>li a:active:before ,
.nav>li.current-menu-item a:before,.nav>li.current-post-ancestor a:before,.nav>li.current-menu-ancestor a:before,.nav>li.current-menu-parent a:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}*/

    .nav   li a:hover{background: #111;
  color: #fff;  }


.nav   li.current-menu-item a,
.nav   li.current-post-ancestor a,
.nav   li.current-menu-ancestor a,
.nav   li.current-menu-parent a,
.nav   li.current-menu-item a:hover,
.nav   li.current-post-ancestor a:hover,
.nav   li.current-menu-ancestor a:hover,
.nav   li.current-menu-parent a:hover {
    color: #fff; 
 background-color: #333333;
}


.nav   li.current-menu-item a i,
.nav   li.current-post-ancestor a i,
.nav   li.current-menu-ancestor a i,
.nav   li.current-menu-parent a i, .nav   li a:hover i{opacity: 0.8}
.nav   li.current-menu-item a:before,
.nav   li.current-post-ancestor a:before,
.nav   li.current-menu-ancestor a:before,
.nav   li.current-menu-parent a:before, .nav   li a:hover:before{opacity: 0.8}

 
  


@media screen and (min-width:  780px) {
    
article.wb  p.meta{    background: #f8fcff;
    margin: 10px -25px 0;
    border-radius: 0 0 5px 5px;
    font-size: 12px;
    padding: 0 25px;
    line-height: 30px;}     
    
}

 
 
 


/*.gallery  ul:hover li{}
.gallery ul:hover li:hover {
position:relative;
   opacity:1; transform: scale(1.08);filter: blur(0);
    }*/

 


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

/*.index .gallery ul{ max-width:600px;}*/

.index .gallery {
    max-width: 400px;
    margin-bottom: 10px;
    padding: 0
}
.index .gallery ul{padding: 0;
margin: 0}
.index .gallery li {
    width: 33%;
    float: left;
    list-style: none;
    padding: 0 2px 2px 0;
    border: 0
}

.index .gallery li img {
    width: 100%;
}

ul.list{
    /*display: flex;
    flex-wrap: wrap;
    flex-direction:  column*/
    position: relative;
    padding: 25px 25px 25px 55px;
}


.album  ul.list li{float: left;
    padding: 10px;
 
    text-align: center;
width: 25%}
 

.album  ul.list li a{display: block;
    position: relative;
    overflow: hidden;
        border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
    border: 1px solid #efefef;
    padding: 5px;
}
.album ul.list li a.i-lock-xl{ background-color: #bdc3c7;
    background-size: 18px auto;
    background-position: 95% 95%;
position: relative}

.album ul.list li a.i-lock-xl:before,
.album ul.list li a.i-lock-xl:after {
	content: '';
	position: absolute;
	width:80%;
	height: 1px;
	background: rgba(255,255,255,0.4);
	left: 10%;
	top: 50%;
}

.album ul.list li a.i-lock-xl:before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.album ul.list li a.i-lock-xl:after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


ul.list li.date,.album  ul.list li.date{
    clear: both;
    position: relative;
    margin: 0;
    height: 20px;
    float: none;
    width: auto;
}
ul.list li.date:first-child{height: 1px;padding: 0;}
ul.list li.date:before{ content:"";
display:block;
position:absolute;
left:0;
right:0;
top:9px;
height: 1px;
background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0),rgba(249, 249, 249, 0) 2px,#ccc 2px ,#ccc 4px);}

 ul.list li.date:first-child:before,.album h2:first-child:before{ display:none}

ul.list li.date strong {font-weight: 300;
    font-size: 14px;
    display: block;
    text-align: center;
    position: absolute;
    left: -55px;
    top: 30px;
    background: #33333a;
    color: #fff; 
    padding: 3px 5px;
}
ul.list li.date:first-child  strong{   top: 10px;}
 

.pager { 
    display: flex;
    flex-wrap: wrap;
}

.pager div {
    flex: 1
}

.pager div a {
    display: block;
    position: relative;
    font-size: 14px;
    color: #999;
    padding: 10px 25px;
    font-weight: 200;
}

.pager div a span {
    display: block;
    font-size: 12px;
    margin-bottom: 3px;
    color: #ababab
}

.pager div a i {
    font-size: 35px;
    color: #eee;
    width: 35px;
    float: left;
    height: 35px;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.pager div a i:before {
    top: 11px;
    left: 13px;
    border-color: #999
}

.pager div.next a i:before {
    left: 10px
}

.pager div a:hover i {
    background: #333;

    border: 1px solid #333;
}

.pager div a:hover i:before {
    border-color: #fff;
}

.pager .next a {
    text-align: right;
}

.pager .next a i {
    float: right;
    margin-right: 0;
    margin-left: 10px;
}

.pager div a i.ilf,
.prev i.ilf {
    transform: rotate(180deg);
}


.more-link { font-size: 14px;
    color: #888;
    border: 2px solid #e4e8eb;
    border-radius: 20px;
    display: block;
    line-height: 30px;
    text-align: center;
    width: 160px;
    margin: 19px auto ;}
 
.more-link:hover   {
    color: #237bff;
    border-color: #c2e7ff;
    background: #f8fcff;    box-shadow: 0 4px 10px rgb(223 242 255);
}

 .post_thumbnail,.post_title{ 
    position: relative;
 
    display: block; 
   margin: -20px -20px 15px;
}
.post_title{padding: 25px;}
.post_title:before,.post_title:after{content: "";
display: block;
position: absolute;
width: 10px;
height: 20px;
border-radius:0 10px  10px 0;
background: #f7f7f7;
bottom: 0;
left: 0;
box-shadow: -4px 0 2px 0px #f7f7f7, inset -3px 1px 2px 0 rgb(0 0 0 / 5%);}
.post_title:after{left: auto;border-radius:10px  0 0 10px;
right: 0;box-shadow: 4px 0 2px 0px #f7f7f7, inset 3px 1px 2px 0 rgb(0 0 0 / 5%);}
.post_title h2:before{position: absolute;
    content: "";
    bottom: 0;
    background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0),rgba(249, 249, 249, 0) 4px,#ccc 4px ,#ccc 8px);
    height: 1px;
    left:20px;
    right: 20px;
    bottom: 10px;
    display: block;}
 .index_thumbnail{ 
      margin: 0 20px 20px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
    display: block;  
}
      
    .post_thumbnail img,.index_thumbnail img{display: block;
    width: 100%; 
    border-radius: 5px 5px 0 0;}
.index_thumbnail img{ border-radius: 5px;}
    .post_thumbnail h2{display: block;
    position: absolute;
    left:0;
    bottom:5px;    
    padding: 10px; 
        background:  rgba(0, 0, 0, 0.5);-webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px); 
    color: #fff;}
 
.tag-list a.post_thumbnail{margin: 25px;}
.post_thumbnail span {
    font-size: 12px;
    /* margin-left: 8px; */
    display: block;
    margin-top: 10px;
}
    .post_thumbnail p{ font-size: 14px;  
        display: block;
margin: 0}
    .post_thumbnail h2{ margin:0 0 10px;
    font-weight: 400;
        display: block;
   }
   
   
    .album  ul.list  li a span,article.gallery li a:after{
    display: block;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 15px;
        font-weight: 400;
    text-shadow: 0 1px 5px #000;
   display: flex; justify-content: center;align-items: center;
    
    
}
 

.album  ul.list  li a  small{display: block;
 position: absolute;
bottom: 0;
line-height: 30px;
color: #fff;
    left: 0;
    font-size: 12px;
width: 100%;
text-align: center}

.album  ul.list li a img { 
    width: 100%;
	 
    
}  


@media screen and (max-width: 780px) {
    
   /* 编辑器 */
.callout{padding:15px 21px;background-color:#fcfdfe;border-left:3px solid transparent}
.callout-primary{border-left-color:#000}
.callout-success{border-left-color:#15c377}
.callout-info{border-left-color:#65bdf8;background:#d1eafb}
.callout-warning{border-left-color:#faa64b;background:#ffe8d0}
.callout-danger{border-left-color:#fa8181;background:#fbdddd}
.callout p:last-child{margin-bottom:0}
.reply2view{background:repeating-linear-gradient(145deg,#f2f2f2,#f2f2f2 15px,#fff 0,#fff 30px);padding:10px 40px 10px 40px;position:relative}
.video{width:100%;height:25rem}

    
    .m-logo{
    padding-top: 6px;
    padding-left: 10px;
    }
    
    .breadcrumb a, .breadcrumb span {
    margin-right: 5px;
    display: inline-block;
    color: #00000085;
    text-decoration: none;
    position: relative;
    z-index: 7;
}
.breadcrumb a:after{
    content: '';
    height: 5px;
    width: 5px;
    display:inline-block;
   border: 1px solid #b1b1b1;
    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;
}

 .breadcrumb{    
    margin-top: 45px;
    color: #555;
    line-height: 35px;
    border-bottom: 1 px solid #eaeaea;
    padding: 15 px 15 px 0;
    margin: 0 0 20 px;
    padding-left: 20px;
	} 
    
     .nav   li a {
        z-index: auto
    }
    .nav   li a:hover:before,
    .nav   li a:focus:before,
    .nav   li a:active:before,
    .nav   li.current-menu-item a:before,
    .nav   li.current-post-ancestor a:before,
    .nav   li.current-menu-ancestor a:before,
    .nav   li.current-menu-parent a:before {
        z-index: 5
    }
    .main {
        margin: 0; 
flex-direction: column-reverse;background: #f7f7f7;
    }
    
  article.wb p.meta {
    background: #f8fcff;
    margin: 10px -20px 0;
    border-radius: 0 0 5px 5px;
    font-size: 12px;
    padding: 0 25px;
    line-height: 30px;
}  
   
 
.wp-link-cards a{background: #f7f7f7;
    border-radius: 12px;
    padding: 12px 56px 12px 20px;
    display: block;
    text-align: left;
    width:auto; 
    /* max-width: 520px; */
    margin: auto;
    position: relative;}
    .wp-link-cards a p{display:none}
   .wp-link-cards a span {
    font-size: 13px;
    color: #1a1a1a;
    display: block;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
    
    
    .hd{position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px;    box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
    background: #fff;}  
 
  
.main input[type=checkbox]{ display:none}
.side{display:none;position: fixed;
    top: 0;
    bottom: 0;
    right: 0;    z-index: 6;
 max-width: 50%;
    min-width: 320px;
    background: #333;padding-top: 30px;
    box-shadow: -10px 0 0 rgb(0 0 0 / 15%);}
 nav ul{padding:0 30px;}
 nav li,aside ul.blogroll li{width:50%;
    float: left;
}

    .main input[type=checkbox]:checked ~ .side {
       display:block;
	   	animation: hidetop 0.3s;
        -moz-animation: hidetop  0.3s; /* Firefox */
        -webkit-animation: hidetop  0.3s; /* Safari and Chrome */
        -o-animation: hidetop  0.3s; /* Opera */ 
    }





    .mbutton {    width: 34px;
    height: 34px;
    display: block;
    position: fixed;
    /* float: right; */
    z-index: 7;
    right: 5px;
    top:5px;
    }
    .main input[type=checkbox]:checked ~ label .mbutton {
        background: #fff;
    border-radius: 50%;
    /* border: 1px solid #fff; */
    box-shadow: 0 0 5px #fff;
    }
    .mbutton:before {
        content: '';
        height: 2px;
        border-radius: 1px;
        width: 22px;
        background: #999;
        display: block;
        position: absolute;
        top: 9px;
        left: 6px;
        box-shadow: 0 6px #999, 0 12px #999;
    }

  .main input[type=checkbox]:checked ~ label .mbutton:before,
   .main input[type=checkbox]:checked ~ label .mbutton:after {
        content: '';
        height: 2px;
        width: 22px;
        display: block;
        background: #7a7a7a;
        -moz-border-radius: 10px;
        position: absolute;
        top: 16px;
        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;
    }

    .main input[type=checkbox]:checked ~ label .mbutton:after {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
    }

 
    
    
 ul.list li.date:first-child:before,.album h2:first-child:before{ display:block}

    .readmore{width: 100%;
    max-width: 100%;}
    
  
    
    footer a.gotop,
    footer .i-wp {
        display: none
    }

    .hd h1 {
            display: none;
    }
    .hd h1 a {
    color:#a29c95;
}
    .hd p  {
        display: none
    }
    .apage .hd h1 {
        margin: 0;
        text-align: center;
        font-size: 18px;
    } 
    a.goback {
              height: 34px;
    width: 34px;
    /* float: left; */
    background: #333;
    margin: 5px;
    /* display: inline-block; */
    position: fixed;
    overflow: hidden;
    display: none;
    left: 2px;
    bottom: 2px;
    border-radius: 10px;
    }
    .apage a.goback{display: block}

    a.goback:before {
        content: '';
        height: 16px;
        width: 16px;
        display: block;
        border: 2px solid #999;
        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: 9px;
        left: 12px;
    }
    article,fieldset{padding: 10px; }

    
 article.post, article.index  { margin: 0 10px 10px;    padding: 20px 20px 0;
} 
    article header,
    .chead {}


    .pager div a {
        line-height: 33px;
        padding:10px;
    }
    .pager div a span {
        display: none
    }

 
    .index .gallery li {
        float: left;
        width: 33%;
    }

    
    .comment-button .btn-lg {
        display: block;
        width: 100%;
    }

    .album, ul.list { 
    padding: 0;
}
    
    .album h2, ul.list li.date{height: 40px;}
  
    .album h2 strong, ul.list li.date strong {
    
    font-size: 16px; 
    text-align: center; 
    left: 50%;
    top: 0;
    background: #fff;
    color: #848484;
    line-height: 40px; 
    padding: 0;
    margin-left: -25px;
    width: 60px; 
}
    ul.list li.date:before, .album h2:before {
  
    left: 0;
        top: 19px;
     
}
    ul.list {
         
    }
    ul.list li a {

        position: relative;

        display: block;

        padding: 10px 15px;
        border-bottom: 1px solid #f7f7f7;

    }

    ul.list li.alt a {}

    ul.list li span.date {
    font-size: 12px;
    color: #999;
    float: none;  
    margin: 0;
    background: #ececec;
    height: 20px;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    /* color: #fff; */
    line-height: 20px;
    vertical-align: middle;
    padding: 0 5px;
    /* margin-right: 5px; */
    border-radius: 3px;
    cursor: pointer;
    font-weight: 100;
    margin-top: -3px;
}

    
    
 

    /* section.content,.side{ float: none;
 width:auto;}*/
    section.contentbox {
        max-width: 500px;
        min-width: 480px;
    }
 
 
    
 



}




 @keyframes hidetop{
 
    0%{ opacity: 0; transform: translate(20px, 0) }
    100%(opacity: 1; transform: translate(0, 0) )
}




 
.comment {position: relative;
   
    padding: 10px 0;
    margin: 0 10px;
}
.comment-level-odd {
padding-left: 50px;
}
.comments-all .comment:before{position:absolute;
	bottom: 0;
background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0),rgba(249, 249, 249, 0) 2px,#ccc 2px ,#ccc 4px);

	height: 1px;
	left: 50px;
	right: 0;display: block;
	
}

.comment article {
    margin: 0;

    border: 0;

    padding: 10px;
}



.comment legend {
    display: none
}

.comment small{    font-weight: 400;
    color: #a5a5a5;}
/* .odd{ background:#f8f8f8}*/

.comment div.comment,
.comment div.odd {
    margin: 10px 0 0 50px;
     
    position: relative; 
}
 
.comments-all fieldset.comment{
    position: relative; }

.comment div.comment:before,
.comment div.odd:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: none;
    border: 5px solid;
    border-bottom-color: #f7f7f7;
    border-left-color: transparent;
    border-right-color: transparent;
    top: -5px;
    left: 15px;
    border-top: 0;
}

.comments-all fieldset.comment:before{ left: 0;}

.comment .avatar {
    width: 40px;
    border: 1px solid #e5e5e5;
    padding: 1px;
    background-color: #fff;
    height: 40px;
    float: left
}

 

.coment-content,
.comment h4 {
    word-wrap: break-word;
    word-break: break-all;
    margin:0 0 5px 50px;
    font-size: 14px;
}

.coment-content {
    padding: 5px 10px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
    border: 1px solid #efefef;
    background: #fff;
    width: fit-content;
}
fieldset .coment-content{    padding: 10px;position: relative;
    }


fieldset .coment-btn{width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    margin: 0;
    background: #237bff url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M475.591 948.907v-734.55L199.794 491.065l-51.883-51.883 312.206-312.206L512 75.093l51.883 51.883 312.206 312.206-51.883 51.883L548.41 214.357v734.55H475.59z' fill='%23fff'/%3E%3C/svg%3E")no-repeat 50% 50%;
    background-size: 50% auto;
    padding: 0;
    flex: none;
    box-shadow: 0 10px 10px -5px #23aeff;position: absolute;
    right: 10px;
    bottom: 10px;}

.admin-x .coment-content{    box-shadow: 0 4px 10px rgb(223 242 255);
    border: 1px solid #c2e7ff;
    background: #f8fcff;}

.coment-content:before {content: "";
    width: 10px;
    height: 10px; 
    display: block;
    transform: rotate( 
45deg);
    border-radius: 3px;
    position: absolute;
    left: -4px;
    top: 10px;
    background: #fff;
    border: 1px solid #efefef;
}
.admin-x .coment-content:before{  box-shadow: 0 4px 10px rgb(223 242 255);
    border: 1px solid #c2e7ff;
    background: #f8fcff;}
.coment-content:after{content: "";
    width: 10px;
    height: 14px;
    background: #fff;
    display: block;
    position: absolute;
    top: 8px;
    left: 0;}
.admin-x  .coment-content:after{  
    background: #f8fcff;}


.comment  p  { margin:0;word-break:break-all;}
 
.comment_admin,.alert-warning{    border: 1px solid #ffa473;
    background: #fff9ea;
    padding: 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 h4,
.comment div.comment h4{
    font-weight: 400;
    color: #4a4a4a;
    font-size: 14px;
}

.comment h4 .reply {
    float: right
}

a.comment-reply-link  {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1676 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M237.877 106.667h1208.632q67.21 0 67.21 67.21v685.835q0 67.21-67.21 67.21H237.876q-67.21 0-67.21-67.21V173.876q0-67.21 67.21-67.21z' fill='%23cdcdcd'/%3E%3Cpath d='M510.813 516.794a113.336 113.336 0 1 0 226.672 0 113.336 113.336 0 1 0-226.672 0zM943.7280000000001 516.794a113.336 113.336 0 1 0 226.673 0 113.336 113.336 0 1 0-226.673 0z' fill='%234D4D4D'/%3E%3C/svg%3E")no-repeat;
    height: 17px;
    width: 28px;
    background-position: 0 0;
    background-size: 100% auto;
    display: block;
}

.meta {
    font-size: 12px;
    margin: 0;
    color: #8b8b8b;
        line-height: 35px;
}
.meta a{   color: #8b8b8b;}
  

.comment h4 .author i {
    background: #0C3;
    color: #fff;
    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);

    }

}






.topmenu,.ribbon,span.note-c{display: none;}

@media screen and (max-width: 640px) {
  
    .album ul.list li { 
    width: 50%;
}

}

@media screen and (min-width: 780px) {

    body {background-color: #75b7ce;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%237f888e'/%3E%3Cstop offset='1' stop-color='%237f888e' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23b7b2aa'/%3E%3Cstop offset='1' stop-color='%23b7b2aa' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23c4c9c6'/%3E%3Cstop offset='1' stop-color='%23c4c9c6' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23737373'/%3E%3Cstop offset='1' stop-color='%23737373' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%238b9da9'/%3E%3Cstop offset='1' stop-color='%238b9da9' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff6e4'/%3E%3Cstop offset='1' stop-color='%23fff6e4' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
        
        
        
    }
    .m-logo{
        display: none;
    }
    
    .topmenu{display: block;
        margin: auto;
    max-width: 900px; 
    line-height: 40px;    color: #fff;
    font-weight: 100;}
    .topmenu:before{position: absolute;
    left: 0;
        display: block;
        content: "";
    right: 0;
    height: 1px;
    top: 40px;background: rgba(0, 0, 0, 0.16);
    /* border-bottom: 1px solid #ffffff63; */
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);}
    .topmenu:after{  display: block;
        content: "";
    clear: both;
    height: 1px;}
    
    .topmenu h1{    float: left;
    margin: 0;
    margin-right: 10px;
    line-height: 40px;
    text-transform: uppercase;
    font-weight: 600;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}
    .topmenu h1 svg{width: 6.6923828125em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;}
    .topmenu h1 sup{background: #fff;
    color: #939fa5;
    font-size: 12px;
    padding: 0 3px; 
    border-radius: 3px;text-shadow: 0 0 0;
    margin-left: 3px;}
    .topmenu p{display: inline-block;
    margin: 0;color: rgba(255, 255, 255, 0.7);font-size: 12px;}
    .topmenu ul{float: right;
    margin: 0;
    padding: 0}
    .topmenu ul li{ display: inline}
    .topmenu ul li a{    display: inline-block;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 400;
    text-shadow: 0 1px 0px rgba(255, 255, 255, 0.65);
    /* color: #fff; */
    color: #333;}
    .topmenu ul li:after{    content: '/';
    font-size: 12px;
    font-weight: 100;
    color: #888;}
    .topmenu ul li:last-child:after{display: none}
 
    .ribbon {display: block;
 width: 80px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: -6px;
    right: -6px;
}
.ribbon:before,
.ribbon:after {
 position: absolute;
    z-index: -5;
    content: '';
    display: block; 
    width:25px;
    height:80px;
        background: #004fc7; top: 0;
  left: 0;
}
 
 
  
.ribbon:after { top: auto;
  left: auto;
  bottom: 0;
  right: 0;width:80px;
    height:25px;
}
.ribbon span { position: absolute;
    display: block;
    width: 114px;
  background: #237bff;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    top: 15px;
    right: -28px;
    transform: rotate(45deg);
}
.ribbon span:before,
.ribbon span:after
  
{    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0),rgba(249, 249, 249, 0) 2px,#bceef5 2px ,#bceef5 4px);}
.ribbon span:after{bottom: auto;
top: 2px;}


    
.tb-btn {    position: fixed;
    bottom: 30px;
    /* left: 50%; */
    right: 30px;
    /* margin-left: 530px; */
    display: block;
    width: 40px;}
    .tb-btn a{display: block;
    line-height: 40px;
    background: rgba(19, 19, 19, 0.3);
    border-radius: 5px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;}
    .tb-btn a:last-child{margin-top: 5px}
    .tb-btn a:hover{ background-color: rgba(0, 0, 0, 0.6);color:#fff;}
   
    .tb-btn a:before
    {content: '';
    height: 15px;
    width: 15px;
    display:inline-block;
    border: 2px solid #fff;
    border-left-width: 0;
    border-top-width: 0;
    transform: rotate(-135deg);
    }
    .tb-btn a:last-child:before
    {
    transform: rotate(45deg);
    }
    
    .hd{  background-color:rgba(255, 255, 255, 0.25);
        
        background-color: #c4c4c4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23ffeded' stroke-width='96.2' stroke-opacity='0.08' %3E%3Ccircle fill='%23c4c4c4' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23bababa' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23afafaf' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23a5a5a5' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%239b9b9b' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23919191' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23878787' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%237d7d7d' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23737373' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%236a6a6a' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23616161' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23575757' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%234e4e4e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23454545' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%233d3d3d' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%23343434' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232c2c2c' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23242424' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
        margin-right:180px;
        padding: 5px;border-top: 1px solid rgba(255, 255, 255, 0.3);
        position: relative;
}

    

    .hd:before{ position: absolute;
    width: 30px;
    margin: 0;
    height: 1px;
    left: 0;
    /* right: -10px; */
    top: -1px;
        border-radius: 100%;
   
    background:linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    
    box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.5);
    -webkit-animation: 5s saomiao 0s  infinite;
    -moz-animation: 5s saomiao 0s  infinite;
    animation:5s saomiao 0s  infinite;
    
}


/*saomiao*/
@-webkit-keyframes saomiao {
    0% {
        left: -10px;
        opacity: 0;
    }
    30%  {left:30%;
        opacity: 1;} 
    
    100% {
        opacity: 0;
        left: 100%;
    }
}
@-moz-keyframes saomiao {
     0% {
        left: -10px;
        opacity: 0;
    }
    30%  {left:30%;
         opacity: 1;} 
    
    100% {
        opacity: 0;
        left: 100%;
    }
}
@keyframes saomiao {
     0% {
        left: -10px;
        opacity: 0;
    }
    30%  {left:30%;
        opacity: 1;} 
    
    100% {
        opacity: 0;
        left: 100%;
    }
}
    
    /*anime*/
    .pagination a,
    footer a,
    aside .blogroll a,
    .pager div a i,
    .rebox-button,
    .btn,
    .more-link span,
     .nav   li a,
    .tb-btn a{
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px transparent;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: color, background-color;
        transition-property: color, background-color;
    }
    aside .blogroll a {
        -webkit-transition: padding .3s ease-in-out;
        -o-transition: padding .3s ease-in-out;
        transition: padding .3s ease-in-out
    }

    .tagcloud a {
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px transparent;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }
    .tagcloud a:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #e24647;
        border-radius: 3px;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    .tagcloud a:hover,
    .tagcloud a:focus,
    .tagcloud a:active {
        color: #fff;
    }
    .tagcloud a:hover:before,
    .tagcloud a:focus:before,
    .tagcloud a:active:before {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }

   h3.tit-r { 
    padding: 0 25px;
}
  
.comment { 
    margin: 0 25px;
}
   
.comment .coment-content {
   max-width: 80%;
}
     
    .container {
        width: 900px; 
        position: relative;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        margin:15px auto 30px;
        
        padding: 5px 0 0;
  
        
 
       background: rgba(0, 0, 0, 0.9);
    }
    
  
    
    
    .album  ul.list  li a span{
 
   
    transition:background 0.35s ease-in-out;
    
}
.album  ul.list  li a:hover span{background: rgba(0, 0, 0, 0.5); }
    article.gallery li a{overflow: hidden}
    article.gallery li a:after{content: "";
    background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath fill='%23ffffff' d='M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z'%3E%3C/path%3E %3C/svg%3E") no-repeat 50% 50%;background-size: 22px auto;
    opacity: 0;
    transition:opacity 0.3s ease-in-out;}
    article.gallery li a:hover:after{opacity: 0.5}
.album  ul.list  li a  small{display: block;
 position: absolute;
bottom: 0;
line-height: 30px;
color: #fff;
    left: 0;
    font-size: 12px;
width: 100%;
text-align: center}

.album  ul.list li a img,article.gallery li a img { 
 
	transition: transform  400ms ease-out;
    
} 
.album  ul.list li a:hover img,article.gallery li a:hover img {
    transform: scale(1.2);
 
  
    
} 
    
    
    section.content{position: relative;padding-bottom: 30px; flex: 1;  background:#f7f7f7}
  
    section.content:after,.breadcrumb:before{padding: 0 10px;
    height: 25px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    color: #a0a0a0;
    display: block;
    text-transform: uppercase;
    content: '<!-- MINI4WD/EVA/GUNDAM/KAMENRIDER/ULTRAMAN/DRAGON BALL/MUSIC....-->';
    font-size: 10px;
    line-height: 30px;
   background-color:#f6f6f6;
background-image:
radial-gradient(circle at 100% 150%, #bebebe 24%, #acacac 24%, #acacac 28%, #bebebe 28%, #bebebe 36%, #acacac 36%, #acacac 40%, transparent 40%, transparent),
radial-gradient(circle at 0    150%, #bebebe 24%, #acacac 24%, #acacac 28%, #bebebe 28%, #bebebe 36%, #acacac 36%, #acacac 40%, transparent 40%, transparent),
radial-gradient(circle at 50%  100%, #acacac 10%, #bebebe 10%, #bebebe 23%, #acacac 23%, #acacac 30%, #bebebe 30%, #bebebe 43%, #acacac 43%, #acacac 50%, #bebebe 50%, #bebebe 63%, #acacac 63%, #acacac 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, #acacac 5%, #bebebe 5%, #bebebe 15%, #acacac 15%, #acacac 20%, #bebebe 20%, #bebebe 29%, #acacac 29%, #acacac 34%, #bebebe 34%, #bebebe 44%, #acacac 44%, #acacac 49%, transparent 49%, transparent),
radial-gradient(circle at 0    50%, #acacac 5%, #bebebe 5%, #bebebe 15%, #acacac 15%, #acacac 20%, #bebebe 20%, #bebebe 29%, #acacac 29%, #acacac 34%, #bebebe 34%, #bebebe 44%, #acacac 44%, #acacac 49%, transparent 49%, transparent);
background-size: 40px 20px; }

    
    
  
.breadcrumb {
      font-size: 12px;
    color: #555;
    line-height: 35px;
    position: relative;
    border-bottom: 1px solid #eaeaea;
    padding: 15px 15px 0;
    margin: 0 0 20px;
    box-shadow: 0 14px 0 #efefef inset; 
    background-image: linear-gradient( #e4e4e4 30%, #f9f9f9 70%);
} 
.breadcrumb:before{height:13px;
    top: 0;
    content: "";border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.breadcrumb a,.breadcrumb span{margin-right: 5px;
    display: inline-block;
    color: #00000085;
    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 #b1b1b1;
    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;
}
    
 .post_thumbnail,.post_title { 
    z-index: 6; 
   margin: -25px -25px 15px;
}
article.index .post_thumbnail{ 

   margin: -15px -25px 15px;
} 
  .post_thumbnail img{ 
    border-radius: 5px 5px 0 0;}   
    
   /* .container:before{content: 'Powered by wordpress';
    position: absolute;
    left:-30px;
    top: 0;
       text-transform: uppercase;
    -webkit-writing-mode: vertical-lr;
     writing-mode: vertical-lr;
    color: #aeb8bf;
    box-shadow: 1px 1px 1px inset rgba(0, 0, 0, 0.14);
    font-weight: 400;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.21);
    padding: 3px;
    border-radius: 5px;} */
   
   .container:after,.main:before{content: 'SPACE';
    position: absolute;
    right:-50px;
       bottom:0;
       width: 80px;
       line-height: 80px;
       z-index: -2;
       font-size: 60px;
    text-shadow: 0 1px 5px hsla(0, 0%, 0%, 0.42); 

       -webkit-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
    color:#fff; 
    font-weight: 100;}
  .main:before{content: 'MeiMiao';
    bottom: 200px;
    font-weight: 400;}
    .main:after{    position: absolute;
    background: #000;
    content: '';
    bottom: 0;
    left: 50px;
    right: 230px;
    z-index: -2;
    height: 100px;
    border-radius: 350px /50px;
    box-shadow: 0 0 0 0 rgb(255, 255, 255);
        -webkit-animation: 5s huxi 0s  infinite;
    -moz-animation: 5s huxi 0s  infinite;
    animation:5s huxi 0s  infinite;
}


/*saomiao*/
@-webkit-keyframes huxi {
    0% {box-shadow: 0 5px 10px 0  rgba(255, 255, 255, 0.59);
      
  
    }
    30%  { 
        box-shadow: 0 30px 100px 0 rgb(255, 255, 255);} 
    
    100% {box-shadow: 0 5px 10px 0  rgba(255, 255, 255, 0.59);
        
       
    }
}
@-moz-keyframes huxi {
     0% {box-shadow: 0 5px 10px 0  rgba(255, 255, 255, 0.59);
         
         
    }
    30%  { 
        box-shadow: 0 30px 100px 0 rgb(255, 255, 255);} 
    
    100% {box-shadow: 0 5px 10px 0  rgba(255, 255, 255, 0.59);
         
         
    }
}
@keyframes huxi {
     0% {box-shadow: 0 5px 10px 0  rgba(255, 255, 255, 0.59);
         
        
    }
    30%  { 
        box-shadow: 0 30px 100px 0 rgb(255, 255, 255);} 
    
    100% {box-shadow: 0 5px 10px 0  rgba(255, 255, 255, 0.59);
      
         
    }
}
    
    
    
    
    
    
    
    
    
    
    /*  .comments-all{
    background: #f8f8f8;
    margin: 0 -35px 0;
    padding: 35px;
}.hd{margin-right: 220px;background: rgba(255, 255, 255, 0.17);}*/
 
  

    .side {
      width: 180px; 
    }
  .side:before,.side:after{position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height:490px;
        content: "";
        display: block;z-index: -1;
     -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);}
    .side:before{width: 100px;
    height: 100px;
    bottom: auto;
    top: 0;}

   

    /*   footer:before,
       footer:after {  content: "";
    position: absolute;
    z-index: -2; 
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:400px;
            max-height:100px;
           
            box-shadow:0 15px 20px rgba(0, 0, 0, 0.42);
            
            transform:rotate(-3deg);
        }

        footer:after {
            right:10px;
            left:auto;
           
            transform:rotate(3deg);
        }*/
    /*
.archives{ padding-top:20px;}*/
    
  

}



 



.butterBar {

    margin-left: 36%;

    max-width: 640px;

    position: fixed;

    text-align: center;

    top: 20%;

    width: 58%;

    z-index: 800
}

.butterBar--center {

    left: 50%;

    margin-left: -320px
}

.butterBar-message {

    background: rgba(0, 0, 0, 0.63);

    border-radius: 10px;

    display: inline-block;

    color: #fff;

    margin-bottom: 0;

    padding: 12px 25px
}



.butterBar i {
    font-size: 30px;
    vertical-align: middle
}



@media screen and (max-width:780px) {

    footer,
    footer .fr {
        text-align: center;
        float: none;
    }

    footer .text-right i {
        margin: 0 8px;
    }



    .no-po {
        position: static
    }

    .navbar {
        margin-bottom: 0
    }

    .navbar-header {

        min-height: 108px;
    }


    article header h2 {
        font-size: 18px
    }


    .pagination a,
    .pagination span {
        display: none;
    }

    .pagination a:first-child,
    .pagination span:first-child,
    .pagination a:last-child,
    .pagination span:last-child,
    .pagination > span.current {
        /* flex: 1; */
        display: inline-block;
        margin: 0 10px; 
        text-align: center;
    }



}


 

@media screen and (min-width: 780px) {

    [class*=hint--] {
        position: relative;
        display: inline-block
    }
    [class*=hint--]:after,
    [class*=hint--]:before {
        position: absolute;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: hidden;
        opacity: 0;
        z-index: 1000000;
        pointer-events: none;
        -webkit-transition: .3s ease;
        -moz-transition: .3s ease;
        transition: .3s ease;
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        transition-delay: 0s
    }
    [class*=hint--]:hover:after,
    [class*=hint--]:hover:before {
        visibility: visible;
        opacity: 1
    }
    [class*=hint--]:hover:after,
    [class*=hint--]:hover:before {
        -webkit-transition-delay: .1s;
        -moz-transition-delay: .1s;
        transition-delay: .1s
    }
    [class*=hint--]:before {
        content: '';
        position: absolute;
        background: 0 0;
        border: 6px solid transparent;
        z-index: 1000001
    }
    [class*=hint--]:after {
        background: #383838;
        color: #fff;
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 3px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 12px;
        white-space: nowrap
    }
    [class*=hint--][aria-label]:after {
        content: attr(aria-label)
    }
    [class*=hint--][data-hint]:after {
        content: attr(data-hint)
    }
    [aria-label='']:after,
    [aria-label='']:before,
    [data-hint='']:after,
    [data-hint='']:before {
        display: none!important
    }
    .hint--top-left:before {
        border-top-color: #383838
    }
    .hint--top-right:before {
        border-top-color: #383838
    }
    .hint--top:before {
        border-top-color: #383838
    }
    .hint--bottom-left:before {
        border-bottom-color: #383838
    }
    .hint--bottom-right:before {
        border-bottom-color: #383838
    }
    .hint--bottom:before {
        border-bottom-color: #383838
    }
    .hint--left:before {
        border-left-color: #383838
    }
    .hint--right:before {
        border-right-color: #383838
    }
    .hint--top:before {
        margin-bottom: -11px
    }
    .hint--top:after,
    .hint--top:before {
        bottom: 100%;
        left: 50%
    }
    .hint--top:before {
        left: calc(50% - 6px)
    }
    .hint--top:after {
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .hint--top:hover:before {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        transform: translateY(-8px)
    }
    .hint--top:hover:after {
        -webkit-transform: translateX(-50%) translateY(-8px);
        -moz-transform: translateX(-50%) translateY(-8px);
        transform: translateX(-50%) translateY(-8px)
    }
    .hint--bottom:before {
        margin-top: -11px
    }
    .hint--bottom:after,
    .hint--bottom:before {
        top: 100%;
        left: 50%
    }
    .hint--bottom:before {
        left: calc(50% - 6px)
    }
    .hint--bottom:after {
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .hint--bottom:hover:before {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        transform: translateY(8px)
    }
    .hint--bottom:hover:after {
        -webkit-transform: translateX(-50%) translateY(8px);
        -moz-transform: translateX(-50%) translateY(8px);
        transform: translateX(-50%) translateY(8px)
    }
    .hint--right:before {
        margin-left: -11px;
        margin-bottom: -6px
    }
    .hint--right:after {
        margin-bottom: -14px
    }
    .hint--right:after,
    .hint--right:before {
        left: 100%;
        bottom: 50%
    }
    .hint--right:hover:before {
        -webkit-transform: translateX(8px);
        -moz-transform: translateX(8px);
        transform: translateX(8px)
    }
    .hint--right:hover:after {
        -webkit-transform: translateX(8px);
        -moz-transform: translateX(8px);
        transform: translateX(8px)
    }
    .hint--left:before {
        margin-right: -11px;
        margin-bottom: -6px
    }
    .hint--left:after {
        margin-bottom: -14px
    }
    .hint--left:after,
    .hint--left:before {
        right: 100%;
        bottom: 50%
    }
    .hint--left:hover:before {
        -webkit-transform: translateX(-8px);
        -moz-transform: translateX(-8px);
        transform: translateX(-8px)
    }
    .hint--left:hover:after {
        -webkit-transform: translateX(-8px);
        -moz-transform: translateX(-8px);
        transform: translateX(-8px)
    }
    .hint--top-left:before {
        margin-bottom: -11px
    }
    .hint--top-left:after,
    .hint--top-left:before {
        bottom: 100%;
        left: 50%
    }
    .hint--top-left:before {
        left: calc(50% - 6px)
    }
    .hint--top-left:after {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    .hint--top-left:after {
        margin-left: 12px
    }
    .hint--top-left:hover:before {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        transform: translateY(-8px)
    }
    .hint--top-left:hover:after {
        -webkit-transform: translateX(-100%) translateY(-8px);
        -moz-transform: translateX(-100%) translateY(-8px);
        transform: translateX(-100%) translateY(-8px)
    }
    .hint--top-right:before {
        margin-bottom: -11px
    }
    .hint--top-right:after,
    .hint--top-right:before {
        bottom: 100%;
        left: 50%
    }
    .hint--top-right:before {
        left: calc(50% - 6px)
    }
    .hint--top-right:after {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    .hint--top-right:after {
        margin-left: -12px
    }
    .hint--top-right:hover:before {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        transform: translateY(-8px)
    }
    .hint--top-right:hover:after {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        transform: translateY(-8px)
    }
    .hint--bottom-left:before {
        margin-top: -11px
    }
    .hint--bottom-left:after,
    .hint--bottom-left:before {
        top: 100%;
        left: 50%
    }
    .hint--bottom-left:before {
        left: calc(50% - 6px)
    }
    .hint--bottom-left:after {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    .hint--bottom-left:after {
        margin-left: 12px
    }
    .hint--bottom-left:hover:before {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        transform: translateY(8px)
    }
    .hint--bottom-left:hover:after {
        -webkit-transform: translateX(-100%) translateY(8px);
        -moz-transform: translateX(-100%) translateY(8px);
        transform: translateX(-100%) translateY(8px)
    }
    .hint--bottom-right:before {
        margin-top: -11px
    }
    .hint--bottom-right:after,
    .hint--bottom-right:before {
        top: 100%;
        left: 50%
    }
    .hint--bottom-right:before {
        left: calc(50% - 6px)
    }
    .hint--bottom-right:after {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    .hint--bottom-right:after {
        margin-left: -12px
    }
    .hint--bottom-right:hover:before {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        transform: translateY(8px)
    }
    .hint--bottom-right:hover:after {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        transform: translateY(8px)
    }
    .hint--large:after,
    .hint--medium:after,
    .hint--small:after {
        white-space: normal;
        line-height: 1.4em;
        word-wrap: break-word
    }
    .hint--small:after {
        width: 80px
    }
    .hint--medium:after {
        width: 150px
    }
    .hint--large:after {
        width: 300px
    }
    .hint--always:after,
    .hint--always:before {
        opacity: 1;
        visibility: visible
    }
    .hint--always.hint--top:before {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        transform: translateY(-8px)
    }
    .hint--always.hint--top:after {
        -webkit-transform: translateX(-50%) translateY(-8px);
        -moz-transform: translateX(-50%) translateY(-8px);
        transform: translateX(-50%) translateY(-8px)
    }
    .hint--always.hint--top-left:before {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        transform: translateY(-8px)
    }
    .hint--always.hint--top-left:after {
        -webkit-transform: translateX(-100%) translateY(-8px);
        -moz-transform: translateX(-100%) translateY(-8px);
        transform: translateX(-100%) translateY(-8px)
    }
    .hint--always.hint--top-right:before {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        transform: translateY(-8px)
    }
    .hint--always.hint--top-right:after {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        transform: translateY(-8px)
    }
    .hint--always.hint--bottom:before {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        transform: translateY(8px)
    }
    .hint--always.hint--bottom:after {
        -webkit-transform: translateX(-50%) translateY(8px);
        -moz-transform: translateX(-50%) translateY(8px);
        transform: translateX(-50%) translateY(8px)
    }
    .hint--always.hint--bottom-left:before {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        transform: translateY(8px)
    }
    .hint--always.hint--bottom-left:after {
        -webkit-transform: translateX(-100%) translateY(8px);
        -moz-transform: translateX(-100%) translateY(8px);
        transform: translateX(-100%) translateY(8px)
    }
    .hint--always.hint--bottom-right:before {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        transform: translateY(8px)
    }
    .hint--always.hint--bottom-right:after {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        transform: translateY(8px)
    }
    .hint--always.hint--left:before {
        -webkit-transform: translateX(-8px);
        -moz-transform: translateX(-8px);
        transform: translateX(-8px)
    }
    .hint--always.hint--left:after {
        -webkit-transform: translateX(-8px);
        -moz-transform: translateX(-8px);
        transform: translateX(-8px)
    }
    .hint--always.hint--right:before {
        -webkit-transform: translateX(8px);
        -moz-transform: translateX(8px);
        transform: translateX(8px)
    }
    .hint--always.hint--right:after {
        -webkit-transform: translateX(8px);
        -moz-transform: translateX(8px);
        transform: translateX(8px)
    }
}



/* 编辑器 */
.callout{padding:15px 21px;background-color:#fcfdfe;border-left:3px solid transparent}
.callout-primary{border-left-color:#000}
.callout-success{border-left-color:#15c377}
.callout-info{border-left-color:#65bdf8;background:#d1eafb}
.callout-warning{border-left-color:#faa64b;background:#ffe8d0}
.callout-danger{border-left-color:#fa8181;background:#fbdddd}
.callout p:last-child{margin-bottom:0}
.reply2view{background:repeating-linear-gradient(145deg,#f2f2f2,#f2f2f2 15px,#fff 0,#fff 30px);padding:10px 40px 10px 40px;position:relative}
.video{width:100%;height:25rem}
@media screen and (max-width:700px){
    .ax_gallery .ax_gallery-item dt[remnant]:after {font-size: 1rem;}
    .video{width:100%;height:15rem}
    pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
  
}


kbd {
    padding: .2rem .4rem;
    font-size: 87.5%;
    color: #fff;
    background-color: #212529;
    border-radius: .2rem;
}

pre,code {
font-family: Consolas,Inconsolata,'Bitstream Vera Sans Mono',Menlo,Monaco,'Andale Mono','Courier New',monospace;
color:#333;
background-color:#f8f8f8;
}

pre {
line-height:18px;
overflow:auto;
word-wrap:break-word;
margin:4px;
}